Like many businesses, I depend on web forms on my website to collect visitor information and to give them an easy way to contact me. They are an invaluable part of my lead generation strategy.<\/p>\n\n
You probably know what a web form is and roughly what it looks like, but do you really know what it takes to create one that meets your business objectives?<\/p>\n
<\/a><\/p>\n Marketers use web forms for a number of reasons: completing orders, collecting lead information, personalizing recommendations through surveys, and more. But what makes one web form effective and another uninspired?<\/p>\n In this article, I\u2019m going to show you how to make a web form, best practices for creating powerful forms, and tools that can make the process faster.<\/p>\n <\/a> <\/p>\n When it comes to web forms, design and UX matters. HubSpot research found that 28% of marketers<\/a> say the right form fields help improve lead scoring, which means more qualified leads.<\/p>\n According to Venture Harbor<\/a>, a well-designed multi-step form converted 53% of site visitors to leads.<\/p>\n Web forms vary in length, format, content type, and appearance \u2014 there\u2019s no \u201cone size fits all.\u201d In my experience, they should simply fit your business\u2019s needs and help you gather the information you want from your leads.<\/p>\n This also means there\u2019s no single way to create a web form.<\/p>\n So, let\u2019s get into it and review several forms to see what might work for you. I\u2019ve also rounded up some tools below to help you create web forms.<\/p>\n First, let\u2019s dive into why you should create web forms.<\/p>\n <\/a> <\/p>\n Web forms allow you to collect and manage information easily and efficiently. They\u2019re embedded right into your website, which makes it easy for your leads to share their information.<\/p>\n Once a lead completes a form on your website, their information is stored until it\u2019s ready for analysis. Web forms are crucial tools for businesses to obtain the information they need from their potential customers.<\/p>\n I\u2019ve found there are several ways that you can use web forms, such as:<\/p>\n Collecting contact information. Web forms can help you get the information you need from your leads so you can analyze or manage it as needed.<\/p>\n I\u2019ll talk about the various types of web forms below, which will give you a better idea of specific use cases and which forms fit best in certain instances.<\/p>\n <\/a> <\/p>\n Let\u2019s discuss how to build a web form. As you follow the steps below, I encourage you to think about what information you really<\/em> need from your leads.<\/p>\n If your web form doesn\u2019t make sense to your leads \u2014 if it\u2019s complicated or asks for too much information \u2014 potential leads may lose interest and leave your site.<\/p>\n Consider how much the offer at the end of the form is worth and adjust your web form accordingly.<\/p>\n Creating a web form starts<\/a> with determining its purpose.<\/p>\n <\/a><\/p>\n Download HubSpot\u2019s free ebook guide to web forms.<\/a><\/strong><\/p>\n It\u2019s crucial to make the purpose of your web form clear. Your leads should know exactly<\/em> what your web form is for and why they are completing it.<\/p>\n Here are a few ways to do this.<\/p>\n Straightforward headers let your leads know exactly how to complete your form. Headers help avoid confusion which speeds up the form-filling process.<\/p>\n\n Source<\/a><\/em><\/p>\n Examples of straightforward headers include:<\/p>\n \u201cContact Us\u201d Clearly communicate what you need from your leads using the fewest words possible.<\/p>\n\n Source<\/a><\/em><\/p>\n At the top of your form, I find it best to include a sentence or two about what you\u2019re asking from your leads. You can also include a short statement about why you need that information to remain transparent with your leads.<\/p>\n For example, you can state the purpose of your form fields. They could say, \u201cThis web form will be used to get more information about you so we can tailor our newsletter content towards your background, experiences, and interests.\u201d<\/p>\n By ensuring your web form\u2019s purpose is clear, you build credibility and trust between your business and lead.<\/p>\n Keeping your form organized, attractive, and clean will give your leads an easy end-to-end experience.<\/p>\n Trust me, nobody wants to read long paragraphs to find what they\u2019re looking for, and cluttered text looks unprofessional.<\/p>\n With a well-designed form, your leads will know in seconds whether you took the time to create your form thoughtfully.<\/p>\n You create a simple transaction. Letting your visitors know exactly which form they need to complete and why you\u2019re asking specific questions makes them more likely to engage. Whether it\u2019s a shipping form, a sign-up form, a survey, or a quiz, you want your visitor\u2019s experience to be easy<\/em>.<\/p>\n When I visit another company\u2019s website that\u2019s designed in a way that screams \u201ccustomer first,\u201d I\u2019m likely to feel that the business is professional and thoughtful. The same goes for web forms.<\/p>\n I find that when you increase web form usability and create a positive user experience<\/a>, your business will pull in more conversions. For example, according to HubSpot research<\/a>, decreasing the number of form fields can increase conversion rates.<\/p>\n If you make your form easy to use, clear, and visually pleasing, your leads will want to complete it and become customers.<\/p>\n 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.<\/p>\n Here are some common types of web forms to consider. (I will review examples of each of these types of web forms shortly.)<\/p>\n Your contact form<\/a> can have a specific purpose or be more general.<\/p>\n Here\u2019s an example of a general contact form. This one is taken from my blog. It\u2019s very simple in design and has only three fields, \u201cname,\u201d \u201cemail address,\u201d and \u201cmessage.\u201d<\/p>\n\n Source<\/a><\/em><\/p>\n Other contact forms let your leads 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 other details, such as an 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.<\/p>\n Below is an example of Emirates\u2019 refund form.<\/p>\n\n Source<\/a><\/em><\/p>\n Pro tip: <\/strong>Help your website visitors understand what the form is used for or how they can use it. Using my blog\u2019s contact form as an example, I really want to encourage people to get in touch, so on the left, I\u2019ve set the expectation with the text “Whatever it is, contact us by completing the form\u2026\u201d I wanted people to know they can message me about anything!<\/p>\n These web forms convert your website visitors into leads<\/a>. 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.<\/p>\n I use a lead generation form on my own website. The fields are for \u201cname,\u201d \u201cjob title,\u201d \u201cemail address,\u201d \u201cbudget,\u201d and a message. I\u2019m using my form as a simple lead generation tool, but it\u2019s also set up to help me validate the inquiry. I\u2019ve deliberately added \u201cjob title\u201d and \u201cbudget\u201d so I can gauge how likely the lead will be to close and whether or not they have the budget for my services.<\/p>\n\n Source<\/a><\/em><\/p>\n Pro tip<\/strong>: On your form, you can often add invisible fields<\/a>. I add an invisible field to the contact forms on my service pages to know where the form was submitted.<\/p>\n It\u2019s great for tracking. The invisible field (mine might say: \u201ccontent marketing page\u201d) is sent along with the details of the form that the user filled out but is not visible on the front end of my website.<\/p>\n Order forms do exactly what you\u2019d expect them to do \u2014 they allow your website visitors to place orders. They also give customers a way to pay for items and have the products sent directly to them.<\/p>\n Order forms may include multiple steps<\/a> as they often require a credit card, shipping and billing information, and contact information.<\/p>\n Below is an example of the Shopify one-page checkout<\/a>, including a form asking for card details and the order in review.<\/p>\n\n Source<\/a><\/em><\/p>\n Pro tip:<\/strong> Bellray are using a single-column form for their order form. The single-column form is considered less daunting<\/a> and is generally faster to complete. With this, you\u2019ll likely get more form completions.<\/p>\n A lead will complete a registration web form if they want to sign up<\/a> for your service. This is common on sites such as Craigslist, Ebates, and eBay.<\/p>\n 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.<\/p>\n\n Source<\/a><\/em><\/p>\n Survey web forms may include multiple-choice, fill-in-the-blank, and long-form responses. I find they can help you learn more about your customers\u2019 experiences with your products and services.<\/p>\n 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.<\/p>\n\n Source<\/a><\/em><\/p>\n Pro tip:<\/strong> When asking for feedback, you can add some visual elements to the form, like the five stars Amazon has used. This satisfaction measure is sometimes reflected by smiling faces\/emojis ranging from very happy to angry.<\/p>\n An onboarding form is a form employed by digital businesses, like web and mobile apps, to gather necessary information from new users and familiarize them with the platform’s functionality.<\/p>\n It is an integral part of the user onboarding process, designed to enhance user experience by simplifying the initial setup or use.<\/p>\n This form might ask users to input data like their name, contact information, preferences, and more \u2014 all to help onboard, activate, and increase the likelihood of product or service adoption and retention.<\/p>\n\n Source<\/a><\/em><\/p>\n Pro tip:<\/strong> An onboarding form may get long. If it does, I suggest segmenting the onboarding process into multiple forms. As above, Tango has done this.<\/p>\n To make the form feel accessible and easy to fill out, they\u2019ve added a progress bar and some friendly copy, such as \u201cJust a few questions, Mike!\u201d which provides an indicator of the length.<\/p>\n Think about what responses you need from your leads when you begin creating your form fields.<\/p>\n I recommend starting with the answers you\u2019ll need. Then, you\u2019ll be able to decide how to title your form fields, what questions to ask, and which types of fields you actually need your visitors to complete.<\/p>\n Regardless of what you\u2019re asking your visitors, you should always require their basic contact information (like name and email address) so you can identify individual submissions.<\/p>\n Next, choose the right software to create your web form. I\u2019ve listed several tools you can choose from below, but I\u2019ll quickly show you HubSpot\u2019s form builder tool<\/a>.<\/p>\n In HubSpot, drag-and-drop features make it easy to build your form however you want. Form fields are predefined, which means you have several options to pick from and add to your form.<\/p>\n\n Once you choose your web form template, review the predefined form fields and begin creating your form.<\/p>\n\n If you are asking your leads questions that need detailed answers, you can create short or long-text entry fields that accept one sentence up to a paragraph or two.<\/p>\n\n There are also several other field-entry types for you to include in your forms, including:<\/p>\n Multiple choice. Once you create your web form, it\u2019s time to publish it and embed it on your website. This is how your website visitors will access your form. Start by determining where you want your form located on your website.<\/p>\n Determine which page of your website should include the web form. I suggest asking yourself these questions:<\/p>\n Do you want your email sign-up<\/a> located at the bottom of your main landing page? To embed your form, copy and paste the form\u2019s code into the desired location on your site.<\/p>\n\n Once you embed and publish your web forms, website visitors can start completing and submitting forms. Next, you\u2019ll begin receiving data about your leads that will be crucial for maintaining a healthy business.<\/p>\n If you are using a website creator or external website<\/a>, you can still embed your code from HubSpot\u2019s form builder into your site\u2019s source code (the collection of code used to build your website).<\/p>\n Data protection has become a top priority for businesses and consumers alike. I don\u2019t think this is an area where you should cut corners.<\/p>\n A secure web form makes sure that you\u2019re protecting your leads\u2019 data. This will result in more submissions. With HubSpot\u2019s form builder, creating a secure form<\/a> for both your business and your leads is easy.<\/p>\n The form builder stops spam submissions from coming through with an email address validation<\/a> process. This ensures only real email addresses can be submitted in your web forms, which I find super helpful as a small business owner.<\/p>\n HubSpot also allows people to add CAPTCHAs<\/a>, which are the questions at the end of a form that require people to confirm they\u2019re not robots. These act as a second layer of protection against spam.<\/p>\n\n Lastly, HubSpot allows you to block specific email providers and domains<\/a> that you determine are unnecessary to receive submissions from.<\/p>\n Once you create your web form and embed it on your website, run some analytics and make sure it works<\/a>.<\/p>\n I recommend thinking about things from your visitor\u2019s point of view. 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.<\/p>\n 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.<\/p>\n I\u2019m a firm believer that your customers and leads should be your top priority when it comes to all<\/em> of your marketing tactics, including your web forms.<\/p>\n If you set up email notifications on your web form creator software, you should double-check that these are working as well.<\/p>\n 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 completed form. If it doesn\u2019t work, try working through the email notification setup again.<\/p>\n Congrats! You have just completed the creation of your web form. Now, I\u2019ll share some design tips that will enhance the user experience of your web form.<\/p>\n <\/a> <\/p>\n When creating and reviewing your web form, consider some of my following design tips. These will make your form easy to use, effective, and helpful for your business and leads.<\/p>\n By keeping your web form as direct as possible, you will improve your leads’ experience and avoid any possible confusion. To be more direct, I suggest doing the following:<\/p>\n Create a web form header. This infographic demonstrates the impact of direct language. On the left, \u201center your credit card details,\u201d and on the right, \u201ccard number.\u201d<\/p>\n\n Source<\/a><\/em><\/p>\n I know this may seem obvious, but it\u2019s important to use form fields that make sense to your leads and<\/em> give you the answers you\u2019re looking for.<\/p>\n If your leads need to provide you with that information in paragraph format, then include long-text entry fields. Include short-entry fields if they only need to write a few words or a sentence.<\/p>\n For something like a survey, add multiple-choice responses, and for any questions that could have several answers, use checkboxes or radio buttons.<\/p>\n I think the LinkedIn job posting form below is a great example of how different fields are done well. Within one form, they\u2019ve got:<\/p>\n Fields for short text (job title). Source<\/a><\/em><\/p>\n Consider using input constraints for specific form fields.<\/p>\n 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 type in one sentence. This will save time for your lead and the form reviewer.<\/p>\n The form image below is taken from Walmart\u2019s store and corporate feedback form<\/a>. In the bottom right, they have a character count. You can see that my message reached 47\/1,000 characters.<\/p>\n With this constraint, Walmart manages the length of the feedback. It\u2019s really useful that Walmart displays the character count because it manages the user’s expectations.<\/p>\n As I typed, the character count increased, showing how close I was to meeting that form constraint of 1,000 characters.<\/p>\n\n Source<\/a><\/em><\/p>\n Source<\/a><\/em><\/p>\n By adding a \u201cSubmit\u201d button, your website visitors will be able to complete the web form and send it to the server without any hesitation or confusion.<\/p>\n It will also make them feel confident that you and your fellow employees will receive their submissions and listen to what they have to say.<\/p>\n For me, it\u2019s frustrating when I fill out a form and don\u2019t know whether the submit button has actually worked.<\/p>\n Make sure there\u2019s something obvious and visual to show that a form submission is successful.<\/p>\n On my form, when you click send, you get a message (pictured below) reading, \u201cThank you for your message. We\u2019ll be back to you as soon as possible.\u201d<\/p>\n The message is important because it leaves the form submitter confident that the form will be received. My message assures them that I\u2019ll reply as soon as possible.<\/p>\n I think my form\u2019s message is adequate since it is accurate, but I deliberately didn\u2019t specify a response timeframe so as to not set false expectations.<\/p>\n For professional forms or complaints, a more direct message could be better. For example, you might want to assure the customer that a member of customer service will contact them within 24 hours.<\/p>\n\n When you\u2019ve got a form on a mobile device, consider changing the keyboard to match the input so your users can fill in their forms quickly.<\/p>\n I\u2019ve found there are a couple of ways you can help your mobile users.<\/p>\n The most obvious is showing the numbers instead of the letters when they need to type something like a phone number.<\/p>\n\n Source<\/a><\/em><\/p>\n On mobile, you can also show the @ symbol on the main keypad when entering an email address. Below is an example of this in action using HubSpot\u2019s \u201cget a demo\u201d form from my mobile.<\/p>\n\n Finally, you\u2019ve got date pickers or scrolling date options for fields like date of birth. However, Filippos Protogeridis, a product design leader, does not recommend them.<\/p>\n In his UX tip article<\/a>, Protogeridis says, \u201cEven though mobile pickers are considerably better than dropdowns on desktop, they are still slower to fill in than standard text fields.\u201d<\/p>\n\n Source<\/a><\/em><\/p>\n Did you know that it takes an average of 50 milliseconds<\/a> for a website visitor to look at your website\u2019s landing page and decide if they want to stay?<\/p>\n\n Source<\/a><\/em><\/p>\n Web form first impressions matter, too. Keep these design tips in mind as you create your web forms:<\/p>\n Brand your forms to make them look professional. 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. I also recommend only keeping form fields on the same line when it makes sense to the reader.<\/p>\n For example, keep information like the date (day, month, and year) on one line. Keeping all other form fields in a single column will prevent your lead from feeling overwhelmed or bombarded by questions.<\/p>\n A single-column form is better for usability than a two-column form. The image below demonstrates why. You can see how the form with a single column is less overwhelming. It\u2019s easier to see what the form is asking for.<\/p>\n Additionally, the single-column form is thought to reduce errors<\/a>, too.<\/p>\n\n Source<\/a><\/em><\/p>\n It\u2019s helpful to organize your form using headings. Conservatory Land<\/a> has quite a complex form, but the information is required to provide a quote.<\/p>\n Within the form, I like how they add headings to help break up the form and give the user a clear directive of what they\u2019re doing within the section.<\/p>\n\n Source<\/a><\/em><\/p>\n Imagine I\u2019ve already made an account on a website and am completing a different web form on that same site. If that form field asks me some of the same questions a previous web form asked, I feel I\u2019m wasting my time.<\/p>\n Smart fields are a great feature for keeping your leads from having to do unnecessary work. HubSpot uses smart fields<\/a> to remove form fields that a customer or lead has previously submitted.<\/p>\n Smart fields make your business and website appear more professional by providing a smooth process for your leads or customers. They also remove the frustration of filling out the same information multiple times.<\/p>\n Have you ever started completing a web form that automatically filled in your zip code based on your current location? That\u2019s a smart default.<\/p>\n This feature also speeds up the web form completion process and creates a seamless user experience.<\/p>\n Smart defaults are commonly used for addresses. The LinkedIn job posting form above is a great example of that. When you fill out your location, it auto-finds your details.<\/p>\n When a lead is completing your web form, you should tell them whether or not they are doing it correctly.<\/p>\n Include error messages if they accidentally enter an area code that doesn\u2019t exist, add their state to the \u201cTown\u201d field, or are exceeding the character limit.<\/p>\n Again, I find this not only saves time for your leads but also keeps things simple when you need to review the submitted content.<\/p>\n\n Source<\/a><\/em><\/p>\n Pro tip: <\/strong>Use these tips to create error messages<\/a> that make sense to your customers.<\/p>\n Imagine I was completing a web form on another business\u2019s website, and I noticed a question asking for my credit card information when I wasn’t buying anything.<\/p>\n I would definitely think, \u201cWell, this is sketchy.\u201d or \u201cAm I going to be charged for something without even knowing it?\u201d<\/p>\n This is an easy way to lose a lead or compromise your credibility.<\/p>\n To avoid this, include information on your web form that explains why you\u2019re asking for specific information. By anticipating questions your leads may have, you will come off as professional, thoughtful, and customer-oriented.<\/p>\n I know it\u2019s easy to get caught up in the components of a web form, including the visual design and the fields. Still, a web form must also be accessible so that people using screen readers or those with visual impairments can use it easily.<\/p>\n You might need to speak with your developer to get these elements right, but ensure that your web form has labels within the code. This helps screen readers identify the purpose of each input.<\/p>\n A label could be as simple as \u201cname\u201d so the user knows in which field to put their name. This label is different from the placeholder text and must be within the code.<\/p>\n In the screenshot below, you can see how labels are used on my contact form. On the right is the developer tool (right-click and inspect to bring that up), and on the left is the form itself.<\/p>\n You can check if your form has labels by viewing the inspect tool and then searching <label>. If you find it in the code and hover over it, you\u2019ll get a view like the screenshot below. See how the label \u201cjob title\u201d is on my form’s \u201cjob title\u201d text.<\/p>\n\n Source<\/a><\/em><\/p>\n According to Budibase, 27% of users<\/a> have abandoned a form because it was too long. You want your form to be concise while gathering the information you need.<\/p>\n\n Source<\/a><\/em><\/p>\n It can be tempting to ask for more information on a form. Perhaps you want to feed sales and marketing data or qualify a lead. I get it, but it\u2019s important not to overwhelm your users.<\/p>\n Decide what you need and what information you can gather later.<\/p>\n <\/a> <\/p>\n Examples are a great way to get inspired and improve your marketing practices. I\u2019ll share some top examples below.<\/p>\n Sun Bum has a contact form on its website that enhances the user experience.<\/p>\n The form is on a contact landing page. They even have a unique name for their contact form, \u201cAsk The Bum,\u201d that meshes with their brand and resonates with users.<\/p>\n Why I like this web form: <\/strong>It looks clean and organized, and the form fields make sense for the form\u2019s purpose. Users can select the reason why they are contacting Sun Bum and how they want to be contacted. Then, they can enter their contact information, select a topic, and write the company a message.<\/p>\n I like how the tone of the copy on the form also reminds users that they are talking to a company with a personality.<\/p>\n The contact experience at Preserve starts with an easy-to-scan page that helps users figure out what topic their question falls under so that their question goes to the right person.<\/p>\n I think the simple icons and clear, direct copy help users understand the company’s size and focus.<\/p>\n\n After you click on a topic, their web form pops up. It\u2019s also quick to scan and complete, whether you have a quick request or need to ask a more complicated question.<\/p>\n Why I like this web form: <\/strong>The use of multiple web forms allows customers to take things one step at a time. The two-step process also shows users that giving customers the right answer quickly is essential.<\/p>\n This web form also sets clear expectations by highlighting the main topics for questions and copy that talks about the availability of their small team.<\/p>\n Help Scout has a lead generation form on their site that allows leads to quickly create an account.<\/p>\n The web form header states what the form is for and only requires a few pieces of personal information (name, password, and work email) to create an account.<\/p>\n Why I like this web form: <\/strong>This Help Scout web form has a nice layout for users and keeps all fields contained in a box.<\/p>\n I think the layout of the form fields makes sense as well \u2014 the fields for a lead\u2019s first and last name are side-by-side and the rest is in a column format, which helps visitors work through the form step-by-step.<\/p>\n This lead generation form stands out with an engaging headline, a striking image, and a quick outline of two offers. The first offer reinforces their brand story and gives users a chance to connect, and the second is an enticing discount.<\/p>\n\n Why I like this web form: <\/strong>This pop-up web form packs a lot of value into a single form. The copy is succinct but useful, and it only requires two form fields, name and email address, to get started.<\/p>\nWhy should I create web forms?<\/strong><\/h2>\n
Use Cases for Web Forms<\/strong><\/h3>\n
\n Gathering shipping information.
\n Surveying your customers.
\n Providing a way for leads to contact you.
\n Offering ecommerce checkout<\/a>. <\/p>\n1. Make the purpose of your form clear.<\/strong><\/h3>\n
Include straightforward headers.<\/strong><\/h4>\n
\n \u201cFirst Name\u201d
\n \u201cPreferred Method of Contact\u201d <\/p>\nGive clear instructions.<\/strong><\/h4>\n
Consider the appearance of your form.<\/strong><\/h4>\n
Why should you improve web form usability?<\/strong><\/h4>\n
\n You will build trust.
\n You will appear more professional.
\n You will increase conversions. <\/p>\n2. Choose your web form type.<\/strong><\/h3>\n
Contact Form<\/strong><\/h4>\n
Lead Generation Form<\/strong><\/h4>\n
Order Form<\/strong><\/h4>\n
Registration Form<\/strong><\/h4>\n
Survey Form<\/strong><\/h4>\n
Onboarding Form<\/strong><\/h4>\n
3. Add your form fields.<\/strong><\/h3>\n
\n Drop-down menus.
\n Checkboxes.
\n Radio buttons. <\/p>\n4. Embed your web form on your website.<\/strong><\/h3>\n
Decide where to embed your form.<\/strong><\/h4>\n
\n If you have a contact form, is there a page on your website solely meant for visitors who want to contact you?
\n And if someone purchases an item, do you have your web forms in an order that makes sense (first shipping, then billing and payment)? <\/p>\nHow to Embed Your Form<\/strong><\/h4>\n
5. Make your web form secure.<\/strong><\/h3>\n
6. Test your web form and analyze your results.<\/strong><\/h3>\n
Web Form Design Tips<\/strong><\/h2>\n
Be direct.<\/strong><\/h3>\n
\n Use clear form field titles.
\n Place your web form in a sensible location on your website.
\n Remove non-essential wording. <\/p>\nUse correct form fields.<\/strong><\/h3>\n
\n Drop-downs (workplace type).
\n Long text (description).
\n Multi-choice options with a limit of ten selections (the skills). <\/p>\nUse input constraints.<\/strong><\/h3>\n
Add a form submit button.<\/strong><\/h3>\n\n
Add a form completion message.<\/strong><\/h3>\n
Match the keyboard to the input.<\/strong><\/h3>\n
Make your form visually appealing.<\/strong><\/h3>\n
\n Match your company\u2019s aesthetic to ensure consistency and promote a polished look.
\n Consider colors, text font and size, and layout.
\n Keep things clean and organized. <\/p>\nUse a single column.<\/strong><\/h3>\n
Organize your form.<\/strong><\/h3>\n
Use smart fields.<\/strong><\/h3>\n
Use smart defaults.<\/strong><\/h3>\n
Include error messages.<\/strong><\/h3>\n
Explain why you are asking for specific content.<\/strong><\/h3>\n
Make sure your form is accessible.<\/strong><\/h3>\n
Ask for what you need, but no more than that.<\/strong><\/h3>\n
Web Form Examples<\/strong><\/h2>\n
Contact Web Forms<\/strong><\/h3>\n
Sun Bum<\/a><\/strong><\/h4>\n\n
Preserve<\/a><\/strong><\/h4>\n\n
Lead Generation Web Forms<\/strong><\/h3>\n
Help Scout<\/a><\/strong><\/h4>\n\n
Cambio & Co.<\/a><\/strong><\/h4>\n\n