Managing form data
Collecting information entered into a form requires a number of steps and options for how to parse the data. From validating field content, to submitting and processing the data, to storing and using the data.
Digital forms on the web have in the past been somewhat of a burden to setup. With browsers making it difficult to customize the design of. While requiring complex backend systems to work with form data. But things have actually improved throughout the years. Modern browsers have better built-in form validation for form data, and the evolution of CSS allows for better customization without having to use hacked workarounds that break accessibility.
This guide will cover how you can design form fields as components that work together for a consistent design. With modern web design techniques that make them easier to code and setup for your team to build from.
Good form design is a combination of making a form approachable for the user to fill out while also adhering to usability patterns and accessibility practices. This requires an understanding of the different types of form fields and how users interact with them.
Forms are useful for collecting information from visitors, getting specific details to help with following up. The first thing to keep in mind is to only ask for fundamental information. No one enjoys filling out forms so keep them short!
Should consist of a text area for the question/comment message along with a means to reply back to the person reaching out.
Collect only info that is relevant to what your visitor is trying to accomplish; make it clear in your copy why the information is needed.
An email address is all you need for a newsletter sign-up, with a good intro explaining why users would want to sign up and what they can expect from the newsletter.
Requires user's personal information, like their email. Typically, an account sign-up form is kept simple, with additional account information being collected after the user enters their email and password.
When a customer is ready to buy a product or service, the checkout process includes payment and other details needed to fulfill an order.
Helpful for your product or service, allowing customers to share thoughts on their experience; questions can be in the form of multiple choices or as open-ended text areas.
A basic form that's easy for users to understand and easily go through.
The simplest way to break a form down into its essential components is by breaking down its individual fields. These are the fields supported by browsers:
Standard single-line field.
Multiple-line field for free-form text.
For selecting a single option from a group.
For selecting multiple options from a group.
Dropdown to keep options list compact.
Example form components - common field patterns that can be mixed and matched
Starter form field components →
For designing and coding a form, keep in mind modern browser capabilities:
required property added to the fieldtype="date" fieldemail, url, or tel that helps with form validation as well as showing a specific keyboard for mobileAdded functionality and styling options have been built in to make it easier to implement and customize fields:
accent-color in your CSS, in the :root, defines the color value for selected radio buttons and checkboxes, along with other form fields that have an accent colorwidth and height of a radio button or checkbox to match the size of other fieldstype="file" can now be styled to match your design using input::file-selector-buttonform div:has(label + *:required) label::after, form fieldset:has(*:required + label) legend::after {
content: "*";
}
A container is needed for each field and its corresponding label. For radio buttons and checkboxes, using fieldset acts as the container, and the field legend is used instead of label.
form input:focus:invalid, form textarea:focus:invalid, form select:focus:invalid {
border-color: #b91616;
}
The field textbox or dropdown is shown with a dark red border when the user clicks into it and it doesn't match the required data. You can use :focus:valid to indicate when a field does meet its requirements.
Collecting information entered into a form requires a number of steps and options for how to parse the data. From validating field content, to submitting and processing the data, to storing and using the data.
While there are a number of ways to validate form data, the simplest method is to use built-in browser validation. It requires no complex Javascript or backend code. These validation practices are available in modern browsers:
You can also utilize the browser for a multi-step form. Using the GET form method works as a way to pass data from page to page, without requiring any kind of backend to do the storing and passing, or Javascript to hide and show fields.
By default, fields are only submitted to a query string to the next set page. In order to pass URL parameters across multiple steps/pages, use this Javascript snippet to create hidden fields from submitted query string parameters and continue passing them to the next page:
window.onload = function() {
var querystring = window.location.href.split('?')[1];
var parameters = querystring.split('&');
for(i = 0; i < parameters.length; i++) {
var pair = parameters[i].split('=');
var hiddenfield = document.createElement("input");
hiddenfield.type = "hidden";
hiddenfield.name = pair[0];
hiddenfield.value = pair[1];
document.forms[0].appendChild(hiddenfield);
}
};
Note that form data would not be submitted to its destination until the end of the form steps where it would do the POST to the server. This means that data is not stored anywhere along the way except in the user’s browser.
When a form is submitted, it needs to send the data somewhere. Either to a database to be stored, or to an email. Both of these options require tying in to backend code to process.
You can use either your server's mail SMTP, or a third-party that sends your form data to a designated email address. While this is the simplest option to setup, the form content is static and available only in the email that is sent out.
More complex to setup as it requires a database to store content as data. This can either be done via a server, or a third-party tool. Having individual field data in a database allows for accessing them dynamically and outputting the data in different ways.
In either case, form data should be processed securely using an SSL certificate.
Because of how form data in a database can be output, there are special tools dedicated to managing data from a web form:
Will direct your form's data in different ways, from sending you an email, to porting it to other third-party tools that you use.
Associate each form submission to an individual person that you can then use to follow up with and further add notes to their profile.
Examples: HubSpot | Salesforce | Active Campaign
This guide has been put together by the Blocks Edit team. Blocks Edit allows visual building of reusable form components for your team to use. You are able to use your custom HTML design to translate directly into the CMS and make your components visually editable.