Custom HTLM+CSS+JS form integration

Marketing & Content Hub Lead Capture Tools
1

Hello,

I need your help with form integration. I went through lot of questions and tickets here and I did not find an answer for my question. I also read API documentation but I suppose I dont have enough experience because I dont understand how to make it.

I have custom-made form on the bottom of this page - http://1104674.nirvan00.web.hosting-test.net/certifeka/for-business/ I need to submit data to form on hubspot but I dont understand how to implement this.

Do you have some examples how to do this correctly? Maybe there are some demo forms or something like that. I will be really thankfull for your help.

2

Hi @petryshakm

Submitting data from a custom form to HubSpot requires use of the Forms API - if you are unable to develop the API connection yourself, someone here may offer help, but, my imepression is, it’s quite a lot to ask.

If you know HTML/CSS, but the languages required for the API, you might have better success by embedding and styling a native HubSpot form - however, that would probably preclude the use of your nice country dialling code drop down.

If you have made some progress on the API front, but are encountering specific challenges, I recommend posting over on https://integrate.hubspot.com/

Anything you would add @Jsum?

Hope this helps.

3

Hi @Phil_Vallender,

Thank you for your answer. I need to use my custom html markup, not hubspot form. What I have at the moment:

Two-step contact form, which works using ajax. So I collect all fields values using jQuery and then send a message using callback PHP function. As I understand I should proceed hubspot data sending in that callback function when an email message is sending, correct?
I dont ask to make this work for me, I just need to know from where to start because I don’t understand this clearly from forms API instructions. Thank you!

4

@petryshakm,

I have a site that uses the Web Self Storage (uhaul) api for unit reservations. This api has to be done on the backend. I also wanted the reservation customer info to be entered into our contacts on hubspot aswell.

first issue: Hubspot doesn’t allow server side language. In the case of the WWS api I had to build a proxy that changes the requested info from xml to Json on a javascript endpoint. That was some work to figure out but I hosted it on a godaddy server that I use for staging WP sites. After that It was a matter of integrating the Hubspot api. That was surprisingly easy, even with the WWS api in between the form and Hubspot. The documentation is pretty clear once you get over them not going step for step over how to connect.

You can use php, python, or probably most backend languages I can imagine. I chose php because I didn’t know much about python back then. Here is a sample of my code, but I pulled it out of a much larger function so you can really only use it as reference to compare to examples in the docs:

$post_json = json_encode($arr);
 $hapikey = "Hubspot API Key";
 $endpoint1 = 'http://api.hubapi.com/contacts/v1/contact/createOrUpdate/email/' . $arr['properties'][0]['value'] . '/?hapikey=' . $hapikey;
 $endpoint2 = 'http://api.hubapi.com/contacts/v1/lists/61/add?hapikey=' . $hapikey;
 $ch = @curl_init();
 @curl_setopt($ch, CURLOPT_POST, true);
 @curl_setopt($ch, CURLOPT_POSTFIELDS, $post_json);
 @curl_setopt($ch, CURLOPT_URL, $endpoint1);
 @curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
 @curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 $response1 = @curl_exec($ch);
 $status_code1 = @curl_getinfo($ch, CURLINFO_HTTP_CODE);
 $curl_errors1 = curl_error($ch);

 if ($status_code1 == 200) {

 $vid = json_decode($response1, true);

 $arr2 = array(
 'vids' => array (
 $vid['vid']
 )
 ); 

 $vids_push = json_encode($arr2);

 @curl_setopt($ch, CURLOPT_POSTFIELDS, $vids_push);
 @curl_setopt($ch, CURLOPT_URL, $endpoint2);
 $response2 = @curl_exec($ch);
 $status_code2 = @curl_getinfo($ch, CURLINFO_HTTP_CODE);
 $curl_errors2 = curl_error($ch);
 @curl_close($ch);

 }

Need help? Hire Us Here

5

@JsumThank you for your answer!

I think I finally made it. I used an example from Forms API description. I sent information to corresponding HubSpot form (which I created earlier) in ajax callback function after successful email message sending. It works well, and I see it saves all needed information into form submissions list.