CMS Development

subin
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Hubspot Form submission Using AJAX

SOLVE

Hi Developers,

 

Can anyone help me to show show how to submit an Hubspot form using Ajax without page redirection, i am storing some values on JS if page redirects, it will go. if any one have any ideas please reply

 

Thanks

0 Upvotes
2 Accepted solutions
nickdeckerdevs
Solution
Contributor | Diamond Partner
Contributor | Diamond Partner

Hubspot Form submission Using AJAX

SOLVE

I'm not exactly sure what you are asking, so if you can give me an example of what you are trying to do I can help you out!

View solution in original post

0 Upvotes
subin
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Hubspot Form submission Using AJAX

SOLVE

@all 

I have created the HTML form and passed the values using JS by making the HS form field hidden. now its wrking fine

 

Thanks

View solution in original post

9 Replies 9
nickdeckerdevs
Contributor | Diamond Partner
Contributor | Diamond Partner

Hubspot Form submission Using AJAX

SOLVE

Hey subin,

This page will really help you:

Hubspot advanced form options
Adding inlineMessage as an option in your form embed code like below will keep it inside.  You can even add a function in JS after the submission. Between the two of these you shoudl be able to submit the form and stay on the page and start any JS you want after the form is submitted.

hbspt.forms.create({
    portalId: 'xxxxxx',
    formId: 'xxxxxx',
    inlineMessage: 'Here is a fake inline message',
    onFormSubmit: function($form) {
        /* insert JS here  maybe hiding the message, or making the message be a please wait one moment*/
        console.log('the form was just submitted');
    } 
});

 

 

neena
Member

Hubspot Form submission Using AJAX

SOLVE

This code is not working for me Please help me out of this problem. When the form is submitted I want to show both success message and form on the website . But now only showing the success message. Please give me a solution for this.

Thanks in advance

Email me in the below email address 

dayana@freshmindideas.com

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Hubspot Form submission Using AJAX

SOLVE

@neena since this original post, HubSpot has added support for CORS to the submit form endpoint so you can easily do an XHR/Ajax submission without issue. The latest documentation for this endpoint is here: https://developers.hubspot.com/docs/methods/forms/submit_form

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
subin
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Hubspot Form submission Using AJAX

SOLVE

Thanks @nickdeckerdevs

 

Can you help me to show how we can pass the input values?

 

Thanks

0 Upvotes
nickdeckerdevs
Solution
Contributor | Diamond Partner
Contributor | Diamond Partner

Hubspot Form submission Using AJAX

SOLVE

I'm not exactly sure what you are asking, so if you can give me an example of what you are trying to do I can help you out!

0 Upvotes
subin
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Hubspot Form submission Using AJAX

SOLVE

@all 

I have created the HTML form and passed the values using JS by making the HS form field hidden. now its wrking fine

 

Thanks

paulpf
Member

Hubspot Form submission Using AJAX

SOLVE

Hi !
I am encountering the same problem at the moment can please show me the code you've been using to submit your own form and hidding the one from HS ? 
I can't make it to work. 

Thank you !

0 Upvotes
subin
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Hubspot Form submission Using AJAX

SOLVE

I have solved the issue by passing the values like this please check the code :

 

var frm = $('#hsForm_ID');
    var data = new FormData($('#hsForm_ID')[0]);
            // e.preventDefault();
            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                cache: false,
                contentType: false,
                processData: false,
                data: data,
                success: function (data) {
                    console.log('Submission was successful.');
                    
                    console.log(data);
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                },
            }); 

Thanks

stefen
Key Advisor | Partner
Key Advisor | Partner

Hubspot Form submission Using AJAX

SOLVE

@subin you could do something like this:

hbspt.forms.create({
    portalId: 'xxxxxx',
    formId: 'xxxxxx',
    inlineMessage: 'Here is a fake inline message',
    onFormSubmit: function($form) {
        console.log( $form.serialize() );
    } 
});

The nice thing about the serialize method is that it grabs all the input fields automatically so you don't have to manually specify each field.

Stefen Phelps, Community Champion, Kelp Web Developer