Honeypot Field for Content Pages

Honeypot Field for Content Pages

Prevent spam bots from leaving reviews and comments on your blog, content and buying guide pages by adding a "honeypot" field. A honeypot is a hidden field which bots can see and enter data into. When they submit the comment or review, Neto knows to block it as the honeypot field has been filled in. This ensures your user generated content is legitimate, and makes it easier to pick out meaningful discussion and reviews from customers. It also won't interfere with your customers' buying experience .

Find the File

For this tweak we will be looking at the default content page template. If you don't have access to your site via SFTP, this can be located in the control panel by navigating to Settings and Tools > All Settings and Tools > Webstore Templates. In the website folder heiracy navigate to THEME_NAME > templates > cms > default.template.html.

If you have SFTP access to your site you can find this by going to httpdocs/assets/themes/THEME_NAME/templates/cms/default.template.html.

Coding Instructions

There are two components to this tweak:

  • Change the way the existing comment form functions.
  • Create a new form which only submits the customer's comment if they don't fall for the honeypot.

Change the Existing Form

  1. In default.template.html find the form which will look something like the following:
<form name="edit_review" method="post" role="form" action="[%URL page:'account' type:'write_contentreview'%][%/URL%]">
    <fieldset>
        <input type="hidden" name="fn" value="confirm">
        <input type="hidden" name="item" value="[@content_id@]">
        <input type="hidden" name="checked_terms_and_conditions" value="1">
        <input type="hidden" name="rating_value" id="rating_value" value="5"/>
        <div class="form-group">
            <label for="review_title">Title For Comment</label>
            <input class="form-control" type="text" name="review_title" id="review_title" value="[%nohtml%][@form:review_title@][%/nohtml%]" required/>
        </div>
        <div class="form-group">
            <label for="review_text">Your Comment</label>
            <textarea name="review_text" id="review_text" rows="10" class="form-control" required>[%nohtml%][@form:review_text@][%/nohtml%]</textarea>
        </div>
        [%ajax_loader%]
            [%if ![@user:username@] or [@user:username@] eq 'noreg'%]
                <div class="form-group">
                    <label for="customername">Your Name</label>
                    <input class="form-control" type="text" name="customername" id="customername" value="[%nohtml%][@form:customername@][%/nohtml%]" required/>
                </div>
                <div class="form-group">
                    <label for="emailaddress">Your Email Address</label>
                    <input class="form-control" size="70" type="email" name="emailaddress" id="emailaddress" value="[%nohtml%][@form:emailaddress@][%/nohtml%]" required/>
                </div>
            [%/if%]
        [%/ajax_loader%]
        <p><button type="submit" class="btn btn-success" />Post Comment</button></p>
        <p class="text-muted">Comments have to be approved before showing up</p>
    </fieldset>
</form>
  1. On the first line you need to modify the action of the form.
<form name="edit_review" method="post" role="form" action="[@url@]">
  1. Next, you will need to add two fields to the form. You can place these two lines anywhere in between the opening and closing form tags.
<input type="hidden" name="review_url" value=""/>
<input name="review_name" value="[@config:NETO_CSS_VERSION@]"/>
  1. Save your changes.

Create a New Form

The next component of this tweak is to add a new form that submits the customer comment only if they haven't fallen for the honeypot. Copy this entire section to the very top of the template file:

<style>
    input[name="review_name"] {
        display: none
    }
</style>
[%site_value id:'footer_javascript'%]
    [%if [@form:fn@] eq 'confirm' AND [@form:review_url@] eq '' AND [@form:review_name@] eq '[@config:NETO_CSS_VERSION@]'%]
<script>
    var formData = new FormData()
    formData.append("fn", "[@form:fn@]")
    formData.append("item", "[@form:item@]")
    formData.append("checked_terms_and_conditions", [@form:checked_terms_and_conditions@])
    formData.append("customername", "[@form:customername@]")
    formData.append("emailaddress", "[@form:emailaddress@]")
    formData.append("review_title", "[@form:review_title@]")
    formData.append("review_text", "[@form:review_text@]")
    formData.append("rating_value", "[@form:rating_value@]")
    var request = new XMLHttpRequest();
    request.open("POST", "[%URL page:'account' type:'write_contentreview'%][%/URL%]")
    request.send(formData)
</script>
    [%/if%]
[%/site_value%]

(Optional) Add a Success Message

This tweak will change the success page that customers see when they submit their comment to be the same page that they were on. So you may want to add a new success message to this page. To do so, you can put your message anywhere in the template after you check the form was submitted successfully:

[%if [@form:fn@] eq 'confirm' AND [@form:review_url@] eq '' AND [@form:review_name@] eq '[@config:NETO_CSS_VERSION@]'%]
<h1>Thankyou for your submission!</h1>
[%/if%]

Was this article useful?

Be notified when this page is updated. Optional.