How to Create a Custom HubSpot Contact Form with API Integration

Introduction:
HubSpot is a powerful CRM platform that allows businesses to manage their contacts efficiently. In this tutorial, we will create a simple custom contact form using PHP that integrates with HubSpot’s API to store user data directly into your HubSpot CRM.

Why Use a Custom Contact Form?
A custom contact form offers more flexibility than standard HubSpot forms. You can customize the design, add validations, and integrate with other tools as needed.

Steps to Create a Custom HubSpot Contact Form

1. Get Your HubSpot API Key

To connect to HubSpot's API, you need an API key. You can find it by navigating to:

  • HubSpot Dashboard → Settings → Integrations → API Key

Copy and keep this key safe as we will use it in our code.

2. Create the PHP Form

Below is the PHP code for the custom HubSpot contact form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   
// Define HubSpot API Key
$hubspot_api_key = 'YOUR_HUBSPOT_API_KEY';
 
// Check if form is submitted
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $contact_data = [
        'fields' => [
            ['name' => 'firstname', 'value' => $_POST['firstname']],
            ['name' => 'lastname', 'value' => $_POST['lastname']],
            ['name' => 'email', 'value' => $_POST['email']]
        ]
    ];
     
    $endpoint = "https://api.hubapi.com/crm/v3/objects/contacts?hapikey=$hubspot_api_key";
     
    $ch = curl_init($endpoint);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($contact_data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/json'
    ]);
     
    $response = curl_exec($ch);
    curl_close($ch);
     
    echo "Contact submitted successfully!";
}

3. Create the HTML Form

Add this HTML code to your project to create a user-friendly form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--DOCTYPE html-->
 
 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HubSpot Contact Form</title>
 
 
    <h2>HubSpot Contact Form</h2>
    <form method="POST">
        <label>First Name:</label>
        <input type="text" name="firstname" required=""><br>
        <label>Last Name:</label>
        <input type="text" name="lastname" required=""><br>
        <label>Email:</label>
        <input type="email" name="email" required=""><br>
        <button type="submit">Submit</button>
    </form>

4. Deploy and Test the Form

  • Save the PHP file and host it on your web server.
  • Open the form in your browser, enter details, and submit.
  • The submitted contact details should now appear in your HubSpot CRM.
Creating a custom HubSpot contact form using API integration allows for more flexibility in capturing user data. You can further enhance this by adding custom fields, validation, and error handling. Try implementing this on your website and streamline your lead management with HubSpot CRM.

No comments:

Post a Comment