Application code test.

carineLawson-surefoot-application.md

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.
• Please execute your code on DOM ready and use AJAX to handle validation.
• Styling/layout of error messaging is up to you.
• Include a few lines of a README-esque description that explains your code to a non-technical person.

Your code here:

/* Form Validation Code */
$(document).ready(function() {
  $('input[type=submit]').click(validateFields);
});

function validateFields(e) {
setTimeout(function() {
  let form = document.forms[0];
  form.elements['your-message'].value = form.elements['your-message'].value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  
  if (!form.elements['your-name'].value.match(/^[A-Za-z \-]+$/)) {
    wpcf7.notValidTip($('.wpcf7-form-control-wrap.your-name'), "You can only use the alphabet, spaces, and a dash for a name.");
  }
  }, 2000);
}


/////////////////////////

Notes

since the validation was originally done on ajax success, I put a timeout on the validation because of the form resetting everything during the successful ajax. After that I strip the html entities and give an error message reflective for the name */

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/oMM3Pe

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.
• Include a few lines of a README-esque description that explains your code to a non-technical person.

Notes

I will be using as much css as possible in order to not change the wordpress code ... I will not be changing the text for the "or" part since that can be done in wordpress */

Your code here:

/* Form Restyling Code */
/* CSS */

section#content div:nth-child(2) .container .section_clear div:first-child {
  float: right;
}
section#content div:nth-child(2) .container .section_clear > div:nth-child(2) .wpb_wrapper div:first-of-type {
  color: initial !important;
  font-weight: normal !important;
}

/////////////////////////

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."
• GIF can be anything you desire.
• Styling of messaging is up to you.
• Include a few lines of a README-esque description that explains your code to a non-technical person.

Notes

I hijacked the onsubmit again in order to save a form in the local storage, that way we can check if this particular person, whether by name or email, has already submitted this form.

Your code here:

/* Cookie Monster Code */

$(document).ready(function() {
  $('input[type=submit]').click(checkDup);
});

function checkDup() {
  let form = document.forms[0];
  
  if (localStorage.name == form.elements['your-name'].value.toLowerCase() || localStorage.email == form.elements['YourEmail'].value.toLowerCase()) {
    $('.wpcf7 form').html("Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.<img src='https://i.gifer.com/2DYS.gif' alt='HaHaHaaa'>");
  }
  else {
    localStorage.setItem('name', form.elements['your-name'].value.toLowerCase());
    localStorage.setItem('email', form.elements['YourEmail'].value.toLowerCase());
  }
}
//////////////////////////