Set up forms

Learn how to activate and use the forms integration within Simply Static to embed forms or offload submissions to an external webhook.

Activate the form integration

Go to Simply Static -> Settings -> Forms and activate "Use Forms":

Once done, you will see an additional button, "Create a form connection", click on it, and you get redirected to the form connection setup screen:

Form Type

Title

This is the internal name of your form connection - you can call it whatever you want, as the title is never publicly visible to your visitors.

Form Type

We limit the options for setting up forms depending on where your WordPress installation is located (local or online).

If you run WordPress locally, you can't use the "Embedded Form" option, as WordPress must be accessible online.

Form Usage

You can decide whether to use an external webhook or directly embed your form via iFrame.

Form Plugin

Plugin

Please choose your desired form plugin to connect it with Simply Static.

Form ID

Each form plugin has its way of handling the unique form ID.

We included video tutorials for each plugin integration to simplify finding and adding the correct ID into the setting.

Webhook

The next section depends on the configured form type.

If you choose webhook, the settings are the following:

Webhook URL

Add the URL where we should send the form submission. This can be anything from FormSpree to Zapier or IFTTT.

Customize Feedback

Success Message

You can simply define a custom message that will be shown if the form submission is successful.

Error Message

Same as the success message, but in case there is an error.

Use "Thank You" page instead

You can also set up a page where we should redirect the visitor once the form submission is successful.

Embed Form

If you choose "Embedded Form" as the form type, the settings will look like this:

Shortcode

Add the shortcode of the form you want to embed on your static website.

Custom CSS

You can also add custom CSS for the shortcode. It will only be used on the embedded version of your contact form.

This can be useful to hide certain things like cookie consent banners or popups on the iFrame.

Finish the setup

Once you have configured all the settings fields, click "Publish" and run a new static export to create the JSON configuration file and transfer it to your static site.

Simply Static will automatically check for the file and include the necessary JavaScript files to handle forms on your static website according to the form's configuration.

Once the static export is finished, you will find the JSON configuration file at https://mystaticwebsite.com/wp-content/uploads/simply-static/forms.json - it should look similar to this example:

[{"form_type":"webhook","form_plugin":"elementor_forms","form_id":"c929665","form_webhook":"https:\/\/formspree.io\/f\/XXX","form_success_message":"Your message was sent successfully.","form_error_message":"There was an error with your submission. Please review the fields, correct any errors and try again.","form_use_redirect":false,"form_redirect_url":""}]