Netlify Form Creation & Usage



How To Do That Form Thing With Netlify

SMTPlib does it's business but... Here's a sure fire way to do it using external powers (Netlify).

Nefify give this example in the documentation.

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

So, what this does is pretty neat. Just give the form a name (name="contact") and supply the data attribute data-netlify="true" and we're pretty much good to go as far as form handling goes with Netlify. Odd but... I like it!

Let's just snap this form into something simple first so we can see what's going on.

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name">
  <button type="submit">Submit</button>
</form>

So what this should do is get every user input from the form that has a name attribute and send the data wherever you choose through the Netlify dashboard thing. The code above will send just the name given... Boosh!

Let's get to this!

Our form with validation and pattern regex stuffage.

<form id="formz" name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true" netlify-honeypot="surname">
  <input type="text" name="name" pattern="[a-zA-Z]+" placeholder="Name" required>
  <input type="text" name="surname" pattern="[0-9]+" placeholder="Surname">
  <input type="tel" name="phone" pattern="[0-9]+" placeholder="Phone" required>
  <select class="select-css" required aria-required="true" name="option">
    <option value="">Choose an option</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
  </select>
  <button type="submit">Submit</button>
</form>

Notice the included data-netlify-recaptcha="true" and netlify-honeypot="surname" on the form...

The honeypot adds a hidden input and if a bot submits the form when the input is filled it won't send. We'l hide this with CSS.

To add recaptcha keys...

Log in to your Netlify dashboard and add the following environment variables to your site’s Settings > Build & deploy > Environment > Environment variables panel:

SITE_RECAPTCHA_KEY with the reCAPTCHA API site key.

SITE_RECAPTCHA_SECRET with the reCAPTCHA API secret key.

If we want to submit the form using AJAX and redirect the user to another page on success we can.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $("#formz").submit(function(e) {
    e.preventDefault();
    var $form = $(this);
    $.post($form.attr("action"), $form.serialize()).then(function() {
      window.location.href = `https://recycledrobot.co.uk`;
    });
  });
</script>

And add some CSS for good measure.

#formz {
  max-width: 500px;
}
#formz input, #formz button {
  padding: .5em;
  width: 100%;
  background: #fff;
  border: 1px solid #aaa;
  margin-bottom: 5px;
}
#formz button {
  margin-top: 8px;
}
#formz input:focus {
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
#formz button:hover{
 cursor: pointer;
}
.select-css {
    display: block;
    line-height: 1.3;
    padding: .5em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
    border: 1px solid #aaa;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.select-css option {
    font-weight:normal;
}
input[name="goButton"] {
  display: none;
}

Thanks for reading. x

Resources