Hubspot integration with Contact Form 7 and Hidden Fields

[jaromhigley]

Hello, I'm trying to use hubspot right now to catch information from contact form 7. It works very well for all of the visible fields when the "use non-hubspot forms" option is turned on. I'm wondering if anyone can help me figure out how to pass the hidden field info from the CF7 form to hubspot using the forms API. Is this even possible? 

Also, how can I get a GUID for all of my forms on the site so I can dynamically add them to the API code found here https://developers.hubspot.com/docs/methods/forms/submit_form for PHP. 

[Willson · Accepted solution]

Hi @jaromhigley 

I cannot speak to the use of the Contact Form 7 plugin and the use of hidden values but when working with the HubSpot Forms API, as long as the hidden property values are passed as part of your payload and are mapped to an existing property, we will see this update in the UI against the record that is created/updated. 

To provide an example, I have a custom form added to a page. Here's a snippet of the code:

<form>
    First Name:	  <input type="text" name="firstname" /><br>
    Last Name:    <input type="text" name="lastname" /><br>
    Email Address:<input type="email" name="email" /><br>
    Phone:        <input type="phone" name="phone" /><br>
    <input type="hidden" name="API" value="Test123"/><br>

<input type="submit" name="submit" value="submit" /><br>
</form>

We can see above that I have a field marked as 'hidden' so that when this form renders on the page, the end-user cannot see this field and upon submission, the preset value of 'Test123' is passed. 

For the passing of the data, I am using the following function:

$('form').submit(function(e) {
		e.preventDefault();
		var hubspottoken = getCookie('hubspotutk'); //Get the users cookie
		var pageTitle = document.title; //Title of page
		var pageURL = document.URL; //URL of page
		var submissionTime = new Date().getTime(); //Get time in milliseconds to record submission
		var formData = $(this).serializeArray(); //Get the form data and convert to an array

		var payload = {
			"submittedAt": submissionTime,
			"fields": formData,
			"context": {
				"hutk": hubspottoken,
				"pageUri": pageURL,
				"pageName": pageTitle
			}

We can see that the form data is being added to the 'formData' variable and we're using the '.serializeArray();' method to create an array of the form data. More info on this can be found here: https://api.jquery.com/serializeArray/

Once this is submitted, we see the form data passed and processed against the form GUID I pass in the request URL. As an example, the URL would look something like this:
"https://api.hsforms.com/submissions/v3/integration/submit/PORTAL_ID/YOUR_FORM_GUID_HERE"

The above leads into your second query in relation to the GUID, this is a value that must be obtained from a HubSpot Form if you wish to use the HubSpot Forms API. You can see a list of forms on your portal by going to the Marketing > Lead Capture >  Forms page. 

The fields in the form will correspond to contact properties set up for the HubSpot account. Please see the Contacts API and Contact Properties API for more details. Then, when the submission is made, the values stored in the array will be passed and stored against the relevant contact properties. 

I hope this helps!