As inbound marketers, it’s imperative that we have multiple ways for our visitors to opt-in to our marketing efforts. Fortunately, there are many ways to do this; we can put a form at the end of our videos, have calls to action buttons prominently displayed or simply have forms on our site pages for visitors to fill out. In this blog post, we’ll take a look at a tactical way to display forms on your website, only to be revealed when someone is ready to fill them out. Cosmetically, this really changes the look and feel of your website by freeing up screen real estate for your content.
Customer Use Case
For our example, we added the class name: “homeform” to the form module, which is necessary because you will be targeting it with both CSS and Jquery to make the functionality work.
In the rich text module above the form, create a call-to-action button in the graphic design application of your choosing (e.g. Photoshop or Illustrator). This button will be the activator used to show the form when the user clicks on it.
Once the three modules have been added to the layout in design manager, and the unique class name has been added to the form module you are ready to do some CSS styling. Head over the CSS stylesheet that you are using for the website and add the following code:
Instead of using the .homeform class selector you will use the class that you created. Once you write this CSS code your form will no longer be visible on the site page or landing page that you are working on.
In the HubSpot site page and landing page editor, follow these steps:
1. Place the call to action button in the rich text module above the form
2. Give the call to action button a unique ID (as seen in the screenshot below):
3. In the HTML editor write the following script:
The jQuery script is telling the page that when the call to action button is clicked by the user, then show the homeform slowly. It’s important to replace the “#request_services” id and “.homeform” class with your own ids and class names to make the functionality work.
Wrapping it all up...
Once you have done this, just publish the changes and refresh the page. Then click on the call to action button and you should see your form slide in below it. As you can see, this tactic is a much cleaner way to showcase forms on your HubSpot COS pages. Let me know if you have any questions during implementation. Happy Hubspotting!
Check out more HubSpot COS tutorials here!