{"id":297,"date":"2022-04-30T01:29:15","date_gmt":"2022-04-29T19:59:15","guid":{"rendered":"https:\/\/formx.stream\/blog\/?p=297"},"modified":"2023-04-07T17:57:00","modified_gmt":"2023-04-07T12:27:00","slug":"how-to-quickly-add-contact-form-to-your-static-website","status":"publish","type":"post","link":"https:\/\/formx.stream\/blog\/how-to-quickly-add-contact-form-to-your-static-website\/","title":{"rendered":"How To Quickly Add Contact Form To Your Static Website"},"content":{"rendered":"

Why adding a contact form to a static website can be tricky<\/b><\/h2>\n

One of the biggest complaints about static websites is that they don’t allow you to easily collect user data\u2014like 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.<\/a><\/span><\/p>\n

Ways of adding a form to a static website<\/b><\/h2>\n

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.<\/span><\/p>\n

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 <\/span>formX<\/span><\/a>. 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.\u00a0<\/span><\/p>\n

There are many such providers out there, here is a wonderful article<\/a> breaking down and comparing all of their features<\/span>. Thanks to the author for featuring formX in the list.\u00a0<\/span><\/p>\n

A step-by-step guide on how to add a contact form to your static website<\/b><\/h2>\n

First, create a free account with formX here<\/a><\/span>. Set up the basic details, if you need help, our <\/span>docs<\/span><\/a> have everything you would want to know.\u00a0<\/span><\/p>\n

Step 1: Create your HTML form<\/strong><\/h3>\n

Here is a short form to get you started:<\/span><\/p>\n

<form id=”form_id”><\/span><\/p>\n

<input name=”name” type=”text” \/><\/span><\/p>\n

<input name=”email” type=”email” \/><\/span><\/p>\n

<input type=”submit” id=”submit” \/><\/span><\/p>\n

<\/form><\/span><\/p><\/blockquote>\n

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\u2019s front-end.<\/span><\/p>\n

Step 2: Add the formX snippet to the specific form page in your website<\/strong><\/h3>\n

Insert the following script to the page before the end of the body tag.<\/span><\/p>\n

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

<script><\/span><\/p>\n

var formx = FormX.set()<\/span><\/p>\n

formx.trackProject(‘Cyces_2653407d-8549-4a6d-8038-952725ca66a0’)<\/span><\/p>\n

formx.trackForm(‘Test_314c85bd-e690-4fa5-b58b-047525d9299b’, ‘form_id’)<\/span><\/p>\n

formx.start()<\/span><\/p>\n

<\/script><\/span><\/p><\/blockquote>\n

Step 3: Test your forms<\/strong><\/h3>\n

Now formX is powering your forms\u2019 backend. Submit test data to check if everything works fine. You might run into the following errors:\u00a0<\/span><\/p>\n