Configure spam-proof forms

Implement simple email forms quick and easy.


**NOTE: This works only for sites that are hosted on PoppyGo.**

Here is how to do it.

Three elements are needed for building your forms.

  1. Form in your template
  2. Configuration of the pogoforms engine
  3. A bit of CSS

The email form

Have a look at the example below. You can copy this into a partial “contactform.html” in your template’s partials folder. Then you can use this form partial in any other template by calling {{ partial “contactform” . }} )

{{ $page := .  }}
{{ $autolink := default true $page.Params.autolink }}
{{ $data := site.Params }}

<!-- Contact widget -->

<div class="row contact-widget">

    <div class= "col-12 section-heading">
        <h1>{{ with $page.Params.email_form_title }}{{ . | markdownify }}{{ end }}</h1>
        {{ with $page.Params.email_form_subtitle }}<h5>{{ . | markdownify }}</h5>{{ end }}
    </div>
    <div class="col-12 col-lg-12">

      {{ if $page.Params.email_form }}
        {{ $post_action := printf "action=\"https://pogoform.com/%s\"" $data.pogoform }}

        <div class="mb-3">
          <form name="contact" method="POST" {{ $post_action | safeHTMLAttr }}>
            <div class="form-group form-inline">
              <label class="sr-only" for="inputName">{{ i18n "contact_name" }}</label>
              <input type="text" name="name" class="form-control w-100" id="inputName" placeholder="{{ i18n "contact_name" | default "Name" }}" required>
            </div>
            <div class="form-group form-inline long">
              <label class="sr-only" for="inputLastName">Last name</label>
              <input tabindex="-1" type="text" name="lastName" class="form-control w-100" id="inputLastName" placeholder="Your last name">
            </div>
            <div class="form-group form-inline">
              <label class="sr-only" for="inputEmail">{{ i18n "contact_email" }}</label>
              <input type="email" name="email" class="form-control w-100" id="inputEmail" placeholder="{{ i18n "contact_email" | default "Email" }}" required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="inputMessage">{{ i18n "contact_message" }}</label>
              <textarea name="message" class="form-control" id="inputMessage" rows="5" placeholder="{{ i18n "contact_message" | default "Message" }}" required></textarea>
            </div>
            <button type="submit" class="btn btn-outline-primary px-3 py-2">{{ i18n "contact_send" | default "Send" }}</button>
          </form>
        </div>
      {{end}}

</div>
</div>


This form template results in a form like this:

Configure spam-proof forms  documentation

Notice the honeypot field

One of the form fields is called “lastname”. It is not visible in the front-end. We used this one as the honeypot in this example. The CSS class is called “long” in this example. Below you find the code that hides it. In this way that bots won’t guess it’s a honeypot easily.

 .long {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 0;
   width: 0;
   z-index: -1;
 }

Configuring pogoforms validation and honeypot setup

Next, you need to tell the pogoforms engine how to deal with the from data. For example the email address where to send it to. And for example the address of the form-sent page.

The configufation is done with a YAML file. Create a poppygo folder in de root of your site. Inside the PoppyGo folder, create a folder called " forms". Create “default.yml”.

Copy the example code below in your file.

---
subject: Contactform on your website
from: you-have-mail@pogoform.com
to: brecht@productowners.io
redirect_to: contact/form-sent
validations:
  fields:
    email:
      type: email
      empty: false
      mandatory: true
    name:
      type: string
      empty: false
      mandatory: true
    lastName:
      type: string
      empty: true
      mandatory: false
    message:
      type: string
      empty: false
      mandatory: true


Empty field

Most of the fields are self-explanatory. Let’s focus now on the “empty” field. If this field is set to true, pogoforms will check whether the field is empty. If it is not empty, the email will not be sent. Use this for the honeypotfield. In this case “lastName”.. You have to make sure that other required fields have “empty” set to false.