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>
. Thanks