Best Practices for Designing and Developing HubSpot Forms

HubSpot FormsThe HubSpot 3 platform allows for much more control over form functions. Forms are a powerful way to understand and qualify leads and pass them along to your sales team. Here are some ways to use forms and the data collected from these forms:

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

Successfully implemented forms can greatly improve lead generation efforts. Here are a few pointers to getting started with designing and developing the HubSpot 3 forms.

Plan, Plan, Plan!

If you're a project manager, 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 main business objectives and goals. You may even want to bring them up to speed using a HubSpot trial portal so they are familiar with the platform (if they aren't yet). Here are some other key items to plan for:

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

Design

Form design is critical. You need to capture useful information while not discouraging a website visitor from converting to a lead.  Review the design with your developer to address any technical/implementation concerns they may have. Some additional tips: 

  1. Keep it simple! Have a form headline, and field labels at the top of the fields that identify the fields, along with a straight forward submit button.
  2. One column forms are recommended.
  3. Avoid background images - they might necessitate some additional Javascript trickery.
  4. Try to minimize the need for unique form designs to keep the form setup simple, fast, and efficient.

Development

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

  1. Keep your CSS general and flexible. Trying to manage a dozen specific fields will become a chore down the road.
  2. Avoid visual wrappers for forms that also include extra HTML elements, like descriptive text or images. It’s simple enough to put a content module above a form; it’s a pain to get an editable content area inside a form without some ugly scripts.
  3. Make sure your form height is flexible so new fields added or removed (with the progressive profiling setup) do not break the form.
  4. Cross-browser test. Test submitting the form to make sure the Thank You messaging and/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/style adjustments with HubSpot. Use the standard form look/feel and make simple adjustments to get started in minutes. If you need inspiration, take a look at these templates.

H/T to Ian Mcnair who also contributed to this post.

 


Photo Credit: EricGjerde via Compfight cc

You Might Also Like