Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 1, 2023 at 10:00 pm #1377355
    tvbuzz

    Hi – Any suggestions on how to take the link show below in the button shortcode (https://www.getdrip.com/forms/xxxxx/submissions/new) and add in the following: data-drip-show-form=”xxxx”. ?

    For reference — as a regular link, here’s how it looks:
    <a href="https://www.getdrip.com/forms/xxxxx/submissions/new" data-drip-show-form="xxxx">Show form</a>

    BUTTON SHORTCODE
    [av_button label='Show form' icon_select='yes' icon='ue82b' font='entypo-fontello' icon_hover='aviaTBaviaTBicon_hover' link='manually,https://www.getdrip.com/forms/xxxxx/submissions/new' link_target='' size='x-large' position='left' label_display='' title_attr='' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']

    January 1, 2023 at 10:56 pm #1377357
    Mike

    Hey tvbuzz,
    Try adding a custom class to your button shortcode such as show-form then add this script to the end of your child theme functions.php file in Appearance ▸ Editor:

    function add_data_drip_show_form() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
      $(".show-form a").attr('data-drip-show-form', 'xxxx');
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'add_data_drip_show_form');

    I assume that you will have multiple forms, so each button will need a different custom class and you will add a new line in the script for each one, for example this script uses two custom classes show-form-one & show-form-two

    function add_data_drip_show_form() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
      $(".show-form-one a").attr('data-drip-show-form', 'xxxx');
      $(".show-form-two a").attr('data-drip-show-form', 'zzzz');
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'add_data_drip_show_form');

    Best regards,
    Mike

    January 2, 2023 at 4:00 pm #1377375
    tvbuzz

    Thank you Mike!!!

    Your solution worked perfectly!!

    January 2, 2023 at 4:51 pm #1377378
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘HOW TO: Create shortcode button with JS variable in href’ is closed to new replies.