CMS Development

Summit90
Member

Execute Form Submit Button with custom HTML Button

I have a custom built form which uses HTML to create a more dynamic layout of form fields and I am in the process of integrating this with a Hubspot Form that I intended to keep as hidden, including the Form Submit button. Is there any way that I can target and execute the Hubspot Form Submit button by using a javascript/jquery function when I press my own designed and placed button created as part of my HTML? I have searched for quite a while now, and nothing I have come across is giving me a decent starting point on how to approach this.

 

A note on this, I am currently utilizing the Form as "Set as raw HTML Form."

0 Upvotes
4 Replies 4
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Execute Form Submit Button with custom HTML Button

Hey @Summit90

 

You may be able to use the jQuery ".click()" to simulate a mouse click.

See this article

 

Or manually submitting the form with ".submit()"

See here

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Summit90
Member

Execute Form Submit Button with custom HTML Button

@Kevin-C,

 

Thanks for the advice here, those examples definitely make sense. I suppose the part I am most lost about, is how the object for the Hubspot Form Submit button is referenced. For example, I can target other parts of the Hubspot Form, such as an input textbox, by using parameters such as 'input[name="firstname"]'. So as part of a function, can I target the Hubspot Form Button to execute and how would I reference this?

 

Or for another approach. This is a snippet from the example of manual submission you posted.

 
$( "#other" ).click(function() {
  $( "#target" ).submit();
});
 
So, in this example the #other is my custom button, and #target would be the Hubspot Form, but how would I bind the Hubspot Form to the #target or how would I properly reference the Hubspot Form here?

 

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Execute Form Submit Button with custom HTML Button

Hey @Summit90 

 

Reference and submit the form:

$('#other').on('click', funciton(){
  $('#target').submit();
});

or simulate a click on the original submit button:

$('#other').on('click', funciton(){
  $('#target-button').click();
});

Edit:

Removed click delegation

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
sharonlicari
Community Manager
Community Manager

Execute Form Submit Button with custom HTML Button

Hey @Summit90     

 

Thank you for the information provided.I'll tag a few experts that can share their experience with you.    

 

Hey @psdtohubspot @Adesignl @Jsum  any thoughts you would like to share with @Summit90?

 

Thanks

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes