Working with a specific static site generator? Customize CloudCannon's documentation to suit your SSG.
Great! We'll show you documentation relevant to . You can change this any time using the dropdown in the navigation bar.
Legacy forms are deprecated. It is recommended that you migrate to the new forms feature. This will speed up your build process and enable a new range of features. Legacy forms will not work with all SSGs.
Create forms on your site and send the submissions to an email address or integrate with your own workflows.
To create a form:
Add an HTML form to a page
Set the method attribute to post
Set the action to where the visitor is redirected after the form submission
Add form fields with name attributes to collect data from visitors
contact.html
copied
<formmethod="post"action="/success.html"><label>Email Address</label><inputtype="text"name="email"><label>Name</label><inputtype="text"name="name"><label>Message</label><textareaname="message"></textarea><label>Urgent</label><inputtype="checkbox"name="urgent"><label>Type of Enquiry</label><inputtype="radio"name="_subject"value="Sales Enquiry"> Sales
<inputtype="radio"name="_subject"value="General Enquiry"> General
<inputtype="hidden"name="_to"value="sales@example.com,support@example.com"><inputtype="hidden"name="_cc"value="sales.tracker@example.com"><inputtype="text"name="_gotcha"style="display: none;"><inputtype="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.
_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.
contact.html
copied
<label>
Your Email Address
<inputtype="text"name="_replyto"></label>
_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.
_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.
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:
Build and test your form
Override the submit event on your form
Change the page to notify your viewers the message was sent
Start with this JavaScript snippet and adapt it for your site:
script.js
copied
// Helper function to get form data in the supported formatfunctiongetFormDataString(formEl){var formData =newFormData(formEl),
data =[];for(var keyValue of formData){
data.push(encodeURIComponent(keyValue[0])+"="+encodeURIComponent(keyValue[1]));}return data.join("&");}// Fetch the form elementvar 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 yetreturnfalse;}}var request =newXMLHttpRequest();
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));});
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:
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: