Set up forms

Setting up forms on your static website often requires using an external service. Simply Static tries to reduce the number of services involved by sending form submissions from your static website to your dynamic WordPress website.

Prerequisites

You need your WordPress website that allows CORS requests and one of the supported form plugins (currently Contact Form 7 or Gravity Forms).

Configure Forms

Go to Simply Static -> Settings -> Forms and we can start configuring the required settings to start supporting forms on your static website.

Static URL

The URL to your static website is required to use the forms integration in Simply Static.

This is important as Simply Static will whitelist CORS requests coming from your static website to your WordPress website. If the URL is wrong, you will not be able to receive form submissions via e-mail.

Use Forms?

Set this to “yes” to activate the forms integration and save the settings.

Set up forms 1

Once you saved the settings, you will notice two changes:

  1. There is a “Create form config” button, we use that later
  2. There is a new submenu in Simply Static -> Forms to set up forms
Set up forms 2

Setting up a form in Contact Form 7

Let’s start by setting up a pretty simple Contact Form 7 form that we use to integrate with Simply Static.

Set up forms 3

What is important for us here are the name attributes. In Contact Form 7, each form field you add has a unique name – these are the name attributes of the field. In our case there are four name attributes:

  • your-name
  • your-email
  • your-subject
  • your-message

The last bit of information we need is the form ID. You can copy that from the overview settings page of Contact Form 7:

Set up forms 4

Setting up a form in Gravity Forms

There are a couple of differences in getting the required information within Gravity Forms compared to Contact Form 7. So let’s quickly set up a new form in Gravity Forms:

Set up forms 5

As you notice, Gravity Forms does not display the name attributes within the form editor. You also cannot change them as they are getting added dynamically by the plugin.

To get the name attributes for each of the fields of your form, you have to use the developer tools of your browser. Take a look at the form from the frontend of your website and inspect each field one by one and copy the “name” attribute.

Here is what you are looking for:

Set up forms 6

The last bit of information we need is the form ID. You can copy that from the overview settings page of Gravity Forms:

Set up forms 7

Enable Client-side validation for Gravity Forms

Gravity Forms only works with server-side validation by default, which means it will not work on your static website. The great news is that there is an official add-on to handle that for you. Take a look at jQuery Validation for Gravity Forms.

Dynamic field population for Gravity Forms

Similar to validating form fields, this usually only works server-side, but thankfully there is a free and open source solution to that right here that works fine with static websites.

Set up a form connection in Simply Static

Now that we have all the information needed, we move to Simply Static -> Forms and create a new form.

Remember, we used Contact Form 7, with a form ID of 5 and four name attributes (“your-name”, “your-email”, “your-subject”, and “your-message”). So a basic integration will look like this:

Set up forms 8

Choose A tool

Select the form solution you want to use. You can select from Contact Form 7, Gravity Forms, or External Service (like Formspree or Reform for example).

Form ID

Here you add the ID of your form. This isn’t required for the External Service integration.

Subject Attribute

Choose the subject line. This can either be just a string or a combination of a string combined with one of the name attributes of your form.

An example could be: “New message from your-name”. Simply Static will automatically recognize name attributes within strings and replace them with the submitted data of the visitor.

Name Attributes

Here you add a comma-separated list of all the name attributes you have used in your form. Make sure they are correct and you have added all attributes you like to use later.

Message

That’s the content of the e-mail that is sent to you after a user submits a form on your static website. You can use HTML tags here to format your e-mail accordingly.

E-Mail Address

That’s the e-mail that will receive the message once a user submits the form.

Additional Headers

You may want to add CC or BCC headers to send the submissions to multiple e-mail addresses. Use the placeholder suggestion to get a better idea of how a header gets structured.

Endpoint

Simply Static automatically includes an endpoint here for you. You can also replace them to use external services like Zapier or IFTTT. It receives the response from your static website, ensures it’s a valid request (CORS), and handles the e-mail sent to you.

Redirect URL

You should always add a redirect URL to a thank you page. As most form plugins rely on Ajax (which is not available on your static website) to show a confirmation you will run into trouble. That’s why I highly recommend setting up a Thank your page and adding the URL here.

Also, make sure that the URL is from your static website. You don’t want to redirect users to your WordPress website 😉

Once you configured everything it’s time to publish your connection.

Creating the forms.json file

The forms.json file is the connection between your static website and your dynamic WordPress website. The content will consist of all your form integrations and the settings you have configured earlier.

The content may look similar to this:

[{"id":"5","tool":"cf7","endpoint":"https:\/\/simplystatic.local?mailme","redirect_url":"https:\/\/youthful-ramanujan-a94a53.netlify.app"}]

There are two ways that this file will be created and updated.

  1. You can generate the forms config file in Simply Static -> Settings -> Forms by clicking the “Create forms config” button
  2. It automatically will be generated each time you create or update a form connection in Simply Static -> Forms

Simply Static will automatically include all configuration files on each full static export.

After your next full static export, you can test the form integration and adjust the settings based on your needs.

Errors:

A small tip here, open the developer tools of your browser when submitting a form on your static website. If something fails, you will see an error. I collected the most common ones and give a couple of suggestions on how to fix them:

504/503

This happens when the Simply Static Endpoint isn’t reachable. If you use Basic Auth for your WordPress website, make sure you exclude the forms endpoint to make that work.

This can also happen if you are using a password-protection plugin to protect your entire website. A commonly used plugin is this one. Sadly, as far as I know, you don’t have the option to whitelist certain URLs here.

404

You will most likely see this issue if you have an error in your form configuration. Take a look at the webhook URL in your form connection – is the URL correct? Is the form.json file available on your static website?

301

There is a redirect for the webhook URL. This is also common if you are using a plugin to protect your WordPress website. A lot of them automatically redirect all incoming requests to your homepage or a certain URL to unlock it.