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

[DaveMyb]

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>

[BérangèreL]

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

[BérangèreL]

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

[DaveMyb]

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]

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.

[DaveMyb · Accepted solution]

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]

Awesome, sharing solutions is always appreciated!