-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Incluindo formulário do rodapé do site (#38)
* Adicionando formulário de contato no rodapé - Proposta de HTML a ser aplicada - Primeiros estilos ao formulário * Removendo placeholder quando input ou textarea está em foco * Esconder formulário em dispositivos com resolução <= 768px * Habilitar/Desabilitar botão de submit no formulário de contato - Quando todos atributos estiverem preenchidos botão de submit deve ser habilitado para envio do contato * Adicionando lógica para envio de e-mail - Foi utilizado uma solução utilizando o Google App Scrips para envio do email, baseado nesse tutorial: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server * Habilitando honeypot no formulário * Removendo javascripts do HTML * Alterando helper para asset ao invés de js * Movendo javascript para diretórios js * Alterando cor para variável * Adicionando extensão ao arquivo javascript home * Corrigindo um pequendo de digitação * Movendo estilos para breakpoint do desktop * Movendo mixin * Removendo chamada do google sheet * Alterando formulário para envio de e-mail
- Loading branch information
Gabriel Silva Pereira
authored
Jun 18, 2018
1 parent
3f1e7c3
commit fb0bfb6
Showing
5 changed files
with
266 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 "[email protected]"` | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters