Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save imcodingideas/6214e3902077f2d7d48af27e7765d1c6 to your computer and use it in GitHub Desktop.
Save imcodingideas/6214e3902077f2d7d48af27e7765d1c6 to your computer and use it in GitHub Desktop.
Front End A/B Test Engineer Application Submission: https://surefoot.me/jobs/engineer/

Exercise 1: Form validation

Hypothesis: Adding form validation to the "name" and "message" fields of the email form will increase form submissions.

Device type: Desktop only

URL: http://surefoot.me/engineer-application-sandbox/

Dev notes:

  • Currently, the form only checks for a valid email address.
  • Please execute your code on DOM ready and use AJAX to handle validation.

Description of code:

When the document loads, I select tye engineer application form. On the submit I stop the default behavior, and continue to make my query selectors.

From there I have a function isNotValid() that takes a input i.e. this is invalid which I use later.

Later, when we get a response from the backend in the done, I am going validation here. If I submit an someone doesn't have the message textarea I return a error message isNotValid('You should say something...')

My code starts below:

The first thing on the dom I would add required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" to the email input to make sure it's a valid email. Because I cannot test this I've written what I think will work. I've made some commits for you to read. Check it out below:

This may work.
/* Form Validation Code */

  $(document).ready(function(){
    // selecting the form
    const engineerApplicationForm = $('#wpcf7-form');
    engineerApplicationForm.submit(function (e) {

        e.preventDefault();

        // the requred field selectors.
        const name = "input[name='your-name']"
        const email = "input[name='YourEmail']"
        const yourMessage = "input[name='your-message']"

        // function takes a message, and builds the dom element to be returned, and I'm reusing style here
        function isNotValid(message) {
          return (
            `<span role='alert' class='wpcf7-not-valid-tip'>${message} </span>`
          )
        }

        // I want to do a try catch here and let the validation be done here. However; I think the validation can be done in the promise. At least I think its a promise.
        $.ajax({
            type: engineerApplicationForm.attr('method'), // select post
            url: engineerApplicationForm.attr('action'),
            data: engineerApplicationForm.serialize(),
          })
          .done(() => {

            // and I'm not even sure if this would work without trying.
            // this is just an attenpt 

            // let's check if we're not empty.
            if( $(name).attr('value') === '' ) {
              return $(name).after(isNotValid('Your name is required.'))
            }

            if( $(email).attr('value') === '' ) {
              return $(email).after(isNotValid('Your Email is required.'))
            }

            if( $(yourMessage).attr('value') === '' ) {
              return $(yourMessage).after(isNotValid('You should say something...'))
            }

            // we could goto the 'thank you page' now.
            console.log(`Submission was successful. ${data}`);
          })
          .fail(() => {
            // we would need to handle the error here
            console.warn(`An error occurred. ${data}`);
          })

    });
  }

Exercise 2: Form restyling

Hypothesis: Swapping the position of the two forms and restyling the email form will increase email form submissions.

Device type: Desktop only

URL: http://surefoot.me/engineer-application-sandbox/

Mockup: https://goo.gl/cboH7f

Dev notes:

  • Swap the positions of the "schedule a call" and email forms.
  • Restyle the form to resemble the mockup but don't worry too much about pixel perfection.

Description of changes:

I had to swap the size of each column inside the container and adjust it to be offset. I removed the label text and added a placeholder.

Next I removed the width for the button and added some float and margin to align it with the form.

I removed items from the Calendly widget, updated the header to schedule a call

What it looks like locally

I played around a little bit with the css to have the team calender to take up more width. I added the rest of the content in the example just for good measure.

Below you will see everything that needs to be changed inside the section#content

My code here:

Click here to see HTML Code:
<section id="content" class="composer_content" style="background-color:#ffffff;">

    <div id="fws_5aef4619852f1" class="vc_row vc_row-fluid  animate_onoffset row-dynamic-el standard_section    " style="">
        <div style="position: absolute;top: 0;"></div>
        <div class="container  dark">
            <div class="section_clear">
                <div class="vc_col-sm-12 vc_column column_container with_padding vc_custom_1502143888153  vc_custom_1502143888153" style="padding:" data-animation="none" data-delay="">
                    <div class="wpb_wrapper">
                        <h2 style="font-size: 35px;color: #522fae;line-height: 1;text-align: left;font-family:Cabin;font-weight:700;font-style:normal" class="vc_custom_heading">We'd love to hear from you</h2>
                        <p style="font-size: 18px;line-height: 2;text-align: left;font-family:Open Sans;font-weight:400;font-style:normal" class="vc_custom_heading">We love meeting new folks and are here to provide you with more information, answer any questions you may have or discuss how we can design and implement a testing program that meets your specific needs.</p>

                        <p style="font-size: 18px;line-height: 2;text-align: left;font-family:Open Sans;font-weight:400;font-style:normal" class="vc_custom_heading">Or, if you just want to nerd out on all things data, strategy and growth, we're here for that too.</p>
                    </div>
                </div>

                <div class="vc_col-sm-4 vc_column column_container with_padding " style="padding:" data-animation="none" data-delay="">
                    <div class="wpb_wrapper">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="fws_5aef461986ac8" class="vc_row vc_row-fluid  animate_onoffset row-dynamic-el standard_section    " style="">
        <div style="position: absolute;top: 0;"></div>
        <div class="container  dark">
            <div class="section_clear">
                <div class="vc_col-sm-7 vc_column column_container with_padding vc_custom_1502143932550  vc_custom_1502143932550" style="padding:" data-animation="none" data-delay="">
                    <div class="wpb_wrapper">
                        <h2 style="font-size: 35px;color: #522fae;line-height: 2;text-align: left;font-family:Cabin;font-weight:700;font-style:normal" class="vc_custom_heading">schedule a call</h2>
                        <div class="wpb_raw_code wpb_content_element wpb_raw_html">
                            <div class="wpb_wrapper">
                                <!-- Calendly inline widget begin -->
                                <div class="calendly-inline-widget" data-url="https://calendly.com/surefoot" style="position: relative;min-width:320px;height:580px;" data-processed="true">
                                    <div class="spinner">
                                        <div class="bounce1"></div>
                                        <div class="bounce2"></div>
                                        <div class="bounce3"></div>
                                    </div>
                                    <iframe src="https://calendly.com/surefoot?embed_domain=https%3A%2F%2Fsurefoot.me&amp;embed_type=Inline" width="100%" height="100%" frameborder="0"></iframe>
                                </div>
                                <script data-cfasync="false" src="/cdn-cgi/scripts/d07b1474/cloudflare-static/email-decode.min.js"></script>
                                <script type="text/javascript" src="https://calendly.com/assets/external/widget.js"></script>
                                <!-- Calendly inline widget end -->
                            </div>
                        </div>

                    </div>
                </div>
                <div class="vc_col-sm-5 vc_column column_container with_padding vc_custom_1502143926610  vc_custom_1502143926610" style="padding:" data-animation="none" data-delay="">
                    <div class="wpb_wrapper">
                        <h2 style="font-size: 35px;color: #522fae;line-height: 2;text-align: left;font-family:Cabin;font-weight:700;font-style:normal" class="vc_custom_heading">shoot us an email</h2>
                        <div class="wpb_text_column wpb_content_element ">
                            <div class="wpb_wrapper">
                                <div role="form" class="wpcf7" id="wpcf7-f949-p950-o1" lang="en-US" dir="ltr">
                                    <div class="screen-reader-response"></div>
                                    <form action="/engineer-application-sandbox-v1/#wpcf7-f949-p950-o1" method="post" class="wpcf7-form" novalidate="novalidate" _lpchecked="1">
                                        <div style="display: none;">
                                            <input type="hidden" name="_wpcf7" value="949">
                                            <input type="hidden" name="_wpcf7_version" value="5.0.1">
                                            <input type="hidden" name="_wpcf7_locale" value="en_US">
                                            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f949-p950-o1">
                                            <input type="hidden" name="_wpcf7_container_post" value="950">
                                        </div>
                                        <p style="">
                                            <label>
                                                <br>
                                                <span class="wpcf7-form-control-wrap your-name"><input type="text" placeholder="First and Last Name *" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span></label>
                                            <br>
                                            <label>
                                                <br>
                                                <span class="wpcf7-form-control-wrap YourEmail"><input type="email" placeholder="Email address *" name="YourEmail" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span></label>
                                            <br>
                                            <label>
                                                <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" placeholder="Your message *" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span></label>
                                            <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit btn-bt default"><span class="ajax-loader"></span></p>
                                        <div class="wpcf7-response-output wpcf7-display-none"></div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>
---

I had to make some changes to the exsisting css. You can see the overrides by

Clicking here:
body .wpcf7 input.wpcf7-submit {
    border-width: 0px;
    border-style: inherit;
    /* width: 95%;  I removed width */
    align-items: left;
    background-color: #522fae;
    margin: 10px 20px 0px 0px;  /* added margin to align with the form. */
    padding: 18px;
}

body .wpcf7 p, body .wpcf7 span, body .wpcf7 div, body .wpcf7 label {
    border-width: 0px;
    border-style: inherit;
    color: #444444;
    padding: 0 0 15px 0; /* Padding was 15px */
}

/* inside the calendy widget */

.wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0; /* changed padding to 0 */
    max-width: 860px;
}

.cell {
    float: none;
    width: 100%;
    /* max-width: 500px; I ad to remove the max width to have it take the container */
    margin: auto;
    padding: 0 20px;
}
---

Exercise 3: Cookie monster

Hypothesis: Disallowing return users to resubmit the email form will decrease spam.

Device: Desktop only

URL: http://surefoot.me/engineer-application-sandbox/

Dev Notes:

  • If user has already submitted the email form, don’t allow them to resubmit. Instead, show the message "Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see."

Description of changes:

I created two functions buildContactedUsTemplate() and checkForCookie(). We can use the checkForCookie function on our form with the onSubmit. The buildContactedUsTemplate really just returns the markup. I've used the same classes and styles the website currently has.

We could use this opportunity to ask the user to share on twitter or facebook as they already taken now, two actions so they are nighly likely to take another action if it's not a bot.

What it looks like locally

My Code here:

/* Cookie Monster Code */

// function that builds the html template.
function buildContactedUsTemplate () {
  return (
    `<div class="container dark">
        <div class="section_clear">
            <div class="vc_col-sm-12 vc_column column_container with_padding vc_custom_1502143888153  vc_custom_1502143888153" style="padding:">
                <div class="wpb_wrapper">
                    <h2 style="font-size: 35px;color: #522fae;line-height: 1;text-align: left;font-family:Cabin;font-weight:700;font-style:normal" class="vc_custom_heading">Hmm, you look familiar.</h2>
                    <p style="font-size: 18px;line-height: 2;text-align: left;font-family:Open Sans;font-weight:400;font-style:normal" class="vc_custom_heading">While you're waiting for our reply, here's a GIF we think you should see.</p>
                    <div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/l0ExtLXXJ5FiBozPa" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p></p>
                </div>
            </div>
        </div>
    </div>`
  )
}

// We're going to need an onsubmit='return checkForCookie()' added to the form or with jQuery with $('form').on('submit', cb but this is the basic idea.
function checkForCookie () {
  // checks if we have a cookie hasContactedUs
  if(document.cookie.includes('hasContactedUs')) {
    // selecting the container I want to replace and calling my function
    $( 'section#content' ).html( buildContactedUsTemplate() );
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment