APIs & Integrations

DaveMyb
Participant

How to switch the submit button from an input element to a button element

SOLVE

I recently was asked to add an arrow to our submit buttons for design purposes. We're embedding Hubspot forms into a Drupal website, and I struggled to find a way to do this using the default input element - psuedo-elements and inserted HTML don't work and trying to get something added outside of the input and then overlaying it with CSS seemed messy. I didn't see a similar post here about this, so I figured this might help other folks.

 

In the end, I used the following code to simply change the <input> to a <button> and it seems to work properly for me. I see submissions come in as expected, and the client is happy they have their arrow on the button.

 

Without removing the original "with-arrow" class, the script was re-targeting the elements and removing the button text for some reason.

 

If you're actually using Drupal, this code was used in the hubspot-form.html.twig template that the hubspot_forms module provides, but this should work for any system where you're embedding the forms yourself.

 

<script>
hbspt.forms.create({
css: '',
target: '#{{ target }}',
portalId: '{{ portal_id }}',
formId: '{{ form_id }}',
submitButtonClass: 'btn btn-primary btn-sm with-arrow',
onFormReady: function($form){
// Swap the Submit input element for a button element so we can style it.
// Get a reference to the input element
var inputElements = document.getElementsByClassName('with-arrow');
for ( var i = 0; i < inputElements.length; i++) {

// Create a new button element
var buttonElement = document.createElement('button');

// Copy the relevant properties and attributes from the input to the button
buttonElement.className = inputElements[i].className;
// Change the arrow class so we don't re-target the button element, and
// add the proper arrow class.
buttonElement.classList.remove('with-arrow');
buttonElement.classList.add('btn--with-arrow');
buttonElement.type = inputElements[i].type;
buttonElement.textContent = inputElements[i].value;
buttonElement.onclick = inputElements[i].onclick;

// Replace the input element with the new button element
inputElements[i].parentNode.replaceChild(buttonElement, inputElements[i]);
}
}
});
</script>

 

 

1 Accepted solution
DaveMyb
Solution
Participant

How to switch the submit button from an input element to a button element

SOLVE

Yep, that was the idea 🙂

 

I also wanted to give anyone else the chance to provide a simpler solution if I missed it e.g. there's a hidden setting in Hubspot that does this already, lol.

View solution in original post

6 Replies 6
BérangèreL
Community Manager
Community Manager

How to switch the submit button from an input element to a button element

SOLVE

Hi @DaveMyb, thank you so much for sharing the solution with the Community! ❤️
Much appreciated!

This will be really helpful to other Community Members, that's great!

Sorry, I thought you were looking for a workaround 😀. Thanks @Jnix284 for the clarification!

Have a lovely day!

Best,
Bérangère


Saviez-vous que la Communauté est disponible en Français ?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

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


BérangèreL
Community Manager
Community Manager

How to switch the submit button from an input element to a button element

SOLVE

Hi @DaveMyb, I hope that you are well!

Thank you for asking the Community!

I found for your the solution from @Anton on this post "Custom Form Button" that might help you!

Also, I'd be happy to put you in touch with our Top Experts and some of our Community Members for this: Hi @Anton, @Kevin-C, @Summit90, @Chandler, @TRooInbound @warnerjm, @Jnix284 and @stefen do you have suggestions to help @DaveMyb, please?

Thanks a lot and have a wonderful day!

Best,
Bérangère


Saviez-vous que la Communauté est disponible en Français ?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

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


DaveMyb
Participant

How to switch the submit button from an input element to a button element

SOLVE

That is a useful post too, thanks! I was not really looking for a particular answer here, just sharing what I figured out in case someone else had the same issue. We're a bit limited with what we can easily do in terms of styling an <input type="submit">.

Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

How to switch the submit button from an input element to a button element

SOLVE

Thanks for the tag @BérangèreL, unless I'm mistaken, @DaveMyb it sounds like you found a solution and you wanted to share it with others.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

DaveMyb
Solution
Participant

How to switch the submit button from an input element to a button element

SOLVE

Yep, that was the idea 🙂

 

I also wanted to give anyone else the chance to provide a simpler solution if I missed it e.g. there's a hidden setting in Hubspot that does this already, lol.

Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

How to switch the submit button from an input element to a button element

SOLVE

Awesome, sharing solutions is always appreciated!

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin