This post was originally published on Codementor . With the rise of static sites, developers need a service that could handle forms. Static website contact form is the most common case, and in this article, you would learn how to add one with . Kwes form builder Adding a contact form to a static site could be a challenge because the static site usually doesn't have a backend that could handle the form submissions. In that case, we could use a service that would do this for us. There are many services out there, like Netlify forms or Typeform, but in this case, we are going to use the Kwes service. We are going to build a contact form with the following fields: | Form element     | Form field         |
| --------------   | ----------------   |
| Name             | Text input         |
| Email            | Email input        |
| Message          | Textarea input     |
| Button           | Submit button      | All input fields should be required, and the email form field should be validated. Integration Since we are going to add Kwes form to our site, we should sign up for free first. After signing up, add a new website, and a new form from Kwes dashboard. To complete the integration, you should add JavaScript file at the bottom of your tag of your contact page. body < = > script src "https://kwes.io/js/kwes.js" </ > script I am using Hexo static page generator for my site, but it works with other static site generators like Hugo or Jekyll. Since most of the static site generators support Markdown, you could paste the contact code directly in Markdown, and it would work, too. Otherwise, you could create a separate page or layout and paste the code there. Pro tip: There is no need to add JavaScript file to pages that don't have a contact form. Next, we would add an HTML form to our contact page. To do this, add the usual form tags and attributes. Pro tip: Don't forget to add labels with for attributes with matching input's IDs to make your form more accessible. Now we should add the Kwes attributes. It is important to wrap your form in a with the class. After this, add the attribute to the element, and then add attribute to your input fields. The code should look something like this: div kwes-from action form rules Name E-mail Message Submit < = > div class "kwes-form" < = = > form method "POST" action "https://kwes.io/api/foreign/forms/youruniqueid" < = > label for "name" </ > label < = = = = > input type "text" name "name" id "name" rules "required" < = > label for "email" </ > label < = = = = > input type "email" name "email" id "email" rules "required|email|max:255" < = > label for "message" </ > label < = = = > textarea name "message" id "message" rules "required" </ > textarea < = > button type "submit" </ > button </ > form </ > div You could see all the rules options at the . Kwes official documentation Before you publish the form, you should test the form first. With Kwes, you could do it in two different ways: by providing a testing domain in the site settings, or by adding HTML attribute to your form element. mode="test" During , all your submission would not affect the data in your plan. You could view test data in the dashboard by switching the toggle. As easy as that. the testing mode The last step is setting the code to the production mode. Now we should sit back and wait for the submissions knowing that Kwes would handle everything for us—from form validation, through spam filtering, to sending confirmation emails. You could customize the style of the notification messages to match your brand. See the example of a customized contact form . on my site Kwes features Kwes has a built-in . For example, you could show different plan details based on the selected plan. logic for showing or hiding any content on a condition For me, the most significant advantage is form validation. The validation takes action on both frontend and backend site. Not having to reinvent the wheel and writing validation rules over and over again is time-saving but also a task that I would very happily like to avoid on every project. With more than 50 validation rules, Kwes should cover the most scenarios, even the most complicated ones, like handling dates, times, passwords, and file uploads. When your form is public, there is a high chance that you would get a spam submission. With Kwes, you could get spam protection and even help Kwes learn which messages to filter out. If you want more control over your form and integrate it with other services like Zapier, you could do it. You could even take advantage of the Kwes API and manage submissions on your own. Conclusion Kwes comes with the cost, but you should think about saving yourself and your team hours of development time. I think it is worth to leave the validation to developers who specialize in this field of area and focus on other parts of your project or business.

Compare Static Form Providers Side-by-Side

How to add a contact form to a static website

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2018: My Technology Retrospective

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

2018: My Technology Retrospective

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps