Formulaire de contact

This commit is contained in:
Yves Gatesoupe 2020-06-23 13:44:10 +02:00
parent 3cd8fef0f0
commit d6665d7d6f
13 changed files with 192 additions and 52 deletions

View File

@ -35,6 +35,7 @@ module.exports = function(config) {
config.addPassthroughCopy('src/admin/previews.js'); config.addPassthroughCopy('src/admin/previews.js');
config.addPassthroughCopy('node_modules/nunjucks/browser/nunjucks-slim.js'); config.addPassthroughCopy('node_modules/nunjucks/browser/nunjucks-slim.js');
config.addPassthroughCopy('src/robots.txt'); config.addPassthroughCopy('src/robots.txt');
config.addPassthroughCopy('src/form');
const now = new Date(); const now = new Date();

2
.gitignore vendored
View File

@ -4,6 +4,8 @@ npm-debug.*
*.log *.log
*.swp *.swp
.DS_Store .DS_Store
.vscode
*.code-workspace
.sass-cache .sass-cache
node_modules node_modules
dist/* dist/*

View File

@ -12,7 +12,7 @@
"colors": { "colors": {
"primary": "#d6f253", "primary": "#d6f253",
"primary-shade": "#102538", "primary-shade": "#102538",
"primary-glare": "#22547c", "primary-glare": "#f1fcbe",
"secondary": "#282156", "secondary": "#282156",
"highlight": "#d6f253", "highlight": "#d6f253",
"light-gray": "#f1f0f7", "light-gray": "#f1f0f7",

View File

@ -15,5 +15,8 @@
{% include "partials/components/news-list.njk" %} {% include "partials/components/news-list.njk" %}
{% include "partials/components/post-list.njk" %} {% include "partials/components/post-list.njk" %}
{% include "partials/components/presentation.njk" %} {% include "partials/components/presentation.njk" %}
{% include "partials/components/sponsor.njk" %}
{% include "partials/components/contact-form.njk" %}
{% include "partials/components/sponsor.njk" %}
</main> </main>
{% endblock %} {% endblock %}

View File

@ -1,17 +1,11 @@
{% extends 'layouts/base.njk' %} {% extends 'layouts/base.njk' %}
{# Intro content #}
{% set introHeading = title %}
{% block content %} {% block content %}
<main id="main-content" tabindex="-1"> <main id="main-content" tabindex="-1">
<article class="[ post ] [ h-entry ]"> <article class="[ post ] [ h-entry ]">
{% include "partials/components/intro.njk" %} <div class="[ post__body ] [ wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
{{ content | safe }} {{ content | safe }}
</div> </div>
</article> </article>
</main> </main>
{% endblock %} {% endblock %}
{{ content | safe }}

View File

@ -177,5 +177,5 @@
{% endmacro %} {% endmacro %}
{% macro button( text ) %} {% macro button( text ) %}
<button type="submit" class="[ button ] [ font-base text-base weight-bold ]">{{ text }}</button> <button type="submit" class="[ btn btn-secondary ]">{{ text }}</button>
{% endmacro %} {% endmacro %}

View File

@ -1,22 +1,44 @@
{% from "macros/form.njk" import label, field, textarea, button %} {% from "macros/form.njk" import label, field, select, option, textarea, checkboxes, button %}
<form name="contact" method="POST" data-netlify="true" action="/thank-you" netlify-honeypot="bot-field"> <section class="[ form-container ]">
<ol class="[ field-list ]"> <svg aria-hidden="true" viewBox="0 0 1440 131" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M0 0h1440v131H0z"/><path d="M0 4.643l40-2.326c40-2.5 120-6.888 200 11.67 80 18.735 160 60.854 240 74.894 80 14.04 160 0 240-16.365 80-16.54 160-34.968 240-28.08 80 7.152 160 39.619 240 39.75 80-.131 160-32.598 200-49.139l40-16.365V131H0V4.643z" fill="#D6F253"/></svg>
<li class="[ field-list__field-group ]"> <div class="[ inner-wrapper ]">
{{ label("Whats your name?", "name") }} <h2 class="[ contact-heading ]">Nous contacter</h2>
{{ field( "text", "name", { required: true, placeholder: "Katherine Johnson", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }} <form name="contact" method="POST" data-netlify="true" action="/preprod/form/contact-form-handler.php">
</li> <ol class="[ field-list ]">
<li class="[ field-list__field-group ]"> {# <li class="[ field-list__field-group ]">
{{ label("Whats your email address?", "email") }} {{ label("Prénom", "forename") }}
{{ field( "email", "email", { required: true, placeholder: "katherine@johnson.tld", autocomplete: "email" } ) }} {{ field( "text", "forename", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
</li> </li> #}
<li class="[ field-list__field-group ]"> <li class="[ field-list__field-group ]">
{{ label("Whats on your mind?", "message") }} {{ label("Nom", "name") }}
{{ textarea( "message", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }} {{ field( "text", "name", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
</li> </li>
<li hidden> <li class="[ field-list__field-group ]">
<label>Dont fill this out if you're human: <input name="bot-field" /></label> {{ label("Email", "email") }}
</li> {{ field( "email", "email", { required: true, placeholder: "", autocomplete: "email" } ) }}
</ol> </li>
{{ button("Send message") }} <li class="[ field-list__field-group ] [ full-width ]">
</form> {{ label("Je vous contacte pour :", "select") }}
{{ select( "select", [
{label: "Obtenir un rendez-vous (décrivez votre projet en quelques lignes)", value: "option 1"},
{label: "Obtenir des précisions sur le statut dentrepreneur salarié", value: "option 2"},
{label: "Proposer une mission à un coopérateur", value: "option 3"},
{label: "Proposer un partenariat", value: "option 4"}
], { required: true, options_before: [""], options_after: ["Autre demande"] } ) }}
</li>
<li class="[ field-list__field-group ] [ full-width ]">
{{ label("Votre message", "message") }}
{{ textarea( "message", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }}
</li>
<li class="[ field-list__field-group ] [ full-width ]">
{{ checkboxes("", "field-checkbox-name", [ "Je souhaite être tenu au courant de lactualité Astrolabe"], { description: "" } ) }}
</li>
{# <li hidden>
<label>Dont fill this out if you're human: <input name="bot-field" /></label>
</li> #}
</ol>
{{ button("Envoyer") }}
</form>
</div>
</section>

View File

@ -0,0 +1,3 @@
<section>
<div style="background-color: #f1f0f6; height: 14rem;"></div>
</section>

View File

@ -2,7 +2,7 @@
<header role="banner" class="[ site-head ]"> <header role="banner" class="[ site-head ]">
<div class="wrapper"> <div class="wrapper">
<div class="[ site-head__inner ] [ md:box-flex space-between align-center ]"> <div class="[ site-head__inner ] [ md:box-flex space-between align-center ]">
<a href="{{ url }}" class="[ site-head__site-name ] [ leading-tight ]"> <a href="/" class="[ site-head__site-name ] [ leading-tight ]">
<span class="visually-hidden">{{ site.name }} - Home</span> <span class="visually-hidden">{{ site.name }} - Home</span>
{% include "icons/astrolabe_logo.svg" %} {% include "icons/astrolabe_logo.svg" %}
</a> </a>

View File

@ -0,0 +1,73 @@
<?php
$errors = '';
$myEmail = 'hello@ygat.es';//<----- Put Your email address here.
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$emailAddress = $_POST['email'];
$select = $_POST['select'];
$message = $_POST['message'];
if (!filter_var($emailAddress, FILTER_VALIDATE_EMAIL)) {
$errors .= "\n Error: Invalid email address $emailAddress";
}
if( empty($errors)) {
$headers = array(
"From: " .$myEmail,
"Reply-To: " .$emailAddress,
"MIME-Version: 1.0",
"Content-Type: text/html;charset=UTF-8",
"Content-Transfer-Encoding:8bit"
);
$to = $myEmail;
$emailSubject = "[Formulaire Astrolabe] Nouveau message";
switch ($select) {
case "option 1":
$purpose = "Demande de rendez-vous";
break;
case "option 2":
$purpose = "Demande de précisions sur le statut dentrepreneur salarié";
break;
case "option 3":
$purpose = "Proposition de misson";
break;
case "option 4":
$purpose = "Proposition de partenariat";
break;
default:
$purpose = "Autre demande";
}
$messageWrap = wordwrap($message, 70, "\r\n", false);
$emailBody = "Vous avez reçu un nouveau message depuis le formulaire du site Astrolabe :".
"\r\n\r\nNom: $name \r\nEmail: $emailAddress \r\nRaison: $purpose\r\n\r\n$messageWrap";
$emailBodyHTML = str_replace("\r\n", "<br>", $emailBody);
// send the email
mail($to, $emailSubject, $emailBodyHTML, implode("\r\n", $headers));
// redirect to the 'thank you' page
header("Location: /preprod/thank-you/index.html");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Contact form handler</title>
</head>
<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>
</body>
</html>

View File

@ -29,7 +29,7 @@ $stalfos-util-prefix: 'sf-';
*/ */
$metrics: ( $metrics: (
'wrap-max-width': 71.25rem, 'wrap-max-width': 71.25rem,
'wrap-inner-max-width': 62.25rem, 'wrap-inner-max-width': 47rem,
'md-breakpoint': 48rem 'md-breakpoint': 48rem
); );

View File

@ -1,4 +1,5 @@
.button { .button,
.btn {
display: inline-block; display: inline-block;
border: 0; border: 0;
background-color: var(--color-action-bg); background-color: var(--color-action-bg);
@ -17,25 +18,28 @@
filter: brightness(1.2); filter: brightness(1.2);
} }
.button:focus:hover { .button:focus:hover,
.btn:focus:hover {
outline: none; outline: none;
} }
.button:focus:not(:hover) { .button:focus:not(:hover),
.btn:focus:not(:hover) {
outline: 1px solid var(--color-action-text); outline: 1px solid var(--color-action-text);
outline-offset: -4px; outline-offset: -4px;
} }
.button:active { .button:active,
.btn:active {
transform: scale(.99); transform: scale(.99);
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 1.25rem 2rem; padding: 1.125rem 2rem;
border: 0; border: 0;
border-radius: 1.75rem; border-radius: 1.75rem;
line-height: 1; line-height: 1.25rem;
text-decoration: none; text-decoration: none;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
@ -53,5 +57,6 @@
&.btn-secondary { &.btn-secondary {
color: var(--color-white); color: var(--color-white);
background-color: var(--color-secondary); background-color: var(--color-secondary);
font-weight: 500;
} }
} }

View File

@ -1,7 +1,30 @@
/* Form */ /* Form */
form { .form-container {
max-width: 35rem; padding: 0 0 6rem;
background-color: var(--color-primary);
color: var(--color-dark);
svg > path:first-child {
fill: #f1f0f6;
}
.contact-heading {
margin: 2rem 0 4rem;
}
}
.field-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
.full-width {
grid-column: span 2;
}
} }
form br { form br {
@ -13,25 +36,32 @@ label {
font-weight: 600; font-weight: 600;
} }
input,
select {
line-height: 1;
}
input, input,
textarea, textarea,
select { select {
@include apply-utility('font', 'base'); @include apply-utility('font', 'base');
background-color: #fff; background-color: var(--color-primary-glare);
font: inherit; font: inherit;
border: 1px solid var(--color-text); border: 0;
margin-top: .15rem; margin-top: 1rem;
padding: .5rem 1rem; line-height: 1.5rem;
padding: .75rem 1.5rem;
border-radius: 1.5rem;
width: 100%; width: 100%;
} }
textarea {
resize: none;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
label input { label input {
margin: -.25rem .5rem 0 0; margin: -.25rem 1rem 0 0;
width: auto; width: auto;
vertical-align: middle; vertical-align: middle;
} }
@ -47,6 +77,13 @@ legend {
font-weight: bold; font-weight: bold;
} }
.btn[type=submit] {
margin-top: 3.5rem;
padding-left: 3rem;
padding-right: 3rem;
justify-self: start;
}
.field-list { .field-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -54,7 +91,7 @@ legend {
} }
.field-list__field-group { .field-list__field-group {
margin-bottom: 2rem; // margin-bottom: 2rem;
transition: transform 150ms; transition: transform 150ms;
&__description { &__description {
@ -77,7 +114,7 @@ legend {
margin: 0; margin: 0;
label { label {
font-weight: normal; // font-weight: normal;
} }
.field-list__field-group__description { .field-list__field-group__description {