Honeypot for preventing spam on form

This commit is contained in:
Yves Gatesoupe 2020-08-17 16:29:26 +02:00
parent c4f48fab95
commit 6fb094ef29
3 changed files with 30 additions and 10 deletions
src
_includes/partials/components
form
scss/components

View File

@ -7,12 +7,12 @@
<form name="contact" method="POST" action="/form/contact-form-handler.php"> <form name="contact" method="POST" action="/form/contact-form-handler.php">
<ol class="[ field-list ]"> <ol class="[ field-list ]">
<li class="[ field-list__field-group ]"> <li class="[ field-list__field-group ]">
{{ label("Nom", "name") }} {{ label("Nom", "namezzz") }}
{{ field( "text", "name", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }} {{ field( "text", "namezzz", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
</li> </li>
<li class="[ field-list__field-group ]"> <li class="[ field-list__field-group ]">
{{ label("Email", "email") }} {{ label("Email", "emailzzz") }}
{{ field( "email", "email", { required: true, placeholder: "", autocomplete: "email" } ) }} {{ field( "email", "emailzzz", { required: true, placeholder: "", autocomplete: "email" } ) }}
</li> </li>
<li class="[ field-list__field-group ] [ full-width ]"> <li class="[ field-list__field-group ] [ full-width ]">
{{ label("Je vous contacte pour :", "select") }} {{ label("Je vous contacte pour :", "select") }}
@ -30,9 +30,15 @@
<li class="[ field-list__field-group ] [ full-width ]"> <li class="[ field-list__field-group ] [ full-width ]">
{{ checkboxes("", "subscribe", [ "Je souhaite être tenu au courant de lactualité Astrolabe"], { description: "" } ) }} {{ checkboxes("", "subscribe", [ "Je souhaite être tenu au courant de lactualité Astrolabe"], { description: "" } ) }}
</li> </li>
{# <li hidden> <!-- H o n e y p o t -->
<label>Dont fill this out if you're human: <input name="bot-field" /></label> <li aria-hidden="true">
</li> #} <label class="ohnohoney" for="name"></label>
<input class="ohnohoney" autocomplete="off" type="text" id="name" name="name" placeholder="Your name here">
</li>
<li aria-hidden="true">
<label class="ohnohoney" for="email"></label>
<input class="ohnohoney" autocomplete="off" type="email" id="email" name="email" placeholder="Your e-mail here">
</li>
</ol> </ol>
{{ button("Envoyer") }} {{ button("Envoyer") }}
</form> </form>

View File

@ -2,12 +2,16 @@
$errors = ''; $errors = '';
$myEmail = 'contact-form@astrolabe.coop'; // email address to send form content $myEmail = 'contact-form@astrolabe.coop'; // email address to send form content
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { if(empty($_POST['namezzz']) || empty($_POST['emailzzz']) || empty($_POST['message'])) {
$errors .= "\n Error: all fields are required"; $errors .= "\n Error: all fields are required";
} }
$name = $_POST['name']; if(!empty($_POST['name']) && !empty($_POST['email'])) {
$emailAddress = $_POST['email']; $errors .= "\n Error: spam";
}
$name = $_POST['namezzz'];
$emailAddress = $_POST['emailzzz'];
$select = $_POST['select']; $select = $_POST['select'];
$message = $_POST['message']; $message = $_POST['message'];
$subscribe = $_POST['subscribe']; $subscribe = $_POST['subscribe'];

View File

@ -127,6 +127,16 @@ legend {
} }
} }
.ohnohoney {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.form-container { .form-container {
svg { svg {