Multi-step forms and advanced form design, as well as layout customization, are now possible!
What's new?
HubSpot now offers two updates in the forms area:
- Multi-step forms
- Advanced form design and layout customization
1. Multi-step Forms
What is it?
Forms can now be divided into multiple steps, which is especially useful for longer forms. This allows you to:
-
Reduce the likelihood of abandonment, as a confirmation is shown after each section.
-
Encourage users to proceed to the next step and complete the form.
Why is this important?
Long forms often discourage users and lead to high abandonment rates. This means conversion rates can be significantly improved.
How does it work?
- Forms can be created as single-step forms and extended or shortened with additional steps as needed.
- Fields and content can be flexibly moved between steps to optimize the user experience.
2. Design Forms More Comprehensively
What is it?
The new update provides more control over form design, allowing the form’s appearance to be better aligned with the visual brand identity.
Why is it important?
An attractive and brand-consistent form leaves a professional impression and builds visitor trust. This leads to higher completion rates and enhances the overall impact of the website.
How does it work?
- Layout: As seen in the image above, the form layout can be more comprehensively designed and customized.
- Text: Additional options such as drop shadows (3D effect), opacity, and quick text styles improve visual design.
- Inputs: Input fields can now be customized for height, border radius, and colors. Specifically, placeholder text and error messages can be color-coded.
- Buttons: Buttons can now be configured with drop shadows, and a gradient option is available.
- Background: Various background styles are available, with options for customizing borders and corners.
Example in Practice
Initial Situation
A client was facing the challenge of a high abandonment rate for the registration form on their website for potential buyers. The existing form was long and unattractive, leading many prospects to abandon the registration process.
Solution
- The registration form was divided into three manageable steps, each containing only a few fields. After each step, the user received a short confirmation, encouraging them to continue.
- The form design was completely revamped and aligned with the client's corporate identity. Colors, fonts, and layouts were chosen to reflect the brand and provide an engaging user experience.
Results
By implementing multi-step forms and customizing the design, the form’s abandonment rate was reduced by 35%. At the same time, the conversion rate increased, as users found the form less daunting and more visually appealing.
Availability
This feature is currently in beta for:
- Content Enterprise
- Marketing Starter, Pro, Enterprise, and Marketing+ Pro, Marketing+ Enterprise
- Sales Starter, Pro, Enterprise
- Service Starter, Pro, Enterprise
Start optimizing your forms now to increase conversion rates!