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

**URL:** <https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [April 8, 2024, 5:08pm UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362 "2024-04-08T17:08:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveMyb](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DaveMyb](https://community.hubspot.com/u/DaveMyb)\
**Post date:** [April 8, 2024, 5:08pm UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/1 "2024-04-08T17:08:49Z")

</div>

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>`

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [April 9, 2024, 10:27am UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/2 "2024-04-09T10:27:48Z")

</div>

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](https://community.hubspot.com/t5/CMS-Development/Custom-Form-Button/td-p/669720)” 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

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [April 9, 2024, 11:45am UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/3 "2024-04-09T11:45:22Z")

</div>

Thanks for the tag [@BérangèreL](https://community.hubspot.com/t5/user/viewprofilepage/user-id/230185), unless I’m mistaken, @DaveMyb it sounds like you found a solution and you wanted to share it with others.

---

<div class="post-metadata">

**Author:** ![DaveMyb](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DaveMyb](https://community.hubspot.com/u/DaveMyb)\
**Post date:** [April 9, 2024, 12:15pm UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/4 "2024-04-09T12:15:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [April 9, 2024, 12:22pm UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/5 "2024-04-09T12:22:47Z")

</div>

Awesome, sharing solutions is always appreciated!

---

<div class="post-metadata">

**Author:** ![DaveMyb](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DaveMyb](https://community.hubspot.com/u/DaveMyb)\
**Post date:** [April 9, 2024, 12:16pm UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/6 "2024-04-09T12:16:50Z")

</div>

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”\>.

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [May 21, 2024, 11:38am UTC](https://community.hubspot.com/t/how-to-switch-the-submit-button-from-an-input-element-to-a-button-element/104362/7 "2024-05-21T11:38:54Z")

</div>

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