Building a Contact Form

This guide discusses the process of building a contact form with the help of the Database Manager 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
• GraphQL
• Modules

Steps

We will cover all aspects of forms and retrieving data through the following steps:

• Step 1: Building a database table to store contact data
• Step 2: Building a form to collect data
• Step 3: Fetching saved data with GraphQL
• Step 4: Rendering database items within a page
• Step 5: Displaying the form on your site
• Step 6: Deleting a contact
• Step 7: Editing a contact
• Step 8: Adding Email notifications
• Step 9: Securing the form

Step 1: Build a database table to store contact data

You can build a database table using one of two ways:

• Building a database table using the Instance Admin
• Building a database table via code

Building a database table using the Instance Admin

Building a database table using the Instance Admin is the easiest and fastest way to create your database table. The Insites Admin employs an intuitive user interface that lists available input options and catches errors. Visit the following topics to learn more:

• Form Builder
• Adding a Database
• Fields and Field Groups
• Managing Database Items
• Field Types and UI Elements

Building a database table via code

To define a new Table via code, use YAML files in the directory. Then, in the key-value format, you can define a name for your Database Item (Record) and an array of Database Fields for the Record object. To build a Contact Form, you'll need email, name, and description attributes on the Record that you can call a .

app/schema/contact.yml

The basic configuration of a Record consists of a name and a list of Database Fields. In the example above, you have defined three attributes of type .

For more information on Database Fields, please visit the Database Fields documentation.

Step 2: Building a form to collect data

You can build a form using one of two ways:

• Building a form using the Instance Admin
• Building a form via code

Building a form using the Instance Admin

You may use the Insites Instance Admin user interface to build forms for your database. The forms can then be included on your preferred page for users to be able to input data into your database. Read the following resources for more details:

• Layouts
• Content
• Database
• Rendering a form on a page

Building a form via code

Now that you have the definition of a in place, you can create a Form that will configure the server to accept requests with data in the desired format. Data passed through the form will be stored in the database as a Contact object.

app/forms/contact_form.liquid

The above definition allows name, email, and description attributes and defines validation for each attribute.

Step 3: Fetching saved data with GraphQL

This step is automatically done if you use the Insites Instance Admin to create your Database Tables and Forms. Insites configures the forms to interface with your databases, potentially saving you hours of work. However, to demonstrate how things work 'under the hood,' the manual way of fetching data from the databases is discussed.

Now that you have created the Table in the previous step, you can fetch this data with GraphQL. To define the TAG get_contacts query, create the file in the directory.

To check if the above query works properly, you can head to the next section to learn how to embed query results with page view.

Step 4: Rendering database items within a page

To render database items within a page, create a page that will respond to given paths:

• for list view
• for detail view

The page slug for the above URL map will be as the ID passed in the URL is dynamically assigned to the variable. For more information, visit our documentation on Pages and Templates.

app/views/pages/contacts.liquid

app/views/partials/contacts/list.liquid

app/views/partials/contacts/show.liquid

Step 5: Displaying the form on your site

You can display an HTML form on your page using one of two ways:

• Displaying a form on your site using Insites
• Displaying a form on your site via code

Insites eliminates the need to construct HTML forms from the ground up. Nevertheless, the following section provides a comprehensive guide on constructing a form from code to offer insight into the underlying technical processes.

Displaying a form on your site using Insites

To display a form on your site using the Insites Instance Admin:

1. Select Forms on the main menu.
2. Create a form by pressing the ADD FORM button or select the Edit row action link on an existing form.
3. Go to the 'Form Code' tab. There are two code snippets available:
   • Code snippet for page.
   • Code snippet for a page's tag.
   Copy the two snippets to your preferred text editor and set aside.
4. Go back to the main menu and select CMS
5. Choose one of the following options:
   • Content page
   • Partial
   • Layout
   Then copy your snippets to display your forms.

Displaying a form on your site via code

In Step 2: Define Contact Form-Data Creation, you have created a form file called that configures the form object. This form was a minimal example to allow sending requests to our API endpoint and creating Record objects. Now you can extend this file with HTML, which renders the form to our users. The HTML part of the file comes after the configuration part, i.e. after the closing tag.

The configuration option defines where to redirect the user after successful form submission. The predefined tag allows you to create a context for submitted data.

Please visit our documentation regarding Forms for more information on advanced form configuration.

To display the form on the previously created page, you have to include it with:

app/views/pages/contacts.liquid

As a result, you should be able to create database item objects, called Contacts, with a simple form submission and list them after fetching them with GraphQL.

Step 6: Deleting a contact

Deleting a contact using the Instance Admin is straightforward. You may use the documentation on Database Items or CRM for more details. To demonstrate deleting a contact via code, however, and removing a record from the database, create a form called :

Then, display a delete button on the list of contacts and include the form as follows:

Step 7: Editing a contact

Much like deleting a contact, Editing a contact is a straightforward process using the Instance Admin. Depending on your website's configuration, you may edit a contact on the Database Manager or CRM. Please visit the Database Items or CRM documentation for more details. To edit a contact via code, you can reuse the form for creating contacts to update a database item. To prefill the form with the correct data, add to the tag.

app/views/pages/contacts/edit.liquid

Step 8: Adding Email notifications

You can use the Instance Admin to add email notifications to your form. Visit the Form Builder Notifications and Callbacks documentation for more details. To create email notifications from scratch, create an Email Notification file that will define email configuration and message template. The file should be in the directory. Name the file :

app/emails/contact_notification.liquid

All request parameters are now accessible in the object, so you can compose any email you want. The next step is linking in the by adding the following file to the form configuration inside: .

Step 9: Securing the form

At this point, you should restrict access to your created forms and views. Please visit the documentation on Associating an Authorisation Policy with a Form to learn more.

Next Steps

Congratulations! You have learned how to build forms with Records. You can now explore our reference documentation for database fields and tables: Database Fields and Tables.