Choose your preferred SSG:
Choose your preferred SSG:

Creating a form for your site on CloudCannon

Create forms on your site and send the submissions to an email address or integrate with your own workflows.

To create a form:

  1. If you haven’t already, create an inbox and connect it to your site.
  2. Add an HTML form to a page
  3. Set the method attribute to post
  4. Set the action to where the visitor is redirected after the form submission
  5. Add an input element with the name inbox_key and set its value attribute to the key you gave your inbox. If you don’t include this input the form will be sent to the default inbox connected to your site.
  6. Add form fields with name attributes to collect data from visitors
contact.html
<form method="post" action="/success.html">
  <label>Email Address</label>
  <input type="text" name="email">

  <label>Name</label>
  <input type="text" name="name">

  <label>Message</label>
  <textarea name="message"></textarea>

  <label>Urgent</label>
  <input type="checkbox" name="urgent">

  <label>Type of Enquiry</label>
  <input type="radio" name="_subject" value="Sales Enquiry"> Sales
  <input type="radio" name="_subject" value="General Enquiry"> General

  <input type="hidden" name="inbox_key" value="contact_inbox">
  <input type="hidden" name="_to" value="sales@example.com,support@example.com">
  <input type="hidden" name="_cc" value="sales.tracker@example.com">
  <input type="text" name="_gotcha" style="display: none;">

  <input type="submit" value="Send Message">
</form>

CloudCannon sends named form data to email addresses of your choosing. Alternatively, use a hook to integrate with services like Zapier or IFTTT.

Special Fields

Use these fields to customize the email CloudCannon sends through the form. The fields can be hidden or visible, depending on your requirements.

_replyto - the value used for the Reply-To header in the email. Use this to ensure clients reply to the visitor rather than a default CloudCannon address.

contact.html
<label>
  Your Email Address
  <input type="text" name="_replyto">
 </label>

_subject - the subject of the email.

contact.html
<select name="_subject">
  <option>General Enquiry</option>
  <option>Quote Request</option>
  <option>Support</option>
</select>

_gotcha - honeypot field for preventing untargeted spam. CloudCannon does not send the email if this field has a value. Hide it with CSS to prevent visitors filling it out.

contact.html
<input type="text" name="_gotcha" style="display: none;">
Note

For better spam prevention try using Google reCAPTCHA or hCaptcha.

Submitting with AJAX

Submitting a form with JavaScript saves a page load after sending a message, providing a seamless experience. Viewers without JavaScript enabled will fall back to the normal flow.

To submit your form with JavaScript:

  1. Build and test your form
  2. Override the submit event on your form
  3. Change the page to notify your viewers the message was sent

Start with this JavaScript snippet and adapt it for your site:

script.js
// Helper function to get form data in the supported format
function getFormDataString(formEl) {
    var formData = new FormData(formEl),
      data = [];

  for (var keyValue of formData) {
      data.push(encodeURIComponent(keyValue[0]) + "=" + encodeURIComponent(keyValue[1]));
  }

  return data.join("&");
}

// Fetch the form element
var formEl = document.getElementById("contact-form");

// Override the submit event
formEl.addEventListener("submit", function (e) {
    e.preventDefault();

  if (grecaptcha) {
      var recaptchaResponse = grecaptcha.getResponse();
    if (!recaptchaResponse) { // reCAPTCHA not clicked yet
      return false;
    }
  }

  var request = new XMLHttpRequest();

  request.addEventListener("load", function () {
    if (request.status === 302) { // CloudCannon redirects on success
      // It worked
    }
  });

  request.open(formEl.method, formEl.action);
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.send(getFormDataString(formEl));
});
Was this article helpful? or Suggest an improvement >

Related articles

Other Resources

  1. Zapier
  2. Zapier Documentation
  3. Automate
  4. Automate Documentation
  5. IFTTT
  6. IFTTT FAQ