diff --git a/README.md b/README.md index 1ee08f9..2eb6333 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ o servidor onde o site será instalado. export TRAVIS_PULL_REQUEST=false Se você adicionar uma chave pública SSH neste arquivo, o deploy não irá precisar -de senha. Essa chave pode ser encontrada em `~/.ssh/id_rs.pub`. Se não existir, +de senha. Essa chave pode ser encontrada em `~/.ssh/id_rsa.pub`. Se não existir, será necessário criá-la com o comando `ssh-keygen -t rsa -b 4096 -C "your_email@example.com"` diff --git a/_assets/css/footer.scss b/_assets/css/footer.scss index 6615dc6..7f3d19b 100644 --- a/_assets/css/footer.scss +++ b/_assets/css/footer.scss @@ -55,13 +55,66 @@ @include media-breakpoint-up(md) { .footer { font-size: 1.25rem; - padding: 6rem 0; .container { text-align: left; + + .contact-us { + #thankyou_message { + display: none; + p { + margin-top: 1.5rem; + } + } + + #honeypot { + display: none; + } + + label { + color: $umber; + display: block; + font-weight: bold; + text-transform: uppercase; + margin-bottom: 0em; + } + + input[type="email"], textarea { + width: 100%; + margin-bottom: 0.5em; + border: 2px solid $umber; + } + + input[type="submit"] { + display: block; + border: 2px solid $white; + padding-left: 1.5em; + padding-right: 1.5em; + background-color: transparent; + color:$white; + } + + input[type="submit"] { + float: right; + cursor: pointer; + } + + input[type="submit"]:disabled { + opacity:0.5; + cursor: not-allowed; + } + } + } + + .contact-info { + padding-left: 3em; + } + + address { + margin-top: 1.5rem } - .top-button { + .top-button, .email-contact { display: none; } @@ -71,3 +124,21 @@ } } } + +@mixin placeholder { + ::-webkit-input-placeholder {@content} + :-moz-placeholder {@content} + ::-moz-placeholder {@content} + :-ms-input-placeholder {@content} + *:focus::-webkit-input-placeholder { color:transparent; } + *:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ + *:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ + *:focus:-ms-input-placeholder { color:transparent; } +} + +@include placeholder { + font-family: $font-amatic; + color: gray; + font-weight:100; + padding-left: 0.5em; +} diff --git a/_assets/js/form-submission-handler.js b/_assets/js/form-submission-handler.js new file mode 100644 index 0000000..794693b --- /dev/null +++ b/_assets/js/form-submission-handler.js @@ -0,0 +1,130 @@ +$(document).ready(function() { + validateInputsRequired(); + $('.required').on('keyup', validateInputsRequired); +}); + +function validateInputsRequired() { + var inputsWithValues = 0; + var inputsRequired = $('.required'); + + inputsRequired.each(function() { + if ($(this).val()) { + inputsWithValues += 1; + } + }); + + if (inputsWithValues == inputsRequired.length) { + $('input[type=submit]').prop('disabled', false); + } else { + $('input[type=submit]').prop('disabled', true); + } +} + +function validEmail(email) { // see: + var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; + return re.test(email); +} + +function validateHuman(honeypot) { + if (honeypot) { //if hidden form filled up + console.log("Robot Detected!"); + return true; + } else { + console.log("Welcome Human!"); + } +} + +// get all data in form and return object +function getFormData() { + var form = document.getElementById("gform"); + var elements = form.elements; // all form elements + var fields = Object.keys(elements).filter(function(k) { + // the filtering logic is simple, only keep fields that are not the honeypot + return (elements[k].name !== "honeypot"); + }).map(function(k) { + if(elements[k].name !== undefined) { + return elements[k].name; + // special case for Edge's html collection + }else if(elements[k].length > 0){ + return elements[k].item(0).name; + } + }).filter(function(item, pos, self) { + return self.indexOf(item) == pos && item; + }); + var data = {}; + fields.forEach(function(k){ + data[k] = elements[k].value; + var str = ""; // declare empty string outside of loop to allow + // it to be appended to for each item in the loop + if(elements[k].type === "checkbox"){ // special case for Edge's html collection + str = str + elements[k].checked + ", "; // take the string and append + // the current checked value to + // the end of it, along with + // a comma and a space + data[k] = str.slice(0, -2); // remove the last comma and space + // from the string to make the output + // prettier in the spreadsheet + }else if(elements[k].length){ + for(var i = 0; i < elements[k].length; i++){ + if(elements[k].item(i).checked){ + str = str + elements[k].item(i).value + ", "; // same as above + data[k] = str.slice(0, -2); + } + } + } + }); + + // add form-specific values into the data + data.formDataNameOrder = JSON.stringify(fields); + data.formGoogleSendEmail = form.dataset.email || ""; // no email by default + + console.log(data); + return data; +} + +function handleFormSubmit(event) { // handles form submit withtout any jquery + event.preventDefault(); // we are submitting via xhr below + var data = getFormData(); // get the values submitted in the form + + if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted + return false; + } + + if( data.email && !validEmail(data.email) ) { // if email is not valid show error + var invalidEmail = document.getElementById("email-invalid"); + if (invalidEmail) { + invalidEmail.style.display = "block"; + return false; + } + } else { + var url = event.target.action; // + var xhr = new XMLHttpRequest(); + xhr.open('POST', url); + // xhr.withCredentials = true; + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + xhr.onreadystatechange = function() { + console.log( xhr.status, xhr.statusText ) + console.log(xhr.responseText); + document.getElementById("gform").style.display = "none"; // hide form + var thankYouMessage = document.getElementById("thankyou_message"); + if (thankYouMessage) { + thankYouMessage.style.display = "block"; + } + return; + }; + // url encode form data for sending as post data + var encoded = Object.keys(data).map(function(k) { + return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]) + }).join('&') + xhr.send(encoded); + } +} + +function loaded() { + console.log("Contact form submission handler loaded successfully."); + // bind to the submit event of our form + var form = document.getElementById("gform"); + form.addEventListener("submit", handleFormSubmit, false); +}; + +document.addEventListener("DOMContentLoaded", loaded, false); diff --git a/_config.yml b/_config.yml index 6b9441c..d01b510 100644 --- a/_config.yml +++ b/_config.yml @@ -33,7 +33,7 @@ contato: telefone: (11) 3032-6032 endereco_1: Rua Aspicuelta, 678, Vila Madalena endereco_2: 05433-011 - São Paulo - SP -# Configurações da ferramenta + formulario_google_app_script: https://script.google.com/macros/s/AKfycbzsH6VKhze2mrBehy5YvporLJ24IbjQUSzhykhsgalUroMiBpI/exec timezone: UTC collections: posts: diff --git a/_includes/footer.html b/_includes/footer.html index 01eb952..fd797f3 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,23 +1,66 @@ + @@ -27,11 +70,11 @@

Fale com a gente

- {% asset jquery.slides.min.js %} - {% asset home.js %} - {% asset expedicao.js %} - +{% asset jquery.slides.min %} +{% asset home.js %} +{% asset expedicao %} +{% asset form-submission-handler %} + -