HubMonks’ Interactive Demo Forms On HubSpot COS

March 4, 2017 | Dev Shah

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
  • Usability
  • Ease in finding information
  • Trustworthiness
  • Accessibility

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. HubMonks 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 HubMonks

  1. 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 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 with Google material interactivity:

1-6.png

Click Here To View The Full Demo Of A Form With Google Material Interactivity


  1. 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 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.

2-5.png

Click Here To View The Full Demo Of This Form With Custom Validation Messages

Modal pop-ups

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.

3-1-1.png

3-2-2.png

Click Here To View The Demo Page With A Modal Pop-up Form

  1. 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.

4-5.png

Click Here To View A Demo Of This Form With Steps Divided Into Various Sections

  1. 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.

Capture 7.gif

Click Here To View The Form With Customized Post Submission Messages

  1. Conclusion

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 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.

 

 

 

Web Development

About

Dev Shah

Dev Shah

Dev is the Head of Marketing at HubMonks, a HubSpot content optimization system (COS) partner for major inbound marketing agencies and brands. Dev utilizes and swears by the power of the HubSpot inbound marketing methodology. He loves to share valuable insights on HubSpot’s marketing software, content optimization system (COS) and the best practices to set up successful inbound marketing campaigns.

Leave a Reply

Recent Blog Posts