Guide to Styling HTML Forms

One of the most appealing things about using form backend solutions like FormKeep is that, as a web designer or web developer, you can focus your energy on user experience and functionality. You can avoid the burden of building and maintaining your own backend infrastructure.

A large number of our customers choose FormKeep over other solutions because we’ve decoupled the backend from the front end. These customers can style their form exactly the way they want to, using any tool they wish. Complete freedom of expression; no more wrestling with a front end form-builder to get the results you require.

This, of course, begs several questions:

1. What are the foundational rules and principles for styling HTML forms?

2. Where can I find examples of well-styled forms?

In this blog, we provide some pointers to some great resources we have found on these topics.

Rules and Principles of HTML Form Styling

To a certain degree, smart HTML form design and styling is context sensitive so there are no cardinal rules. That being said, we have frequently referred to some nice and comprehensive resources on the web that can help you hone your skills. Here are some of our favorites:

Mozilla: Styling HTML Forms

Mozilla: Advanced Styling for HTML Forms

3 Best Form Design Practices for Your Design Process

Samples of Well-Styled Forms

There are many examples of good and bad forms all around the web. You may have some favorite examples or examples you don’t like. Here are a few places you can find some good looking form examples including sample code:

10 CSS HTML Form Designs

Top 36 Free HTML5 & CSS3 Contact Form Templates 2018

Two CodePen Examples (HTML Forms and Ultra-Clean UI ‘Contact Us’ Form)

Connecting Your Form with a Backend

Of course, once you have a nicely designed form, you need a place to send the data where it will be secure, manageable and can connect with other systems like Google, Salesforce, Hubspot, ZenDesk, Slack and others.

With FormKeep, to make this form active on your website, simply copy the provided html and CSS and customize it as much as you want. Then, all you need to do is update the action attribute. Your form tag should look like this paying careful attention to update the underlined area of the highlighted URL with the token provided to you within FormKeep (Trial or Paid account):

<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">

See how with our sample CodePen by clicking here:

See the Pen Sample “Contact Us” Form Template You Can Customize by FormKeep (@formkeep-samples) on CodePen.