Digital agencies' best practices about modern web development, digital and inbound marketing.
Audience and online business goals are never the same for all businesses. Every business has its own way of providing and deriving information. However, the goals of an ultimate experience are always the same. There are five factors that describe user experience from the core:
- The value
- Ease in finding information
These five factors are to be implemented across the web template, and more importantly on each and every element that appear on the page.
UX has evolved to an extent that it is not only about usability, as it has now become vital to pay attention to all facets of UX in order to scale success in an online marketing campaign.
User Experience in the HubSpot Web
HubSpot itself has limited interactivity components, however it has left the space open for web developers to explore and bring out the best solutions for different elements of a web page. We have already covered an article on adding interactivity on HubSpot forms. WebbyMonks are always researching and developing based on various requirements of our clients for interactivity on a webpage, including forms. The functionality that you have always seen on forms built on other platforms and missed on HubSpot, could now be built with some smart tweaks. To demonstrate this, we have created some forms with the most common interactive components found in today’s web world.
Demo Forms Created By WebbyMonks
- Google material interactivity
Various CSS platforms enable developers to use the Google Material design interactivity. At HubMonks, we got curious to know how it could be implemented on the HubSpot COS/CMS platform. Our developers achieved the Google Material interactivity, however it was not an easy task as there are various structural changes involved. Using JS, we manipulated the document object model (DOM) in order to achieve the Google material interactivity.
Here is a demo created by HubMonks for forms on COS/CMS with Google material interactivity:
- Forms with custom validation message
Users are guided with the help of form validation if the information entered by them isn’t accurate and doesn’t meet the standards or requirement. On HubSpot COS/CMS a developer could set up rules to prompt the user to fill out the required fields or check information on certain fields. Form validation could also be enabled without any prior knowledge of coding. All the basic field validations are available, however there is only one generic message for each field validation. When we talk about UX, even form validation messages plays an important part as users depend on these prompts during their journey on our website. We actively participate in the HubSpot forums where we come across numerous inquiries on custom validation for forms. We decided to work on it and have discovered ways to use any library for custom validation.
If the design of a webpage has less scope for forms, it is always a best practice to have a modal pop-up that arrives on a certain amount of scroll or a pre-define period of time. At HubMonks, we have also figured out the best way to work-around with a modal pop-up form on HubSpot.
Forms with steps based submission
Long forms are often divided into steps and into multiple web pages if there are various sections and it is essential to maintain user engagement by avoiding any complexities. These forms are not so easy to be built as they require efforts from front-end development. HubSpot does not facilitate these forms directly. At HubMonks, we took the initiative to figure out ways to create forms with multiple pages. In order to attain this, our developers applied logic for the forms so that a form for a specific step would only appear if the form in the previous step has been validated by our servers.
- Forms with post submission interactivity
How do we provide a customized message to our visitors, post-submission based on the option that they have selected? All the information that they have entered and selected goes to a local storage. The local storage will trigger the logic set up for the “Thank You” page so that relevant message would appear for the users. The “Thank you” page will fetch the information from the server to know what information was provided by the user.
While continuously working on our client’s projects and fulfilling their requirements, especially in terms of interactivity we have figured out that there was never a dead-end in HubSpot COS/CMS for interactivity. These demo forms will provide a basic understanding that it is now possible to completely move to the HubSpot web development platform and attain interactivity that are available on other platforms.
Latest posts by Dev Shah (see all)
- How to Provide Database Driven Dynamic Content on HubSpot Web Pages? - November 29, 2017
- HubSpot – Shopify Integration: An Inbound Touch for Your Shopify Store - November 9, 2017
- Are These Clear Indications That HubSpot COS Is HubSpot CMS? - October 27, 2017