Wordpress signup widget question

Discussion in 'Integration' started by dale_sellers, Apr 16, 2013.

  1. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    We have the following code inserted into aMember Text Widget. It allows for a signup form to be located on all pages throughout a WordPress installation (to users not logged in). It seems to work nicely, although I will add styling to get it looking better.

    Only issue is that the form validations are not working. Whenever something is not entered, or not entered correctly, instead of showing validation errors on the page, user is redirected to main signup page of aMember. Is there any way to get the validation script working properly so user will not be directed if wrong entry is made? Thank you for any suggestions.

    Here is the code:

    Code:
       
    <div id="fb-root"></div>
     
    <a href="javascript:" onclick="facebook_connect()"><img src="/manage/misc/facebook/connect-btn" width="107" height="25" alt="Connect with Facebook"/></a>
     
    <script type="text/javascript">
           
      window.fbAsyncInit = function() {
        FB.init({
          appId  : '207111002665914',
          status : true, // check login status
          cookie : true, // enable cookies to allow the server to access the session
          xfbml  : true,  // parse XFBML
          channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
          oauth : true //enables OAuth 2.0
        });
        FB.getLoginStatus(function(response){ });
      };
     
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        var root = document.getElementById('fb-root');
        if (!root)
        {
            root = document.createElement('div');
            root.setAttribute('id', 'fb-root');
        }
        root.appendChild(e);
      }());
       
    function facebook_connect()
    {
    FB.login(function(response) {
      if (response.authResponse) {
        FB.api('/me', function(response) {
          jQuery("input[name='name_f']").val(response.first_name);
          jQuery("input[name='name_l']").val(response.last_name);
          jQuery("input[name='email']").val(response.email);
        });
      } else {
        // User cancelled login or did not fully authorize
      }
    }, {scope: 'email'});   
    }
     
    </script>
    <div class="am-form"><form action="/manage/signup" id="page-0" method="post" class="am-signup-form">
    <input type="hidden" name="product_id" data-first_price="0.00" data-second_price="0.00" checked="checked" value="4-4"  id="product_id---0">
     
    <div class="row" id="row-name-0"><div class="element-title"><label><span class="required">* </span>First Name:</label></div><div class="element group"><input type="text" size="15" name="name_f" id="name_f-0" /></div></div>
     
    <div class="row" id="row-email-0"><div class="element-title">
        <label for="email-0"><span class="required">* </span>Your E-Mail Address:</label><div class="comment"></div></div><div class="element"><input type="text" size="30" name="email" id="email-0" /></div></div>
     
    <div class="row" id="row-login-0"><div class="element-title"><label for="login-0"><span class="required">* </span>Choose a Username</label>
    <div class="comment">6 or more characters with only letters, numbers, and underscores</div></div><div class="element"><input type="text" size="15" maxlength="32" name="login" id="login-0" /></div></div>
     
    <div class="row" id="row-pass-0"><div class="element-title"><label for="pass-0"><span class="required">* </span>Choose a Password</label><div class="comment">must be 6 or more characters</div></div><div class="element"><input type="password" size="15" maxlength="32" name="pass" id="pass-0" /></div></div>
     
    <div class="row" id="row-_pass-0"><div class="element-title"><label for="_pass-0"><span class="required">* </span>Confirm Your Password</label></div><div class="element"><input type="password" size="15" name="_pass" id="_pass-0" /></div></div>
     
    <div class="row" id="row-question-0"><div class="element-title"><label for="question-0">What is the opposite of day?</label><div class="comment">Please answer above question</div></div><div class="element"><input type="text" question="question" name="question" id="question-0" /></div></div>
     
    <div class="row" id="row-buttons"><div class="element-title"><label></label></div><div class="element group"><input type="submit" value="Next" name="_qf_page-0_next" id="_qf_page-0_next-0" /></div></div>
    <input type="image" id="_qf_default" width="1" height="1" src="/manage/application/default/views/public/img/empty.gif" name="_qf_page-0_next" style="display: none;" /><input type="hidden" name="_save_" id="_save_-0" value="page-0" /><input type="hidden" name="paysys_id" id="paysys_id-0" value="free" />
    </script><input type="hidden" name="q_id" id="q_id-0" value="0" /></form></div>
     
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        if (jQuery && jQuery.validator)
        {
            jQuery.validator.addMethod("regex", function(value, element, params) {
                return this.optional(element) || new RegExp(params[0],params[1]).test(value);
            }, "Invalid Value");
     
            jQuery("form#page-0").validate({
                ignore: ':hidden'
                ,rules: {"product_id":{"required":true},"name_f":{"required":true,"regex":["^[^=:<>{}()\"]+$",""]},"email":{"required":true},"login":{"required":true,"rangelength":["6","32"],"regex":["^[0-9a-zA-Z_]+$",""]},"pass":{"required":true,"rangelength":["6","32"]},"_pass":{"required":true}}
                ,messages: {"product_id":{"required":"Please choose a membership type"},"name_f":{"required":"Please enter your First Name","regex":"Please enter your First Name"},"email":{"required":"Please enter valid Email"},"login":{"required":"Please enter valid Username. It must contain at least 6 characters","rangelength":"Please enter valid Username. It must contain at least 6 characters","regex":"Username contains invalid characters - please use digits and letters"},"pass":{"required":"Please enter Password","rangelength":"Password must contain at least 6 letters or digits"},"_pass":{"required":"This field is required"}}
                //,debug : true
                ,errorPlacement: function(error, element) {
                    error.appendTo( element.parent());
                }
                // custom validate js code start
               
    ,errorElement: "span"
                // custom validate js code end
            });
        }
        // custom js code start
       
        // custom js code end
    });
    </script>
     
            
  2. gswaim

    gswaim CGI-Central Partner

    Joined:
    Jul 2, 2003
    Messages:
    641
    If you want to offer a login form on every page in a sidebar widget, why not just use the aMember Widget? Then if the user is logged in it displays links to the dashboard and a log out link.
  3. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    gswaim - thank your for the reply. I did see the login form which is a great feature. What I am asking about in this post is a signup form, which I did not see included in the widgets. This would allow new users to sign up for the first time.
  4. gswaim

    gswaim CGI-Central Partner

    Joined:
    Jul 2, 2003
    Messages:
    641
    The aMember widget displays a login plus a link to the signup page for all visitors. After signing up and logging in the widget displays links to the member dashboard (change profile, check subscription status, renew products, etc)

    See an example from a site in the image below.

    amemberwidget.png
  5. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    Rather than a link, I'm trying to get an actual signup form in the side widget. The hack actually works, as you can see in this example:

    http://www.lifeleap.org/blogtest/

    The only thing that doesn't appear to be working in the form is the validation. Maybe there is a jqurey link or something else I need to to add (this is what I can't figure out). I am trying to keep the user on the page, even if they enter the wrong info, and show them the validation errors, instead of being redirected to aMember signup page if there is an error.

    Below the custom signup widget I created, you can see the login widget (for current users to login). As you can see, I disabled the "Register Here" link because I have the sign up form above it.

    It all looks a little busy right now, but with some text edits and css styling, I think I can get it looking good.

    The whole idea of this design is to create a squeeze page format, where user can sign up on the same page as the offer, without having to go to a new link to signup.
  6. gswaim

    gswaim CGI-Central Partner

    Joined:
    Jul 2, 2003
    Messages:
    641
    Placing then entire signup form in a sidebar is an unusual approach, but variety is the spice of life :) If you start offering multiple products it will become more of a challenge to make this work.

    This approach is going to require a code monkey, which I am not, so I am bowing out of this thread.

    Good Luck.
  7. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    I agree this approach probably wouldn't be good for multiple products. But most "squeeze pages" have 1 call to action, so I think a lot of aMember users could benefit from having something like this. I'm surprised that someone hasn't already done it (they probably have but didn't share it :)

    Sign up conversions will increase because users can signup on page right away, compared to having to click on a link and then being led to a signup page.

    I realize that the original aMember signup page can be cuatomized to acheive the same effect, but we have pages in our site that are aleady getting good rankings in search engines. We don't want to move the locations. Not to mention, we want to be able to take advantage of all the WordPress features on the signup page, which aren't available in an Amember signup page.

    As you can see, I put the single product in a hidden field to simplify the form more (squeeze page text will explain the product).

    Most of the coding is completed, as the widget does work at subsribing people up to the product. The only thing I am stuck on is getting the form field validations to work.
  8. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    I believe validation doesn't work because you aren't loading jQuery validation plugin.
    Add this to your wordpress template after jQuery:
    <script type="text/javascript" src="/amember/application/default/views/public/js/jquery/jquery.validate.js"></script>
    mail_yamungkin likes this.
  9. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    I put script in (I think in the right place), but it's still redirecting to standard signup page when a validation error occurs, instead of staying on existing page. Any suggestions greatly appreciated.
  10. secrets_art

    secrets_art aMember Pro Customer

    Joined:
    Nov 29, 2017
    Messages:
    1
    Dale, I would like to know how you fit the problem... because I want to create also a Sign Up Form.. but I don't know how... Thanks
  11. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    secrets_art - I'm no expert, but if your site in WordPress, I would start by going to your aMember signup form in admin, and temporarily adding the products you want to exist on the custom form you create.

    Then, go to your aMember signup page. View the source and copy the form php/html code and also just the javascript for this form (for form validation).

    Then, you need to get these into WordPress. You can get them in by using template files with a WP child theme. You also might want to use a widget. Maybe also widgets on pages plugin.

    If you have issues with the js, consider getting that code on the form page using something like this plugin:

    https://wordpress.org/plugins/easy-code-manager/

    Of course, you can use add classes to the form and use css in your child theme to customize the form.

    Maybe someone has a better way, but this is what I've done to get it working. Hope this helps!

Share This Page