Building a Contact Form

This guide discusses the process of building a contact form with the help of the Databases and Form Builder.

Prerequisites

To follow the steps in this tutorial, you must understand how to use Liquid, YAML, and GraphQL. In addition, you must learn how to interact with Modules on Insites.

• Liquid Markup
• YAML

Steps

Building a contact form is a four-step process:

• Step 1: Create a database for the messages
• Step 2: Build the form
• Step 3: Embed the form on a page
• Step 4: Read the submissions and add an email notification

Step 1: Create a database for the messages

In the Instance Admin, select Data on the main menu, then Databases, and click Create Database. Name the database and add three fields: , and . For the full steps, see Adding a Database.

Step 2: Build the form

Select Forms on the main menu, then All Forms, and click Create Form. On the Details tab, enter a form name, for example , and choose the database. Use the Fields tab to change how each field is displayed. Click Create Form to save the form.

Step 3: Embed the form on a page

Open the saved form and select the Form Code tab. It gives you two snippets to copy.

Add the first snippet to the <head> section of your page or layout. It loads the form styles and scripts, and it ends with this line:

Insert the second snippet where the form should appear on the page. It uses the form path, for example:

Step 4: Read the submissions and add an email notification

Each submission is saved as an item in the database. To read the submissions, select Data on the main menu, then Databases, and click the Items row action of the database. For more details, see Managing Database Items.

To send an email when someone submits the form, open the form and add a notification on the Email Notifications tab.