Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 30, 2024 at 12:27 pm #1447067
    raslade

    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

    May 31, 2024 at 4:37 am #1447134
    Ismael

    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

    May 31, 2024 at 11:20 am #1447173
    raslade

    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 5 months, 3 weeks ago by raslade.
    May 31, 2024 at 1:54 pm #1447183
    Rikard

    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

    May 31, 2024 at 2:04 pm #1447186
    Guenni007

    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');
    May 31, 2024 at 3:38 pm #1447193
    raslade

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

    Thanks
    Richard

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