Legacy form documentation

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Astro

Bridgetown

Docusaurus

Eleventy

Gatsby

Hugo

Jekyll

Lume

MkDocs

Next.js

Nuxt

Static

SvelteKit

Custom

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

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

To create a form:

1. Add an HTML form to a page
2. Set the method attribute to post
3. Set the action to where the visitor is redirected after the form submission
4. Add form fields with name attributes to collect data from visitors

<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="_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.

_to (required) - the address (or addresses) that CloudCannon sends the email to. Send the email to multiple addresses by separating them with commas.

If a _hook is defined, this field will not be used.

<input type="hidden" name="_to" value="contact@example.com">

_replyto or email - 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.

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

_subject - the subject of the email.

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

_cc - the value used for the CC header in the email. Use this to send a copy in another address (or addresses) without sending it directly. Send a copy of the email to multiple addresses by separating them with commas.

<input type="hidden" name="_cc" value="contact@example.com">

_hook - instead of sending an email, a webhook can be supplied for the data to be sent to. See Webhooks for configuration details.

<input type="hidden" name="_hook" value="https://hooks.zapier.com/hooks/catch/1234567/abcdef/">

_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.

<input type="text" name="_gotcha" style="display: none;">

Security#

these fields are encrypted before being served to protect your information and prevent spam.

• _to
• _cc
• _hook

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:

// 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));
});

Using Webhooks#

Create your own workflow around form submissions.

The _hook field allows you to supply a webhook that you control to process the form submission. The data is sent as a POST request with the Content Type application/json.

We currently allow hooks from the following platforms to be used:

• Zapier - Documentation
• IFTTT - Help Page

If you have use cases beyond these platforms, send us a message.

IFTTT

Note that IFTTT does not support custom JSON keys. Webhook Applets have access to the three keys value1, value2 and value3, the quantity and naming is fixed. This means that you will have to reflect this structure in your form. For example:

<label>Email Address</label>
<input type="email" name="value1">

Zapier does not have a limitation on the number of fields or custom keys.

Rate Limiting#

Forms hosted on CloudCannon are limited to 750 submissions per 10 days. Contact us if you need this limit expanded.