When was the last time you visited a company’s website and didn’t see at least ONE form?

If you can’t think of any, that’s because most companies choose to implement a variety of forms for lead generation purposes. You’ve probably seen forms with messaging like:

• Contact us!
• Sign up for a free trial!
• Register for a webinar!
• Download your guide!
• Purchase a product!

At one point or another, you’ve also likely filled out a form. Something about the look or copy compelled you. On the flip side, there have probably been times you’ve bypassed a form.

This is all normal behavior. Some forms perform well while others don’t, and it all comes down to form design and development. If you use HubSpot, the platform helps create and design captivating forms to supercharge conversion. 

We still have some tips to share, though! Let’s dive in.

What Are Some Things You Can Do with HubSpot Forms?

As noted, forms are a powerful way to understand and qualify leads and pass them along to your sales team. Your marketing team can also use them to understand contacts better and improve nurturing campaigns. We outlined a few examples you’ve possibly seen in the past. Here are some additional ways to use forms as well as the data collected from them:

1. Collect new information from new and returning visitors – avoid asking for their name and email more than once.
2. Build extensive user profiles by collecting, segmenting, and organizing contact information over a series of forms.
3. Trigger personalized follow-up emails based on the information you collect.
4. Survey your customers.
5. Collect shipping information.
6. Set up forms with various fields – everything from text fields to dropdowns to file uploads.
7. Connect data within your forms to third-party CRM platforms.

Now, What’s Form Design?

One of the most crucial components of any solid form is its design.

According to HubSpot, form design “is the process of creating a web form — where your site visitors can input and submit their information — while keeping the form’s layout, format, UX, appearance, and other factors in mind.” 

Great form design can improve your overall web user experience and help boost conversions. Think about it: Who wants to fill out a form that asks for 23 different items, requires them all, and doesn’t load on mobile?

Probably no one.

So, How Do You Build a Great Form?

Plan, plan, plan! 

Suppose you’re a project manager or the one responsible for creating a form. You’ll need to be sure all your team resources – designers, developers, content creators – are on the same page relative to your client’s or department’s primary business objectives and goals. Here are some essential items to plan for:

• Connectors: Setting up a data connector between HubSpot and an external CRM to run alongside any design and development work. Get that started ASAP so you can test it sooner rather than later.
• Workflow: Are you setting up one form, multiple forms, emails, form notifications? Be sure to notify your team, so they know what to test.
• Brand guidelines: Do you have a recent style guide to share with your team?

The look and feel of your forms are critical. You need to capture helpful information while not discouraging a website visitor from converting to a lead. Review the design with your team to address any implementation concerns. Then, get to work on that design! Some tips:

• Keep it simple! Have a form headline and field labels at the top of the fields that identify the fields, along with a straightforward submit button.
• Keep it one column if you can.
• Avoid background images.
• Arrange your form questions from easiest (name, email) to hardest (credit card info or comments)
• Use inline form field validation.
• Align your text to the left.
• Use auto-fill browsers.
• Enable the ability to tab to the following form field.

Developing Your Form

After you’ve set up the form and inserted it into your landing page, you’re ready to style it. Here are a few guidelines to keep the forms error-free and advice for testing:

• Keep your CSS general and flexible.
• Avoid visual wrappers for forms that also include extra HTML elements, like descriptive text or images.
• Ensure your form height is flexible so new fields that are added or removed (with the progressive profiling setup) do not break the form.
• Cross-browser test. Test submitting the form to make sure the Thank You messaging or redirects are working the way you intended them to work.

Don’t Go Solo

Don’t have an in-house or agency designer or developer? You can still make easy color or style adjustments with HubSpot. Just use the standard form and make simple adjustments to get started in minutes. If you need additional guidance or help with a unique form, reach out to our team (in our contact form! 😉)