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.
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:
Navigate to the forms menu in your site settings, under Hosting > Forms.
In the Link Inbox menu, select the Inbox you want to link.
At this point, you can also toggle the visibility of the Inbox on your site with the Display Inbox option. You can also require a CAPTCHA for submissions from this site with the Require CAPTCHA option. See here for more information about using CAPTCHA for your Inbox.
Click Link Inbox to finish linking the Inbox to your site.
Now create a form on your site and configure it to submit to one of your connected Inboxes.
To create a form:
Add an HTML form to a page.
Set the method attribute to post.
Set the action to the URL to redirect the visitor to after they submit the form.
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 submission will be sent to the default Inbox connected to your site.
Add form fields with name attributes to collect additional data from visitors.
If you are adding captcha to prevent spam, follow the documentation (Google reCAPTCHA or hCaptcha) to add the required code to your 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.
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.
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 ===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));});