Latest COS Design Blogs

Designers Blog

How To Bring In Your Form with Javascript

Written By Jonathan Pavoni on Apr 2, 2015 2:00:00 PM

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

National Service Bureau, a collections agency operating in the Seattle, Washington area, came to Creatrix Marketing looking to modernize their page layouts and update the functionality of their site. A key focus of this project was to increase lead generation for their outside sales team, which required many areas for visitors to opt into their marketing.  In order to keep the forms and CTA’s from feeling heavy handed to individuals visiting the site, we implemented a javascript form on their behalf. Let’s get started by looking at how to implement the tactic.

javascript-form

The Javascript Form "How To":

The Modules

To implement the javascript form functionality, start by adding a “Rich Text”, “HTML” and a “Form” module in the design manager. Once they have been added to the layout, you’ll want to give the form a unique class name.

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.

javascript-form-modules

The CSS:

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:

.homeform{
display:none;
}

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.

The JQuery

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

javascript-form-source-code

3. In the HTML editor write the following script:

<script>
$(document).ready(function(){
$('#request_services').click(function(){
$('.homeform').show('slow');
});
});
</script>

Script Explanation

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!

Subscribe to HubSpot's Designer Blog

Topics: Tutorial, Website Development

Jonathan Pavoni

Jonathan Pavoni is the CEO of Creatrix Marketing. He is a passionate entrepreneur, marketer, and writer. He loves to help companies utilize technology to achieve growth.

Search HubSpot Designers Site