Using a static generator to host your website has many advantages.

However, there are some drawbacks and constraints in terms of of interactivity. It is indeed a bit more complicated to build a dynamic interactive site, and you will probably have to ask yourself how to integrate a contact form.

In this article, I’ll quickly show you the solution I have chosen for this site.

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

An overview diagram of my technical solution for a contact form. By integrating, in an iframe, a form that is built in, and served by, AirTable, it is the latter that acts as a server and records the contact requests in its database. Each message is then sent by email to the address of my choice.
Overview diagram

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.
Screen shot of the table of contacts. The list of columns is fully visible.
The “Messages“ table of contacts

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).

At the bottom of the views list, click ”Create” and then choose the ”form” type to add an input form.
Create a new input form
  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.

Before creating the form a dialog asks you for its name. The only option is to create a form that can be modified by other collaborators of your database.
Name your new form

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:

All fields are ordered and you have customized messages.
The complete form

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.

The “share form“ action opens a dialog that gives you access to create the HTML/JS embed code.
Get embed code

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.

One of the options the form editor offers is to automatically send an email each time a form is submitted.
Form options

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.
The automation editor displays the trigger in the center. The right side shows its configuration, the type of action and the table of messages as event sources.
The automation 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.

The automation editor displays the trigger and the action in the central part. The action is selected and on the right is its configuration, the type of action and the details of the message to send.
The action to send an email

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.