Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.

    Thanks
    Richard

    #1447134

    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,
    Ismael

    #1447173

    Hey Ismael

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

    Richard

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

    Hi,

    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,
    Rikard

    #1447186

    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(){
    ?>
    <script>
      (function($) {       
          function replaceElementTag(targetSelector, newTagString) {
            $(targetSelector).each(function(){
              var inputvalue = $(this).attr('value');
              var newElem = $(newTagString, {html: $(this).html()});
              $.each(this.attributes, function() {
                newElem.attr(this.name, this.value);
              });
              $(this).replaceWith(newElem);
              newElem.append('<span class="submit">'+inputvalue+'</span>');
            });
          }
          replaceElementTag('.avia_ajax_form input.button', '<button></button>');
      }(jQuery)); 
    </script>
    <?php
    }
    add_action('wp_footer', 'change_input_to_button_tag');
    #1447193

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

    Thanks
    Richard

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