Create forms on your site and send the submissions to an email address or integrate with your own workflows.
To create a form:
- If you haven't already, create an inbox and connect it to your site.
- Add an HTML form to a page
- Set the
methodattribute to post - Set the
actionto where the visitor is redirected after the form submission - Add an
inputelement with the nameinbox_keyand set itsvalueattribute 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. - Add form fields with
nameattributes 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="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.
<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>
_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;">
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:
- 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:
// 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 === 303) { // 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));
});