Formulaire de contact
This commit is contained in:
parent
3cd8fef0f0
commit
d6665d7d6f
@ -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
2
.gitignore
vendored
@ -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/*
|
||||||
|
@ -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",
|
||||||
|
@ -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 %}
|
||||||
|
@ -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 }}
|
|
||||||
|
@ -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 %}
|
||||||
|
@ -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("What’s 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("What’s 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("What’s 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>Don’t 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 d’entrepreneur 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 l’actualité Astrolabe"], { description: "" } ) }}
|
||||||
|
</li>
|
||||||
|
{# <li hidden>
|
||||||
|
<label>Don’t fill this out if you're human: <input name="bot-field" /></label>
|
||||||
|
</li> #}
|
||||||
|
</ol>
|
||||||
|
{{ button("Envoyer") }}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
3
src/_includes/partials/components/sponsor.njk
Normal file
3
src/_includes/partials/components/sponsor.njk
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<section>
|
||||||
|
<div style="background-color: #f1f0f6; height: 14rem;"></div>
|
||||||
|
</section>
|
@ -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>
|
||||||
|
73
src/form/contact-form-handler.php
Normal file
73
src/form/contact-form-handler.php
Normal 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 d’entrepreneur 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>
|
@ -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
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user