Automate submitted entries of CF7 to Hubspot CRM

We can’t deny how important the marketing automation recently, it is certainly a challenge for those who are acquiring a large pool of contacts a day. According to Hubspot, 18% of salespeople have no clue what a CRM is, that includes the sole traders and small businesses. And this even worse, 40% of the sale reps still use the old-fashion ways like Outlook, Excel to manage leads and store the data.

You don’t need to have a business mindset to understand how it’s going to minimize their growth capability.

Imagine you spend 1 hours per day to input a customer’s data while your competitor, all they need is 1 second?

Exactly, you are way behind and if you don’t keep up with this change, you’re out!

That is why today I’m going to show you and save your day with a free automating integration that you can help yourself without involving any ridiculous budget, not a single penny.

I assume you are owning a WordPress-based site and a Contact Form 7 is the only gateway you have in order to generate leads.

For some reasons, you also ended up with Hubspot to manage your contacts, which was a good choice because Hubspot is a multi-purposed platform, best known for its CRM capability.

The good thing about Hubspot is it can sync with many open source platforms like WordPress therefore it’s viable to integrate your Contact Form 7 to Hubspot and it’s totally free.

Extra reading: Learn how to submit entries from CF7 to Google Sheet. In this article, I will be using a free Hubspot account. The process does not require any advanced coding skill, only the basic CF7 built-in modules. This tutorial suits for both non-technical and developers so you will succeed no matter what.

What you need before starting the integration:

• A Wodpress.org website with CF7 activated.
• A basic knowledge of how to create and modify CF7
• A free Hubspot account
• A free plugin “Contact Form 7 to Hubspot” developed by CRM Perks

Let’s begin!

Setup the CF7 for the first time

When you first install the CF7, it will come with a default form with the very basic entries, it may be slightly different on some templates.

To access the form, in WordPress CMS > Contact Form > Edit the form, you should see something like this:

On the front-end, this is how the form looks like:

Install the CF7 to Hubspot plugin

Download the plugin and install as usual, when it’s done access the settings of the plugin and it will ask you to connect with your Hubspot account.

You can create a new account via this plugin or just simply visit the actual website, either way, you will end up with a successful connection at the end of the process.

At this stage, it sounds a bit too easy but things will get more tricky in the next steps.

Enable Non-Hubspot form for data transferring

Basically Hubspot can recognize the external form but only when you activate this feature for it.

To activate, access the Settings of the plugin within WordPress and switch to the Non-Hubspot Forms then activate the Collect data from website forms.

In case you are wondering, this is actually an API that you inject to every page, this API scan for any possible available form and capture the entries and send it back to Hubspot.

At this stage, everything should be working, let’s test it.

Back to the contact form in the front-end, put in some dummy data for all fields.

Once you submit the form, there are two ways that you can verify if the form was captured in Hubspot:

• Via WordPress: choose Hubspot > Forms
• Via Hubspot Site: My Account > Marketing > Forms

Either way, you will end up with the same interface. I recommend practicing on Hubspot official website itself to get familiar with the interface.

If the form was successfully recorded after the first submission, it will appear with a default name as .wpcf7-form which is the class name of the form.

You can change this name to however you want to help you distinguish in a long run.

Verify the contacts in Hubspot

Remember the dummy data we test earlier? Let’s check if that data is residing as a new contact in Hubspot, to verify the contact, locate the Submissions column of the CF7 form and click on the number underneath.

Scroll down to the bottom is a list of all the contacts that have been submitted via that particular form.

You will also be able to know the conversion page and the timestamp of the submission which are quite handy if you have the same form on multiple pages.

In this case, a new contact Zen was created.

Next, click on View submission next to the contact name to view all other entries belong to this contact such as phone number, email and the description.

As you can see, all the entries were recorded successfully except the message area “How can we help you?” tagged with a yellow triangle icon laying next to that field.

Hover it you will receive an error message “This value wasn’t passed to the contact record…”.

I will explain later why this happens, but for now, there is a trick to quickly fix this. Go back to the CF7 form setting and make a minor adjustment of the shortcode.

Change the field name from your-message to message, save the form and retry the submission.

You no longer see the error message, this field will be pushed along with other entries as it should be.

At this point, if you simply just need a simple form like the example above, there is no need to take any further action. This is it, every time someone uses the contact form, not only submitted to your email initially but also being sent to Hubspot.

Work with the complex forms

Previously, we have synchronized the entries across CF7 and Hubspot, only one thing so confusing was why the text area was not passed to the contact record right?

First thing first you need to understand how CRM works.

Every CRM has the object properties, these properties will interact with the website custom forms’ properties to exchange the data. In other words, the forms have properties, so does the CRM.

Both platform’s property names must match with exact same property name.

Otherwise, the data will not pass.

With the example above, the CF7 text area had a property name your-message. Unfortunately, Hubspot by default does not have any built-in property name as your-message but only message.

When you activate Non-Hubspot Forms inside Hubspot, you cannot edit or modify the CF7 forms from Hubspot side, but you can change the property name from CF7 side to match with Hubspot’s.

As a result, we changed the field name in CF7 from your-message to message to satisfy Hubspot’s requirement.

Now, in the real world, unless you are a blogger or have no desire for a marketing strategy, seldomly you are to encounter a simple contact form on a business site like the above example with only 4 basic entries.

Most of the businesses will build a complex form with more complicated entries like drop-down selection, radio buttons, multi checkboxes. Therefore, a similar trick to the text area box will not work.

For example, I have a form like this with an extra of 2 more entries which are drop-down and multi-checkbox options. I created 2 more property names as your-option and your-checkbox.

If you submit this, you will get the same error as earlier, these two data will not be passed.

What we have to do is creating new custom properties in Hubspot to synchronize with our new two entries.

Create custom properties in Hubspot

You can only create a new property within the Hubspot web platform, login to your account:

• Locate the gear icon on the top right corner to bring up the Settings
• Select Properties tab on the left sidebar
• Click on Create property

Next step is tricky:

• Object type: Choose Contact
• Group: Select Contact Information
• Label: This is the label name, give it any recognizable name.
• Property internal name: After you assign a label name, the property name will be automatically generated and inherited from label name in lowercase format, separated with underscores. You will need to change this internal name to match with your CF7 property name. In this case your-option.
• Save and click Next

Note: Property internal name cannot be changed thereafter so double check carefully before Save to avoid any turnover.

Lastly, in the Field type > choose Dropdown select.

The interface will now expand with more options. Don’t be afraid, it’s very straight forward:

• Sort and Search: Leave as they are.
• Item label and internal value: I have 4 items in my CF7 dropdown entry. Click Add an option to add as many items as you like. Again the labels can be any name that helps you manage your contact data more fluid. The internal name on the other hand MUST be exactly the same as shown in CF7 values. In this case, it’s cat, dog, horse and pig.
• Enable In forms for all items

Note: Unlike the internal name of the property, the internal name of the sub-item is case sensitive and spaces are allowed. For example, “CAT sickness” is “ unidentical to “cat sickness” and “cat-sickness”. Similar to the property’s internal name, once created, they cannot be modified. After that, you can access this property by type in the search box to bring it up.

Hover on this new property will give you some options.

In case you made some mistakes with the internal name or you would like to create a new property based on the existing one, hover and click on Clone, basically, it’s a new one but you will be able to change in the internal names for both property and sub-items.

At this point, if you do it right, the dropdown entry should be passed to Hubspot. Let’s have a check.

As expected, we don’t see any error for the dropdown property and it works flawlessly. Repeat the same process for the checkbox and those errors will be gone too.

There you go, everything is in the good shape of CRM automation. For CF7, you no longer need to forward the leads to your email. Instead, all the leads are stored and can be accessed in Hubspot’s Contacts section.

What next?

You have learned how to apply automation for data entries to Hubspot CRM. The process can save you a significant amount of time while you can invest in something else more solidly.

The best practice of CRM is then you can develop the customer support pipeline with Hubspot, having the contacts funneled in is the start of your journey since you can do many marketing strategies such as remarketing, EDM, and inbound marketing.

See the value?

One thing to remember when setting up this process is always and always keep the names organized.

At some point, your site may reach to a very sophisticated form as their names look all alike. Obviously, just one character goes wrong, you have to do it over again.

There was a time I had to craft a survey with over 500 entries so you got the picture how confusing it could turn to.

Although, making a large form format in CF7 is viable but not practical. Some companies prefer HTML form for the heavy task and also better performance. Of course, applying an HTML form for WordPress would need a dedicated developer team to do it.

So how to integrate the WordPress-based HTML form entries to Hubspot?

That is another story for another article coming up soon.