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 .

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

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.

Step 1: Open the default template

The default template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/cms/default.template.html.

Step 2: Update the form code

Find the form code 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>

On the first line of code, modify the action of the form to [@url@].

<form name="edit_review" method="post" role="form" action="[@url@]">

Add the following 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@]"/>

Step 3: Add the honeypot code

Paste this entire section at the 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%]

Add a Success Message (Optional)

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%]