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
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
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
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
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
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
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 iconon the top right corner to bring up the Settings
Propertiestab on the left sidebar
- Click on
Next step is tricky:
- Object type: Choose
- Group: Select
- Label: This is the label name, give it any recognizable name.
- Property internal name: After you assign a
label name, the
property namewill 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
- 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
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 optionto 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 nameon the other hand MUST be exactly the same as shown in CF7 values. In this case, it’s
cat, dog, horseand
In formsfor 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
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.