Your 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?
This short and comprehensive guide is here to help you by providing some great resources we have found on these topics, and point you to the right direction.
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: Advanced Styling for HTML Forms
Adobe's Best Form Design Practices for Your Design Process
The bottom line is: When it comes to designing forms, it’s important to remember that most people often hesitate to fill out forms, so make the process as easy as possible. Always keep in the mind the user experience when styling your HTML forms.
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:
36 Beautiful CSS HTML Forms for 2021
Top 40 Free HTML5 & CSS3 Contact Form Templates 2021
Two CodePen Examples (HTML Forms and Ultra-Clean UI 'Contact Us' Form)
You can also check out FormKeep's popular collection of stylish templates for ideas on contact forms, order forms, feedback survey forms.
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, WordPress, Weebly, Squarespace and more.
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 (both for the Free and Paid Plans):
<form action="https://formkeep.com/f/exampletoken"
accept-charset="UTF-8"
enctype="multipart/form-data"
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.