Forms are an essential part of almost every website. By default, you can not use forms on a static website as they require some sort of server-side processing. That’s why I build a solution for that right into Simply Static.
We start with activating the forms integration in Simply Static -> Settings -> Forms
Once you set “Use forms” to “yes” you will notice that there is a new button called “Create form config”. This button creates the config file based on your created form connections and is required to make forms work on your static website.
Each time you modify or add a new form integration, you have to recreate the form config file by clicking this button.
Create a form connection
Navigate to Simply Static Forms and create a new integration. Currently Simply Static supports Forms created by Contact Form 7 and Gravity Forms. You can also use one of the several external services like Zapier, Formspree, or IFTTT.
Example with Contact Form 7
To keep things simple we do a simple example with Contact Form 7 and create an integration for it within Simply Static.
I created a simple form in Contact Form 7 which looks like that:
You can use pretty much every field you can imagine within Contact Form 7. The only thing here you have to keep in mind is the names of your “name” attributes as we need them for the next step in making the integration in Simply Static.
Create the integration
Now we head back to Simply Static -> Forms and create a new integration form here.
First, we choose “Contact Form 7” as the tool. Then we add the form id from Contact Form 7 to the next field. This ensures we submit the correct form on your static website.
Next, we add the form field with the name attribute “your-subject” to the subject. This is the subject of the mail you will get after someone submits the form.
Next, we fill out the name attributes field. Here we add a comma-separated list of all name attributes you want to be included in the send mails.
This ensures that get only the data you want and not everything that’s provided within a Contact Form 7 submission.
You can then define a message. This field allows the usage of HTML tags so that you can style the message that is sent to you once a user submits the form on your website.
Now we switch over to the right side of the settings.
Add the e-mail address you want the get the mails send to. Then you have to provide a webhook to send the request to.
You can also set additional headers like Cc or Bcc if you like to send the e-mail to additional recipients.
Luckily Simply Static provides a ready solution for you, just copy the link from “Simply Static Endpoint” and add it to the field.
Make sure you have configured the details in Simply Static -> Settings -> CORS to make sure everything is working correctly.
Finally, you should add a redirect URL to a “Thank You” page to inform your visitor that the form was successfully sent. This is required because you can not use the build-in submission confirmation from Contact Form 7 as you don’t have access to AJAX on your static website.
That’s it, now you can use (and test) your contact form on your static website. You should get an e-mail that contains all information you have added within the name attributes and the message should be formatted as shown in the “message” field.