Hypothesis: Adding form validation to the "name" and "message" fields of the email form will increase form submissions.
Device type: Desktop only
URL: https://surefoot.me/engineer-application-sandbox-v1/
Dev notes:
- Currently, the form only checks for a valid email.
- Please execute your code on DOM ready and use javascript 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 */
<!--
Below is the form from the site. I've removed a lot of the guts
to enhance the reading experience and highlight the changes. The
main edits are the addition of id's to the form, your-name, and
your-message tags. As well as the addition of a new paragraph
tag that will be used if any validation errors occur.
-->
<form id="contact-form">
<p>
<p id="error-warning" style="color: red;"></p>
<label>Your Name * <input type="text" name="your-name" id="your-name" value="" /></label>
<label>Your Email * <input type="email" name="YourEmail" value="" /></label>
<label
>Your Message *
<textarea id="your-message" name="your-message"></textarea>
</label>
<input type="submit" value="Send" />
</p>
</form>
<!--
The JavaScript below scans the HTML document (aka the website)
for the form input fields. It then assigns names to the "your-name",
and the "your-message" fields so that they can be easily checked later.
The `form.addEventListener("submit")` listens for a 'click' of the submit
button. This allows us to preform actions when the user clicks submit.
In this case, the code checks the "your-name" and "your-message" fields
to make sure the user to a name and a message. The code also checks the
name field to make sure the user didn't add any characters that don't belong
in human names.
If any errors are found in this process, we save the reason in a box. If there
are any errors in the box at the end of the field checking, the code lets the
user know something is wrong. The code will cancel the submission and then
display to the user all the reasons why it was cancelled.
-->
<script>
const form = document.getElementById("contact-form");
const nameInput = document.getElementById("your-name");
const message = document.getElementById("your-message");
const errorWarning = document.getElementById("error-warning");
window.addEventListener("DOMContentLoaded", () => {
form.addEventListener("submit", (e) => {
let errors = [];
if (nameInput.value === "" || nameInput.value == null) {
errors.push("Name is required");
}
if (/\d|[!@#$%^&*()_+=<>;:{}[`~-]/gi.test(nameInput.value)) {
errors.push("No numbers or symbols allowed in name");
}
if (message.value === "" || message.value == null) {
errors.push("Message is required");
}
if (errors.length > 0) {
e.preventDefault();
errorWarning.innerText = errors.join(", ");
}
});
});
</script>
Hypothesis: Swapping the position of the two forms and restyling the email form will increase email form submissions.
Device type: Desktop only
URL: https://surefoot.me/engineer-application-sandbox-v1/
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.
Your code here:
/* Form Restyling Code */
<!--
Within the website, there are two divs that contain the class
`section_clear`. The second div that contains this class is the
parent div to two other divs. One contains the contact form, and
the other contains the "schedule a call" option.
This is great news! Because of this set up, we can simply apply
two styles to the parent div. The first is `display: flex;` which
allows for the children with-in the parent div to be told where
to go and how to do it. So naturally, the next style we are going
to apply does exactly that. The next style is `flex-direction:
row-reverse`. This first tells the site that we want these elements
to be displayed side by side in one row. This is also telling the site
that we want to display them in reverse order. Resulting in the
"schedule a call" section to be put first.
-->
<div class="section_clear" style="display: flex; flex-direction: row-reverse;">
<div class="form">
This div contains the contact form!
</div>
<div class="schedule-call">
This div contains a call scheduling option!
</div>
</div>
Hypothesis: Disallowing return users to resubmit the email form will decrease spam.
Device: Desktop only
URL: https://surefoot.me/engineer-application-sandbox-v1/
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.
Your code here:
/* Cookie Monster Code */
<!--
Below is the form from the site. I've removed a lot of the guts
to enhance the reading experience and highlight the changes.
The main edits are the addition of a div that contains the familiar
message as well as the gif we wish to display when the user does
look familiar. This `<div>` has a class of `d-none` which we can
assume only has the css style of `display: none;`. Which allows
the message and gif to exist without being seen by the user.
ooooooo. spooooky.
Throughout the code below, the styling class of `d-none` will be
of great importance.
-->
<div id="familiar-gif" class="d-none">
<p>Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.</p>
<iframe src="https://giphy.com/embed/3o7aDgf134NzaaHI8o" width="466" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</div>
<form id="contact-form">
<p>
<label>Your Name * <input type="text" name="your-name" value="" /></label>
<label>Your Email * <input type="email" name="YourEmail" value="" /></label>
<label
>Your Message *
<textarea name="your-message"></textarea>
</label>
<input type="submit" value="Send" />
</p>
</form>
<!--
The below JavaScript makes use of cookies. Which we can think of
as a text document where the website can hold information over
a long(er) period of time.
The first thing this code does is drudges through all the cookies.
In the process of looking at all of them, the code organizes them all
in a way where we can call upon cookies by name instead of looking
through all of them each time we need something. Which, we will later.
Next, the code also goes through the website and finds the gif div
we created up top, as well as the contact form. Then, the code assigns
a name to each of these things for later ease.
The last two actions of this code are best explained in opposite order.
Starting with the `form.addEventLIstener("submit")`. Here the code is
waiting for the user to click the submit button. When the user finally
submits the form, the code adds a cookie called `contactSubmitted` to
the cookie jar that lets the site know that the user has previously
submitted a form.
Now back to the `if (cookies.contactSubmitted)`. This `if` statement
checks to see if the `contactSubmitted` cookie is in the cookie jar.
If it is in there, the code tells the contact form to disappear and
instead show the "you look familiar" message and the fun gif.
-->
<script>
const cookies = document.cookie
.split(";")
.map((cookie) => cookie.split("="))
.reduce((acc, [key, value]) => ({ ...acc, [key.trim()]: value }), {});
const contactForm = document.getElementById("contact-form");
const familiarGIF = document.getElementById("familiar-gif");
window.addEventListener("DOMContentLoaded", () => {
if (cookies.contactSubmitted) {
familiarGIF.classList.remove("d-none");
contactForm.classList.add("d-none");
}
form.addEventListener("submit", (e) => {
document.cookie = "contactSubmitted=true";
});
});
</script>