diff --git a/contact-page.css b/contact-page.css new file mode 100644 index 0000000..17d1fe5 --- /dev/null +++ b/contact-page.css @@ -0,0 +1,95 @@ +body { + font-family: "Varela", sans-serif; + font-size: 1rem; + text-align: center; +} + +.nav-box { + padding: 1em 2em; + width: 100%; + justify-content: center; + display: flex; +} + +.navlist li { + display: inline; + list-style-type: none; + letter-spacing: 0.15em; +} + +li a { + padding: 10px; + text-decoration: none; + text-transform: uppercase; + font-size: large; + color: black; +} + +.banner-box { + display: flex; + height: 75vh; + position: relative; + background-image: url(http://cliquetechmedia.com/wp-content/uploads/2017/12/contact-us-background.jpg); + background-size: cover; + background-repeat: no-repeat; +} + +.title-msg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} + +h1 { + font-size: xx-large; + font-weight: bold; + text-transform: uppercase; +} + +h2 { + font-size: x-large; + text-transform: capitalize; +} + +.form-box { + padding: 1rem 2rem; +} + +.error-msg { + margin: 10px; + padding: 10px; + background: red; +} + +.contact-info { + display: grid; + grid-template-columns: 150px 300px 150px 300px; + grid-gap: 25px 20px; +} + +.contact-info label { + text-align: left; +} + +.contact-info textarea { + width: 100%; + padding: 30px; +} + +.button { + background-color: #616ecc; + color: white; + padding: 1rem; + border-radius: 5px; + font-size: 1.2rem; + text-transform: uppercase; + cursor: pointer; + letter-spacing: 1px; + transition: background 0.2s ease-in-out; +} + +.button:hover { + background-color: #661166; +} \ No newline at end of file diff --git a/contact-page.html b/contact-page.html new file mode 100644 index 0000000..636cf1e --- /dev/null +++ b/contact-page.html @@ -0,0 +1,83 @@ + + + + + + + + Contact Page: + + + + + + + + + + + + + +
+

Please leave your information in the form below, your contact information will not be shared to any third parties.

+
+ Error messages will show here when validating the form and field +
+
+ +
+ + + + + + + + + + + + + + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/contact-page.js b/contact-page.js new file mode 100644 index 0000000..00bad7e --- /dev/null +++ b/contact-page.js @@ -0,0 +1,116 @@ +var firstName = document.getElementById("first-name").value; +var lastName = document.getElementById("last-name").value; +var email = document.getElementById("email").value; +var compName = document.getElementById("company-name").value; +var compUrl = document.getElementById("url").value; +var phone = document.getElementById("phone").value; +var message = document.getElementById("comment").value; +var errorText = document.getElementById("error-msg"); +var text; + +errorText.style.padding = "10px"; + +firstName.addEventListener("blur", fstNameVerify, true); +lastName.addEventListener("blur", lstNameVerify, true); +email.addEventListener("blur", emailVerify, true); +compName.addEventListener("blur", compNameVerify, true); +compUrl.addEventListener("blur", compUrlVerify, true); +phone.addEventListener("blur", phoneVerify, true); +message.addEventListener("blur", messageVerify, true); + +function validateForm() { + if (firstName.value == "" || firstName.length < 3) { + firstName.style.border = "1px solid red"; + text = "Please Enter A Valid First Name"; + errorText.innerHTML = text; + firstName.focus(); + return false; + } else { + return true; + } + + if (lastName.value == "" || lastName.length < 3) { + lastName.style.border = "1px solid red"; + text = "Please Enter A Valid Last Name"; + errorText.innerHTML = text; + lastName.focus(); + return false; + } else { + return true; + } + + function emailValidate(email) { + var atpos = email.indexOf("@"); + var dotpos = email.lastIndexOf("."); + if (email.value == "" || atpos < 1 || (dotpos - atpos < 2)) { + email.style.border = "1px solid red"; + text = "Please Enter A Valid Email Address Using The Example Format"; + errorText.innerHTML = text; + email.focus(); + return false; + } else { + return true; + } + } + + + if (compName.value == "" || compName.length < 6) { + compName.style.border = "1px solid red"; + text = "Please Enter A Valid Company Name"; + errorText.innerHTML = text; + compName.focus(); + return false; + } else { + return true; + } + + function validURL(compUrl) { + var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name + '((\\d{1,3}\\.){3}\\d{1,3}))' + // ip (v4) address + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + //port + '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string + '(\\#[-a-z\\d_]*)?$', 'i'); //fragment locater + if (!pattern.test(compUrl)) { + compName.style.border = "1px solid red"; + text = "Please Enter A Valid Company Name"; + errorText.innerHTML = text; + compName.focus(); + return false; + } else { + return true; + } + } + document.write(validURL("http://qries.com")); + + + function phonenumber(phone) { + var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; + if (phone.value.match(phoneno)) { + return true; + } else { + phone.style.border = "1px solid red"; + text = "Please Enter A Valid Phone Number Using The Correct Format"; + errorText.innerHTML = text; + phone.focus(); + return false; + } + } + + if (message.value == "" || message.length < 140) { + message.style.border = "1px solid red"; + text = "Please Enter A Valid First Name"; + errorText.innerHTML = text; + message.focus(); + return false; + } +} + +function clickSubmitButton() { + var thankYou = "Thanks for your message, we will be in touch soon. "; + document.getElementById("submit-btn").innerHTML = showThankYouMsg(thankYou); +} + +function showThankYouMsg() { + +} \ No newline at end of file