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.
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}`);
})
});
}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.
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
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
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&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;
}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."
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.
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() );
}
}