Steve Pick , User Experience Designer. Show More. No Downloads. Views Total views. Actions Shares. Embeds 0 No embeds. No notes for slide. Forms that work: Understanding forms to improve their design by cjforms 1. Forms that work Understanding forms to improve their design Caroline Jarrett cjforms 2. What makes a good form? But most of all: for errors. Image credit: Shutterstock Track a sample of forms through your process Chen Move the text to where it is needed 3. Turn instructions into questions 4. Slash everything else Plain language 2. Move text to where it is needed 3. The four steps of answering a question Read the question Find the answer Judge the answer Provide the answer 34 Jarrett and Gaffney , adapted from Tourangeau, Rips and Rasinksi The four steps of answering a question Read the question Find the answer Judge the answer Provide the answer 43 Jarrett and Gaffney , adapted from Tourangeau, Rips and Rasinksi The four steps of answering a question Read the question Find the answer Judge the answer Provide the answer 46 Jarrett and Gaffney , adapted from Tourangeau, Rips and Rasinksi Is a dolphin more like a rhino or a shark?
Which layout appeals more? A 51 B 52 C 53 Which page appeals more? A 54 B 55 C 56 Create a simple set of rules and apply them everywhere Image credit: Fraser Smith glenelg. By including straightforward headers, your leads will know exactly how to complete your form. Headers help avoid confusion and ensure your leads spend the minimum required time on your form.
Clearly communicate what information you need from your leads while using the fewest words possible. You can also include a short statement about why you need that information to remain transparent with your leads. Additionally, cluttered text simply looks unprofessional.
Within seconds, your leads will know whether or not you took the time to thoughtfully create your form.
You should always state the purpose of your form fields. The same goes for web forms. By increasing web form usability and creating a positive overall web form user experience , your business will experience a greater number of conversions. By simply making your form easy to use, clear and visually pleasing, your leads will want to complete it and become customers. The purpose of your web form informs what type you should use, as well as which questions to ask and how you should format your responses.
Here are some common types of web forms to consider. We will review examples of each of these types of web forms shortly. Contact forms are used for leads to ask your business a question, voice a concern or even explain their need for a refund. These web forms typically contain fields that require leads to list their name, contact information and order number.
They may also have a drop-down or text-entry field for leads to explain their reason for reaching out and their preferred method of contact. These web forms convert your website visitors into leads. They typically require personal information, such as a name, company, email address, phone number and sometimes a username and password for return visits to the site. They also provide customers with a way to pay for items and have the products they have ordered sent directly to them or to whomever the item is for.
Order forms are detailed and may include multiple steps as they often require a credit card, shipping and billing information, and your contact information. A lead would complete a registration web form if they were interested in signing up for your service. This is common on sites such as Craigslist, Ebates, and eBay. If a lead was looking to list an item on one of these sites, they would complete a registration form to create an account and then post the item.
Survey web forms may include multiple choice, fill-in-the-blank and long-form responses. They also help you improve future interactions with your customers, as well as educate leads about the ways in which your business can help them. Think about what responses you need from your leads when you begin creating your form fields.
Form fields on a software like HubSpot are predefined, meaning you have several previously created options to pick from and add to your form. In HubSpot, drag-and-drop features allow you to easily build your form however you want. Once you determine which type of form you want, review the predefined form fields and begin creating your form. Source : HubSpot.
If you are asking your leads questions that require detailed answers, you can create short or long-text entry fields that accept one sentence up to a paragraph or two. There are also several other field-entry types for you to include in your forms such as multiple choice, drop-down menus, check boxes, radio buttons and more. This is how your website visitors will access your form.
Start by determining where you want your form located on your website. Determine which page of your website should include the web form.
- Build a form with validation.
- Focke Wulf Fw-190.
- Measures and Metrics in Corporate Security.
- Forms that work: designing Web forms for usability!
- An Introduction to Koranic and Classical Arabic - Key to Exercises;
- Web Forms: The Ultimate Guide.
For example, do you want your email sign up located on the bottom of your main landing page? If you have a contact form, is there a page on your website solely meant for visitors who want to contact you? And if someone purchases an item, do you have your web forms in an order that makes sense first shipping, then billing and payment? When web forms are embedded published, website visitors can start the completion and submission process. You will then begin receiving data about your leads that will be crucial for maintaining a healthy business.
Forms that Work
Data protection has become a top priority for businesses and consumers alike. The form builder stops spam submissions from coming through with an email address validation process. This ensures only real email addresses can be submitted in your web forms. These act as a second layer of protection against spam.
Lastly, HubSpot allows you to block specific email providers and domains that you determine are unnecessary to receive submissions from. Once you create your web form and embed it on your website, make sure it works! Do they have enough space to respond to a question in the short-text entry field? If not, try switching over to the long-text entry field and see how their responses change. If you receive the same feedback repeatedly from your website visitors, try altering the form or adding different form fields to improve the experience for your leads.
Your customers and leads should be your top priority when it comes to all of your marketing tactics, including your web forms.
What is a Signup Form and how does it work?
If you set up email notifications on your web form creator software, you should double check that these are working as well. You can do this by going to the web form on your website, completing it as a lead would and making sure you receive an email notification about the form being completed. You have just completed the creation of your web form. When creating and reviewing your web form, consider some of the following design tips that will make your form easy-to-use, effective and helpful for both your business and your leads.
By keeping your web form as direct as possible, you make the experience better for your leads. You will also avoid any possible confusion. To be more direct, you can create a web form header, use clear form field titles, place your web form in a location on your website that makes sense and remove non-essential wording. If your leads need to give you information in paragraph format, then include long-text entry fields. If they only need to write a few words or a sentence, include short-entry fields. For something like a survey, add multiple choice responses, and for any questions that could have several answers, use checkboxes or radio buttons.
Drag & Drop WordPress Form Builder
Consider using input constraints for specific form fields. For example, if you know you only need one sentence in your short-entry form field, add a constraint that ensures your lead can only provide you with one sentence. This will save time for your lead and the form reviewer. It will also make them feel confident that you and your fellow employees will receive their submission and listen to whatever it is they have to say.
- What Makes a Great Online Form Builder?.
- Ninja Forms – The Easy and Powerful Forms Builder;
- The Shepherds Life: Modern Dispatches from an Ancient Landscape!
- SAP on DB2 for z/OS and OS/390: High Availability and Performance Monitoring with Data Sharing!
- How to Work with Form Themes.
- Huxleys Church and Maxwells Demon: From Theistic Science to Naturalistic Science.
If you have a long and detailed web form, make it easy to read and complete for your leads by keeping everything in one column. For example, keep information such as a date day, month and year on one line. As mentioned earlier, appearance matters when it comes to all of your marketing content. Web form first impressions matter, too. Brand your forms to make them look professional from the moment a lead lands on your page.
Consider colors, text font and size, and layout. Keep things clean and organized to ensure a positive experience for your leads. Imagine you already have an account on a website and you are completing a different web form on that same site. Smart fields are a great feature to keep your leads from having to do any unnecessary work.
HubSpot uses smart fields to remove form fields that a customer or lead has previously submitted. Smart fields make your business and website appear more professional by providing a smooth process for your leads or customers, and removing the frustration of filling out the same information multiple times. Have you ever started completing a web form that automatically filled in your zip code based on your current location?
This feature also speeds up the web form completion process and creates a seamless user experience. When a lead is completing your web form, you should tell them whether or not they are doing it correctly. Again, this not only saves time for your leads but it also keeps things simple when you need to review the submitted content. By anticipating questions your leads may have, you will come off as professional, thoughtful and customer-oriented.
Examples are a great way to get inspired and improve your own marketing practices. Here are some examples that demonstrate each of the five web form categories mentioned above.
Sun Bum has a contact form on their website that enhances user experience. The form is on a contact landing page. Users are able to select the reason why they are contacting Sun Bum, how they want to be contacted by the company, provide their contact information and write the company a message in a long-text entry form field. Help Scout has a lead generation form on their site that allows leads to quickly create an account.
The web form has a header that states what the form is for and it only requires a few pieces of personal information company, name and work email to create an account.