To receive form submissions from your sites, you first need to connect your site to an Inbox in CloudCannon.
To connect your site to an Inbox:
Now create a form on your site and configure it to submit to one of your connected Inboxes.
To create a form:
inbox_key
and set its value attribute to the key you gave your Inbox. If you don’t include this input, the submission will be sent to the default Inbox connected to your site.<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">
<input type="hidden" name="inbox_key" value="your-inbox-key">
<input type="text" name="_gotcha" style="display: none;">
<input type="submit" value="Send Message">
</form>
Any CloudCannon form can use the _gotcha
field to help prevent untargeted spam. CloudCannon does not accept a submission if this field has a value. Hide it with CSS to prevent visitors from filling it out.
<input type="text" name="_gotcha" style="display: none;">
You can also use CloudCannon Forms to receive file uploads from visitors to your site.
To setup file uploads on your form:
enctype
attribute to multipart/form-data
input
element to your form with the type
attribute set to file
<form action="/" enctype="multipart/form-data" method="post">
<input accept="image/png, image/jpeg" id="avatar" name="avatar" type="file">
<input type="submit" value="Send Message">
</form>
Now when visitors to your site submit a file through your form, CloudCannon will save that file and then replace it with a link that you can use to access the file.
File submissions through CloudCannon have the following limitations:
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:
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));
});