Download the repository files at https://github.com/AirshipCMS/contact-forms.airshipcms.io. See an example of the live form at https://contact-forms.airshipcms.io.
In Airship CMS Admin, set up a new collection.
Pay attention to the Public Path. This is important for creating the email template for this form.
Skip this. You don't need to set a layout or template directory.
Create fields that correlate to the data you want to save in your form. It is easiest to save all data as Text, though if you want to manipulate data after submission, you can also save data as radio, select, and checkbox field types. This example collection shows many different field types, though if you are making a simple contact form, you only need to set the field types you need:
Leave it as Created At.
Field types that have not been tested with forms: Multiselect, Richtext Area, Image, Link, List of Images, List of Links, Related Aerostats, Date.
In Airship CMS Admin, go to Settings and add an email to BCC Public Make in order to receive emails when someone enters a form submission.
In Airship CMS Admin, create a Page called "Contact" with permalink "/contact" and template "contact.html".
In your text editor, create the contact.html page template, and add the form fields you need. Reference the contact.html template in the example repository.
Be sure to add links to the necessary scripts to make the form work:
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/assets/scripts/contact.js"></script>
In Airship CMS, click the wrench icon to Modify the Collection, and find the Collection ID.
Remember the ID number. You don't need to save any changes.
In your text editor, modify the contact.js so that the form submits to the proper collection on your site. In the javascript file on line 7 change the Collection ID to the ID for your collection.
url: "/api/aerostat_collections/373",
With this markup & script, you can test locally that the form creates a post in the Contact Form Example collection.
If everything is set up properly, hitting the Submit button on your local form will create an example post in your collection:
When you view the post, it will look something like this:
You will notice that even though the post has been created, you haven't received any email notifications.
Before setting up the email template, make sure everything else is set up properly.
- You have added at least one BCC Public Make Email
- Submissions are being created in your collection when you Submit them though your local form.
This layout is required in order for email submissions to work. It is just a container layout and does not contain any markup that will be used in the actual email.
This template is required in order for email submissions to work. This template contains markup that will be used in the email template. Note: the email template name is the collection public path with _email.html appended to the end. In this example collection, the public path is contact-form-example, so the email template name needs to be contact-form-example_email.html.
You must airship launch the email templates in order for the email notification to work. Changes to local airmail templates have no effect. Only LAUNCHED email templates will be read by the email server.
Test the form on your launched website. You should see a post in the collection in Airship CMS Admin, and you should also receive an email submission notifying you about the submission.
For security reasons and to prevent abuse, you cannot send public make submission notifications to arbitrary emails. Emails will only send to the emails listed in the BCC Public Make Email List in the Admin Panel.