Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1447067

    Hi there

    I’ve developed a site which requires some customisation on the submit button to match other buttons.

    See the private link which shows the arrow I’d like to add before the Submit form button.

    I’ve looks for various solutions but none have worked.



    Hey Richard,

    Thank you for the inquiry.

    You can try this css code to insert the arrow icon before the submit button text.

    div#avia_6_1 + .form_element:before {
        content: '';
        background: url('https://meridiancivilengineering.co.uk/wp-content/uploads/2024/05/arrow.svg');
        width: 30px;
        height: 30px;
        display: block;
        position: absolute;
        z-index: 100;
        top: 10px;
        left: 12px;
    div#avia_6_1 + .form_element input.button {
        padding-left: 50px;

    Best regards,


    Hey Ismael

    This is fantastic thank you. Been trying to find a fix for years for the submit button styling.


    • This reply was modified 1 month, 3 weeks ago by raslade.


    Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,


    big hussle is that it is no button element – it is an input – with button functionality.
    if it is a button tag – then styling is much easier.

    you can change that by child-theme functions.php snippet:

    function change_input_to_button_tag(){
      (function($) {       
          function replaceElementTag(targetSelector, newTagString) {
              var inputvalue = $(this).attr('value');
              var newElem = $(newTagString, {html: $(this).html()});
              $.each(this.attributes, function() {
                newElem.attr(this.name, this.value);
              newElem.append('<span class="submit">'+inputvalue+'</span>');
          replaceElementTag('.avia_ajax_form input.button', '<button></button>');
    add_action('wp_footer', 'change_input_to_button_tag');

    Hey there, this is very useful and I’ll test on one of my other Enfold sites.


Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.