How to create a hidden coupon field in Amembers

Facebooktwittergoogle_plusredditpinterestlinkedinmail

You can hide the default coupon code field by using a little bit of HTML brick customization.

This is the end result.

No visible coupon box.

A user has to click on the “apply here” link for the box to be visible. Hopefully this is send less visitors away on a Google search promo code hunt.

How to do it

The following steps were provided to me by the awesome support staff at amember.com, they replied literally in 5 mins to my request.

I take no credit for the following.

  1. aMember CP -> Configuration -> Forms Editor
  2. Put coupon code to your form
  3. Put HTML brick to you form below coupon brick
  4. Insert the following code
    <div style="text-align:center">Got a coupon? <a href="javascript:;" id="expand-coupon" class="local-link">apply here</a></div>
    <script type="text/javascript">
    $(function(){
        $('#expand-coupon').click(function(){
            $(this).closest('.row').hide();
            $('input[name=coupon]').closest('.row').show();
            $('input[name=coupon]').focus();
         })
        $('#expand-coupon').closest('.row').toggle($('input[name=coupon]').val() == '');
        $('input[name=coupon]').closest('.row').toggle($('input[name=coupon]').val() != '');
    });
    </script>
  5. Set “Remove label” on the HTML brick to center the text.

All done!

Leave it hidden

Another idea is to just use the code to leave the coupon box permanently hidden, but to pass coupon codes as a URL parameter.

Facebooktwittergoogle_plusredditpinterestlinkedinmail