Why adding a contact form to a static website can be tricky

One of the biggest complaints about static websites is that they don’t allow you to easily collect user data—like when a visitor wants to sign up for your newsletter, or email you a question. Traditional dynamic websites have forms designed to gather this kind of information and send it to the site owner. With static sites, though, there’s no way for the information to be collected without setting up servers and databases, which can be expensive and time-consuming. Before we get into adding forms on a static site, I should say that not everything is wrong with this type of website. In fact, they are fast, secure and are great for SEO. Here’s an article on static website benefits.

Ways of adding a form to a static website

One way is to use a dedicated form builder like Typeform, Wufoo, or Google Forms. These services let you create forms and embed them in your site. You can even add custom CSS to make sure they match the rest of your design.

But what if you want full control over how your form works? In that case, you can try building it out yourself and using a form-backend provider like formX. That way, you can design your forms however you want to (without struggling with the templates full-fledged form builders provide), and leave the backend to us. 

There are many such providers out there, here is a wonderful article breaking down and comparing all of their features. Thanks to the author for featuring formX in the list. 

A step-by-step guide on how to add a contact form to your static website

First, create a free account with formX here. Set up the basic details, if you need help, our docs have everything you would want to know. 

Step 1: Create your HTML form

Here is a short form to get you started:

<form id=”form_id”>

<input name=”name” type=”text” />

<input name=”email” type=”email” />

<input type=”submit” id=”submit” />

</form>

Note that, HTML element “id” is the only mandatory attribute required in the form tag. Attributes like “action” and “method” are not needed. Now go ahead and design your form’s front-end.

Step 2: Add the formX snippet to the specific form page in your website

Insert the following script to the page before the end of the body tag.

<script src=”https://static.formx.stream/tracker/v1/bundle.js”></script>

<script>

var formx = FormX.set()

formx.trackProject(‘Cyces_2653407d-8549-4a6d-8038-952725ca66a0’)

formx.trackForm(‘Test_314c85bd-e690-4fa5-b58b-047525d9299b’, ‘form_id’)

formx.start()

</script>

Step 3: Test your forms

Now formX is powering your forms’ backend. Submit test data to check if everything works fine. You might run into the following errors: 

• Invalid domain: The configured domain and the actual domain are different

• Form not found: No form with the form ID has been foundNo form with the given form id found

• Field error: No “name” has been set to the field
  
  

Now, you’re good to go!

Read more:

The only guide you’ll need for to nail your cta placement

What are form endpoints

Get more from our forms with our web form optimization tips