Give the form page a headline, and be sure it expresses the benefit of the form. Instead of \u201cSweepstakes Form,\u201d try \u201cEnter to Win a Getaway for Two.\u201d Whether it\u2019s a new account, a job application, or a basic email form<\/a>, the headline helps keep users\u2019 eyes on the prize.<\/p>\r\n\r\n\r\n\r\n <\/p>\r\n\r\n\r\n\r\n Learn as much as you can about and test out form builder<\/a> features. Check out the different types of form fields<\/a> and learn about platform functionalities<\/a>. Using the right features in the right places will encourage as many submissions as possible.<\/p>\r\n\r\n\r\n\r\n Signal sections either by headings (Personal information, Contact Data, etc.) or by visual elements (thin horizontal lines). Dividing the web form<\/a> into chunks makes it easier to read and less daunting. Keep in mind that the best conversion rates come with forms that do not require content grouping, i.e. short forms.<\/p>\r\n\r\n\r\n\r\n Field labels can be positioned above a field or to its left or right. Each choice has its pros and cons. Top-aligned labels help users scan and understand the form quickly, but take up more vertical space. Left-aligned labels save space, but may sometimes be too distanced from input areas. They can also sacrifice the alignment of fields. Right-aligned labels also care for the economy of space and, in addition, are easily associated with input areas; however, with right-aligned labels, longer forms are more difficult to scan and may be perceived as less aesthetic. Read more about field labels in short contact forms<\/a>.<\/p>\r\n\r\n\r\n\r\n Go for choices rather than freeform text whenever possible: dropdown lists, single choice fields, multiple-choice fields. Tick the Accept other values option to allow users to specify a different value than the ones provided.<\/p>\r\n\r\n\r\n\r\n Forms can be responsive to users\u2019 input throughout the fill-out process. Establish field rules<\/a> for your form and, based on user input, previously hidden fields will show up. This helps the form look easier when the user first encounters it. Why ask for the pet\u2019s name if the user has already stated that he or she does not have a pet?<\/p>\r\n\r\n\r\n\r\n For highest completion rates, follow a well-defined objective throughout the form creation process. Most \u2013 if not all \u2013 of your form fields should be required. If a field is truly optional, consider eliminating it completely. Why should users fill out the information that is not really necessary? In 123FormBuilder web forms<\/a>, required fields are marked by a red asterisk. If you decide to use optional fields, you can include optional in their labels.<\/p>\r\n\r\n\r\n\r\n Users take an 8 to 10 seconds\u2014tops\u2014to decide whether they will start filling out your form or not. Layout and design factor into this decision. Try to stick to one-column forms, when possible \u2013 it makes it easier for users to focus on one field at a time. Use colors to reflect the form owner\u2019s identity, but limit the hues to two. Avoid field or graphic clutter.<\/p>\r\n\r\n\r\n\r\n CAPTCHA images<\/a> are short verification codes that users have to read and type in order to prove that they are people and not robots. Such images make your forms safer, but annoy users. You can choose to always show a CAPTCHA image at the end of your form or to never show one. The best approach is to use smart CAPTCHAs. These don\u2019t interrupt typical sessions because they show up only when your form seems to be abused (e.g.: multiple submissions from the same IP). Verification number settings can be changed in your Settings<\/strong> \u2192 Security<\/strong> section.<\/p>\r\n\r\n\r\n\r\n 123FormBuilder supports reCAPTCHA<\/a>, an easy verification mechanism that helps Google digitize books and add detail to maps.<\/p>\r\n\r\n\r\n\r\n There are several ways in which guidance can be provided to users:<\/p>\r\n\r\n\r\n\r\n a) Use predefined fields \u2013 they eliminate the guesswork; 123FormBuilder web forms, when there\u2019s invalid or missing input, an error box is displayed at form top and the field where the error occurred is also highlighted.<\/p>\r\n\r\n\r\n\r\n Chances are, you created your form using a laptop or desktop computer and it looks great. Have you made sure it looks good on phones and tablets too? Long forms can look even longer on mobile devices and can be less likely to hold the attention of on-the-go users.<\/p>\r\n\r\n\r\n\r\n Your form is complex and long, despite your efforts to keep it simple. Break your form out into pages, which makes the task look a lot more manageable. Multi-page forms<\/a> come with a progress bar, which assures users that the goal is in sight.<\/p>\r\n\r\n\r\n\r\n OK, this goes against our usual advice to remove all but the essential fields. Sometimes a user comes to your form wanting to communicate something that isn\u2019t covered in the other fields. This is your chance to receive feedback and show that you want to hear from your users.<\/p>\r\n\r\n\r\n\r\n Your submit button is a great place to catch your user\u2019s eye and remind them why they came in the first place. Use an eye-catching color, and forgo the default submit text for a benefit, e.g, \u201cReserve Your Spot,\u201d \u201cApply Now,\u201d \u201cGet Information.\u201d<\/p>\r\n\r\n\r\n\r\n Once the Submit button is clicked and the submission delivered, show a customized Thank You message. It tells the user that the submission was sent successfully and thanks to them for their interest and effort. The Thank You page can also redirect users to your website. Customize this page in your Settings<\/strong> \u2192 Notifications<\/strong> section.<\/p>\r\n\r\n\r\n\r\n Looking for inspiration to find the best form submission Thank You message? No worries, we’ve got some ideas for you:\u00a0<\/p>\r\n\r\n\r\n\r\n <\/p>\r\n\r\n\r\n\r\n Inspiring Thank You messages your forms should have<\/a><\/p>\r\n\r\n\r\n\r\n <\/p>\r\n\r\n\r\n\r\n While form filling is no fun, a few moments in the user\u2019s shoes can help you design a web form<\/a> that will be worth the user\u2019s while.<\/p>\r\n\r\n\r\n\r\n![\"complex](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/complex-forms-examples-title.png\")
<\/figure>\r\n\r\n\r\n\r\n2. Get to know your tools.<\/strong><\/h3>\r\n\r\n\r\n\r\n
3. Group the fields.<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"complex](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/complex-forms-examples-sections.png\")
<\/figure>\r\n\r\n\r\n\r\n4. Consider label positioning.<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"Form](\"https:\/\/cdn-main.123contactform.com\/wp-content\/uploads\/2011\/10\/label-positioning-2.png\" "\\"Form")
<\/a><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n5. Spare as much typing as possible.<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"complex](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/complex-forms-examples-choices.png\")
<\/figure>\r\n\r\n\r\n\r\n6. Add interactivity.<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"complex](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/complex-forms-examples-rules.gif\")
<\/figure>\r\n\r\n\r\n\r\n7. Required vs. optional fields.<\/strong><\/h3>\r\n\r\n\r\n\r\n
8. Give design its due.<\/strong><\/h3>\r\n\r\n\r\n\r\n
9. Use smart CAPTCHAs.<\/strong><\/h3>\r\n\r\n\r\n\r\n
10. Provide guidance.<\/strong><\/h3>\r\n\r\n\r\n\r\n
b) Add field instructions and hint text when necessary;
c) Show highlighted error messages with explanations.<\/p>\r\n\r\n\r\n\r\n11. Don\u2019t forget your mobile visitors!<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"complex](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/complex-forms-examples-mobile.png\")
<\/figure>\r\n\r\n\r\n\r\n12. Add a progress bar.<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"complex](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/complex-forms-examples-multipages.png\")
<\/figure>\r\n\r\n\r\n\r\n13. Include a freeform field<\/strong><\/h3>\r\n\r\n\r\n\r\n
14. Leverage the submit button.<\/strong><\/h3>\r\n\r\n\r\n\r\n
15. Communicate submission success and show appreciation.<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"best](\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/blog-images\/15-web-forms-best-practices-infographic.jpg\")
<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n