How to Connect Bricks Builder Forms to HubSpot Using a Private App Token [Without Plugin]

Integrating Bricks Builder Forms with HubSpot enables seamless data flow between your website and CRM, enhancing lead management and marketing automation.

Why Connect Bricks with HubSpot?

• Centralized Data Management: Automatically sync form submissions with HubSpot contacts.
• Enhanced Marketing Automation: Trigger workflows based on form inputs.
• Improved User Experience: Provide timely responses and follow-ups.

What You’ll Need

• Bricks Builder: A WordPress page builder with form capabilities.
• HubSpot Account: Access to create a Private App.
• WordPress Access: Ability to edit the functions.php file or use a code snippets plugin.

Step 1: Create a HubSpot Private App

• Log in to HubSpot: Access your HubSpot account.
• Navigate to Settings: Click the settings icon in the main navigation bar.
• Access Private Apps: In the left sidebar, go to Integrations > Private Apps.
• Create a New App:
  • Click Create a private app.
  • Provide a name and description for your app.
• Set Scopes:
  • Under the Scopes tab, select the necessary permissions, such as crm.objects.contacts.write.
• Generate Token:
  • Click Create app.
  • In the confirmation modal, click Continue creating.
  • Once created, click Show token and copy it. Store this token securely.
• Note: This token will be used to authenticate API requests from your website to HubSpot.

Step 2: Build Your Form in Bricks

1. Add a Form Element: In Bricks Builder, drag and drop the Form element onto your page.
2. Configure Fields:
3. Add necessary fields like Name, Email, and Message.
4. Ensure each field has a unique ID.
5. Set Form Action:
6. Under the Actions tab, select Custom.
7. This enables the use of a custom PHP function upon form submission.

For My form I added three fields name,email and message.

Tip: To identify field IDs, inspect the form or refer to Bricks documentation.

Step 3: Add the Code

To process form submissions and send data to HubSpot, add the following PHP snippet to your theme’s functions.php file or use a code snippets plugin:

Replace your_form_id with the actual ID of your Bricks form.

Replace your_private_app_token with the token obtained from your HubSpot Private App.

Step 4: Testing the Integration

• Submit the Form: Fill out and submit the form on your website.
• Check Logs:
  • Access your website’s error logs to see if the data was sent successfully.
  • Look for entries like “HubSpot API response”.
• Verify in HubSpot:
  • Log in to your HubSpot account.
  • Navigate to Contacts and check if the new contact appears with the submitted details.

Bonus: Tips for Custom Fields

• Creating Custom Properties in HubSpot:
  • Go to Settings > Properties.
  • Click Create property and define the necessary fields.
• Matching Field Names:
  • Ensure the property values in your PHP code match the internal names of the custom properties in HubSpot.

Conclusion

By following these steps, you’ve successfully integrated Bricks Builder Forms with HubSpot using a Private App Token. This setup ensures efficient data handling and enhances your marketing automation capabilities.

Stay tuned for future tutorials on advanced integrations and automation strategies!