Delegate your contact form

The “Serverless” lifestyle

Challenge

A static site means limited technical means:

• HTML for the documents;
• CSS for formatting;
• JavaScript for the interactions.

No database server.

No application server to handle user requests.

You only have static content.

In contrast, a contact form implies having a way to process a request and store it in a database, a CRM or a simple email.

Any solutions?

However, there are solutions:

• A “mailto:” link is a simple solution, but their use would only work if an email client is correctly configured on the client computer.
• Hosting companies, such as Netlify, offer to support the action of an HTML contact form.
• One can use “on demand” functions, like AWS Lambda.

My choice goes to a both simple and free alternative.

I’m using an online service to build a form and then integrate it into a page on my site.

By choosing AirTable, an online database service, I can build a spreadsheet to track the various contact requests and design a custom form for my site.

Let’s see how it works.

Overview

The solution I built is based on the AirTable platform:

• a table to list and track contact requests;
• a contact form to feed this table with data;
• a notification mechanism to send me each new request by email.

I can customize the content of the notification messages and also facilitate the response.

And, of course, I integrate the AirTable form on my site using a simple iframe.

AirTable as a database

The heart of the AirTable service is a database with a spreadsheet-like interface.

The interface looks like Excel or Libre Office, but the tables must follow a structure determined by your needs.

For my contact management, I simply defined a new database.

I then created a table “Messages” which contains the following columns:

• a unique identifier for each contact line/request, of type autonumber ;
• an email address of type email ;
• the name of the person, of type single line text ;
• the company name, type single line text ;
• the message, type long text ;
• the date of my answer, type date ;
• a checkbox to follow my answers, type checkbox ;
• the first contact date, again a date.

With this table to store the contact requests, the next step is to create the input form for the visitors.

Build a contact form

Airtable allows you to define alternative layouts for your tables.

All you have to do is create an additional view (view).

A form is a type of presentation attached to your table, but this interactive view allows a user to enter values to add a new row.

Add a view by displaying the list of views ("views" buttons under your table name).

1. Click on “Create” to display the view types;
2. Click “Form” to add an input form;
3. In the window that appears, give your form a name.

The free package limits the definition of collaborative forms.

This simply means that all other AirTable users who have access to your database can also modify the structure of this form. For personal use, this will not be a concern.

After validation your form is automatically built and has a field for each column of your table.

You can now customize the form by dragging the columns that are reserved for you (the status and the response date) to the left side. Arrange the fields as you see fit.

When finished, your form should look like the following illustration:

From this step, we have achieved two goals:

1. We have a hosted database for our contact tracking;
2. We have a form for site visitors to populate this database.

It is high time to link AirTable to our website.

Integration in the site

The form editor will provide you with a fragment of HTML and JavaScript code that you will integrate into your contact page.

Click on the “Share form” button.

In the small dialog that appears, you will now click on “Embed this view” to get the code fragment to integrate.

A new window gives you directly the code that must be integrated in your page. It is possible to adjust some presentation elements and a preview is also available.

I let you integrate this form in the way that best fits your static site. This part totally depends on your tool and the way you want to propose this form.

We will now see how to receive an email as soon as a user submits a contact request via this form.

Email Notifications

When you created the form, you probably noticed that there is an option to receive an email each time the form is submitted by a user.

We won’t use this option.

It is more practical, and more flexible, to use another way: an automation.

For this, you will only have to do a few things:

1. Click on “Automation”, to the right of your database name: The right-hand side of the screen displays the list of automations defined on this table;
2. Click on the action “Create automation” to add your first automation: The right side, the automation editor, prompts you to define a trigger (trigger) for the new set of actions;
3. Select “when a record is created”;
4. The trigger is defined and the right side of the editor prompts you to configure it: Select the “messages” table as the source of the trigger.

Now we need to specify which action will be triggered:

1. Add an action by clicking on " Add advanced logic or action " : choose “send email” to send an email for each line added to the message table.
2. Configure the action:
   • fill in the email address to which the messages are sent;
   • add the subject of the message: " [Support] Website - {fullName} “. You can include any field of the form by clicking on the “+” on the right of the field;
   • Finally, enter the complete text of the message you wish to receive. Again, insert the values entered in the form by selecting them from the “+” button placed on the right.

Note : Words between braces represent variables inserted by AirTable editor.

In my message I include the following information:

• {initialContact}, for the date of sending;
• {email}, for who to reply to;
• {fullName}, the user’s full name;
• company, if any; {message}, the user’s full name; {company}, the name of the user’s company, if any;
• {message}, the content of the message sent;
• The {Airtable record URL} provides a direct link to the record for quick review and update.

My typical message looks like the example below:

# Web Contact

Sent on {initialContact}

**Contact:**

Email: {email}<br>
Name: {fullName}<br>
Company: {company}<br>

**Message**

{message}

**Reference**

[Reply](mailto:{email}?subject=[support])

{Airtable record URL}

To make it easier to reply, I insert a “mailto:” link so I can reply directly to the sender of the message.

The link to the new line in the table then allows me to quickly indicate that I have replied to the message.

Conclusion

And this is how, without any dedicated server, it is possible to quickly integrate a contact form on a static site.

In my case, I have two identical forms: a version in French and a version in English. This allows me to manage the localization of my site.

I hope you found this article informative and useful.