![\"hubspot](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-20-at-3.24.43-PM.png\")
<\/p>\nI do a lot of in-person prospecting to win new business. I used to focus on giving out my business card, and then hoping the potential client would reach out to me. I learned that its better to capture their information, and then follow up. I used to collect so many business cards. Now I use a CRM, Customer Relationship Manager, called HubSpot. It does a lot of things, but primarily it helps to manage contacts. I want to let users sign up to my newsletter, and add themselves as a HubSpot contact, directly from my website.<\/p>\n
<\/p>\n
Out-of-the-box, HubSpot can generate a number of different web forms that can be easily embedded into any website. These forms are used to capture leads and contacts.<\/p>\n
My website (this website) is mostly hand-coded. I want to build my own custom form, and submit the data to the HubSpot service. This is possible with the “Private app” feature<\/a>. You can find this under ‘Settings -> Integrations -> Private Apps’. This strategy acts as a work-around to remove the HubSpot logo from forms without having to upgrade to premium.<\/p>\n After entering a name and description for your “app”, you’ll need to select permission scopes. I called mine “Antpace-Website” and described it “signup forms on antpace.com”. The only scope is gave it was called `crm.objects.contacts.write`<\/p>\n To create a contact programmatically through the HubSpot API, we use our private app’s access token. In my website’s HTML, I create a simple form:<\/p>\n I add basic jQuery JavaScript to pass the form data along to my backend service when the button is clicked:<\/p>\n The HubSpot API documentation says<\/a>, “To create new contacts, make a\u00a0![\"HubSpot](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-20-at-9.54.20-PM.png\")
<\/p>\n![\"hubspot](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-21-at-11.11.23-AM.png\")
<\/p>\nCRM API – Create Contact<\/h3>\n
<div class=\"col-md-12\">\n <h1 style=\"text-align: center;\">Newsletter<\/h1>\n \t<p>Joining the mailing list!<\/p>\n <form id=\"hubspotForm\" class=\"styled-form\">\n <input type=\"hidden\" value=\"subscriber\" name=\"lifecyclestage\">\n <div>\n \t<div><input type=\"email\" placeholder=\"Email *\" value=\"\" id=\"hubspot-email\" name=\"email\" class=\"\"><\/div>\n <div><input type=\"text\" placeholder=\"First Name\" name=\"firstname\" value=\"\" class=\"\"><\/div>\n <div><input type=\"text\" placeholder=\"Last Name\" name=\"lastname\" value=\"\" class=\"\"><\/div>\n <div><input type=\"tel\" placeholder=\"Phone\" value=\"\" name=\"phone\" class=\"\"><\/div>\n <div><input type=\"text\" placeholder=\"Company\" value=\"\" name=\"company\" class=\"\"><\/div>\n <div><input type=\"text\" placeholder=\"Website\" value=\"\" name=\"website\" class=\"\"><\/div>\n\n <div><button type=\"button\" id=\"signupButton\" class=\"btn\">Sign Up<\/button><\/div>\n <\/div>\n\t<\/form>\n<\/div>\n<\/pre>\n
<script>\n$(function(){\n\tconst notifications = new UINotifications();\n\t$(\"#signupButton\").click(function(){\n\t\tconst email = $(\"#hubspot-email\").val();\n\t\tif(email.length < 1){\n\t\t\tnotifications.showStatusMessage(\"An email address is required.\");\n\t\t\treturn;\n\t\t}\n\t\tconst formData = {\n\t\t\tproperties: {}\n\t\t};\n\n\t\t\/\/ Iterate over form fields and add them to formData\n\t\t$(\"#hubspotForm input\").each(function() {\n\t\t\tconst fieldName = $(this).attr(\"name\");\n\t\t\tconst fieldValue = $(this).val();\n\t\t\tformData.properties[fieldName] = fieldValue;\n\t\t});\n\t\t$.ajax({\n\t\t\ttype: \"POST\",\n\t\t\tdata: JSON.stringify(formData),\n\t\t\turl: \"\/hubspot-service.php\",\n\t\t\tsuccess:function(response){\n\t\t\t\tconsole.log(response);\n\t\t\t\tnotifications.showStatusMessage(\"Thank you for signing up.\");\n $(\"#hubspotForm\")[0].reset();\n\n\t\t\t}\n\n\t\t});\n\t});\n\n});\n<\/script>\n<\/pre>\nPOST<\/code>\u00a0request to\u00a0\/crm\/v3\/objects\/contacts<\/code>“. Some simple PHP cURL commands accomplishes this. Here is the content of hubspot-service.php<\/code>:<\/p>\n<?php\n\n$url = 'https:\/\/api.hubapi.com\/crm\/v3\/objects\/contacts';\n$accessToken = 'xxx';\n\n$headers = array(\n 'Authorization: Bearer ' . $accessToken,\n 'Content-Type: application\/json',\n);\n\n$postData = file_get_contents(\"php:\/\/input\");\n\n$ch = curl_init($url);\n\ncurl_setopt($ch, CURLOPT_POST, 1);\ncurl_setopt($ch, CURLOPT_POSTFIELDS, $postData);\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_HTTPHEADER, $headers);\n\n$response = curl_exec($ch);\n\nif (curl_errno($ch)) {\n echo 'Error: ' . curl_error($ch);\n}\n\ncurl_close($ch);\necho $response;\n\n?>\n<\/pre>\n
![\"Newsletter](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-22-at-6.43.21-PM.png\")
<\/p>\n