<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=149034655494227&amp;ev=PageView&amp;noscript=1">

HubMonks’ Interactive Demo Forms On HubSpot COS/CMS

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/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:

1-6.png

Click Here For HubMonks' Demo Of Form Based On Google Material Design >>


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

2-5.png

Click Here For HubMonk's Demo Of Form With Custom Validation >>

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 For HubMonks' Demo Of Modal Pop-ups >>

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 For HubMonks' Demo Of Modal Pop-ups >>

  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 HubMonk's Demo Of Customize 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/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.

 

 

 

Web Development

About

Dev Shah

Dev Shah

Dev is the Head of Marketing at HubMonks, a HubSpot content management system (CMS) 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 management system (CMS) and the best practices to set up successful inbound marketing campaigns.

Leave a Reply

GET A FREE INBOUND MARKETING AUDIT FROM MONKS

Want to know how to optimize your website to get more traffic and leads? Ask our certified inbound marketing specialist for a free one time assessment.

Recent Posts