CODE

Live Check if CRM Member Exists

Complete a live CRM lookup (via AJAX) to check if an email address exists after the user enters it in an email field and before the form is submitted.

v1.0.0

This can be used to check for users that already exist (along with their member status) and avoid multiple subscription attempts, account login confusion and to present helpful information to the user about their record before they complete the form submission and without them needing to be logged in.

This can be used on login forms, reset password forms, or any form that has an email address field.

IMPORTANT:
Be mindful of the type of information you present to the user with this method since the user is not authenticated and may not be the actual owner of the email address they are entering.

NOTE:
This method requires that the “Allow listing CRM contacts data” is checked in ‘Settings’ > ‘Misc’ > “GDPR Settings”.

  1. In this example, we are using the system Reset Password Request Form were we'll be checking if the email address entered is both present in the CRM and the user is subscribed to a secure zone (ie: is a member). Otherwise, we don't want the user submitting the reset password request form.

    To start, add a data attribute of data-chkeml to the form you'd like to apply this to and include an empty DIV with class msg for any response message (if you'd like to present any feedback to the user).
    We also want to add a disabled property to the submit button as default.

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
<form action="/public/api/members/request-reset-password" method="POST" data-chkeml>
    <label for="email">Email</label>
    <input type="text" name="email">
    <div class="msg" style="display:none;"></div>
   	<!-- YOUR RECAPTCHA CODE... -->
    <input type="submit" value="Send" disabled>
</form>

  2. Next, we need to create a page on your site where we'll configure our Liquid code to look up the CRM. This page will be accessed, in the background, by the AJAX in the next step.

    For this example, we've set up a page folder called `_ajax` (this is useful for if we later add additional AJAX page functionality).

    Now, in the `_ajax` page folder, add a page called `checkuser` and add the below code (using the code view editor).
    The page should then be accessible at `/_ajax/checkuser`.

    TIP:
    We suggest you disable this page from Site Search and from Search Engines to avoid it being publically accessed.

    The Liquid component below returns a matching CRM record. Therefore, you can add any additional record data to the page, like we have done here, for further functionality you may need.

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
{% assign isExists = false %}
{% assign isMember = false %}
{% if request.request_url.params.chkemail != null %}
{% component type: "CRMContacts", layout: "", filterBy: "email", filterValue: "{{request.request_url.params.chkemail}}", includeSecureZonesInfo: "true", collectionVariable: "crmContact", limit: "1" %}
{% if crmContact.items.size > 0 and crmContact.items[0].email == request.request_url.params.chkemail %}
    {% assign isExists = true %}
    {% if crmContact.items[0].securezones != '' %}
    {% assign isMember = true %}
    {% else %}
    {% assign isMember = false %}
    {% endif %}
{% else %}
{% assign isMember = false %}
{% endif %}
{% endif %}
<div id="memberData" style="display:none;">
    <div data-member-exists>{{isExists}}</div>
    <div data-member-status>{{isMember}}</div>
</div>

  3. Lastely, add the following Javascript to your site's JS file.

    NOTE:
    This script uses jQuery, so ensure you have jQuery installed and this script is loaded after your jQuery reference.

    You can add to this script and perform different functions depending on the data you call in from the previous step.

    //## Treehouse CODE v1.0.0 ##
$(document).ready(function () {
    var $form = $('[data-chkeml]');
    var $msg = $form.find('.msg');
    var $submit = $form.find('[type="submit"]');
    
    function checkUser() {
    
        checkEmail = $form.find('[name="email"]').val();
        
        $msg.load('/_ajax/checkuser?chkemail=' + checkEmail + ' #memberData' , function(response, status, xhr) {
            if ( status == "error" ) {
                //enable submit
                //console log error
                $submit.prop('disabled', false);
                console.log( "There was an error checking member. " + xhr.status + " " + xhr.statusText );
            } else {
                var isExists = $msg.find('[data-member-exists]').text();
                var isMember = $msg.find('[data-member-status]').text();
                
                if ( isMember == 'true' ) {
                    //enable submit
                    //clear and hide msg
                    $submit.prop('disabled', false);
                    $msg.html('').removeClass('error').fadeOut();
                } else {
                    //disable submit
                    //show no user msg
                    $submit.prop('disabled', true);
                    $msg.html('Sorry, member can not be found.').addClass('error').fadeIn();
                }
            }
        });
    };

    $form.find('input[name="email"]').on('blur', function() {
        //call the checking function when the user loses focus on the email field
        checkUser();
    });
});

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.