Formulaire de contact
This commit is contained in:
Yves Gatesoupe
parent
3cd8fef0f0
commit
d6665d7d6f
@ -35,6 +35,7 @@ module.exports = function(config) {
|
||||
config.addPassthroughCopy('src/admin/previews.js');
|
||||
config.addPassthroughCopy('node_modules/nunjucks/browser/nunjucks-slim.js');
|
||||
config.addPassthroughCopy('src/robots.txt');
|
||||
config.addPassthroughCopy('src/form');
|
||||
|
||||
const now = new Date();
|
||||
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -4,6 +4,8 @@ npm-debug.*
|
||||
*.log
|
||||
*.swp
|
||||
.DS_Store
|
||||
.vscode
|
||||
*.code-workspace
|
||||
.sass-cache
|
||||
node_modules
|
||||
dist/*
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
"colors": {
|
||||
"primary": "#d6f253",
|
||||
"primary-shade": "#102538",
|
||||
"primary-glare": "#22547c",
|
||||
"primary-glare": "#f1fcbe",
|
||||
"secondary": "#282156",
|
||||
"highlight": "#d6f253",
|
||||
"light-gray": "#f1f0f7",
|
||||
|
||||
@ -15,5 +15,8 @@
|
||||
{% include "partials/components/news-list.njk" %}
|
||||
{% include "partials/components/post-list.njk" %}
|
||||
{% include "partials/components/presentation.njk" %}
|
||||
{% include "partials/components/sponsor.njk" %}
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
{% include "partials/components/sponsor.njk" %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
{% extends 'layouts/base.njk' %}
|
||||
|
||||
{# Intro content #}
|
||||
{% set introHeading = title %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" tabindex="-1">
|
||||
<article class="[ post ] [ h-entry ]">
|
||||
{% include "partials/components/intro.njk" %}
|
||||
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
|
||||
<div class="[ post__body ] [ wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
@ -177,5 +177,5 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
@ -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">
|
||||
<ol class="[ field-list ]">
|
||||
<li class="[ field-list__field-group ]">
|
||||
{{ label("What’s your name?", "name") }}
|
||||
{{ field( "text", "name", { required: true, placeholder: "Katherine Johnson", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
|
||||
</li>
|
||||
<li class="[ field-list__field-group ]">
|
||||
{{ label("What’s your email address?", "email") }}
|
||||
{{ field( "email", "email", { required: true, placeholder: "katherine@johnson.tld", autocomplete: "email" } ) }}
|
||||
</li>
|
||||
<li class="[ field-list__field-group ]">
|
||||
{{ label("What’s on your mind?", "message") }}
|
||||
{{ textarea( "message", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }}
|
||||
</li>
|
||||
<li hidden>
|
||||
<label>Don’t fill this out if you're human: <input name="bot-field" /></label>
|
||||
</li>
|
||||
</ol>
|
||||
{{ button("Send message") }}
|
||||
</form>
|
||||
<section class="[ form-container ]">
|
||||
<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>
|
||||
<div class="[ inner-wrapper ]">
|
||||
<h2 class="[ contact-heading ]">Nous contacter</h2>
|
||||
<form name="contact" method="POST" data-netlify="true" action="/preprod/form/contact-form-handler.php">
|
||||
<ol class="[ field-list ]">
|
||||
{# <li class="[ field-list__field-group ]">
|
||||
{{ label("Prénom", "forename") }}
|
||||
{{ field( "text", "forename", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
|
||||
</li> #}
|
||||
<li class="[ field-list__field-group ]">
|
||||
{{ label("Nom", "name") }}
|
||||
{{ field( "text", "name", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
|
||||
</li>
|
||||
<li class="[ field-list__field-group ]">
|
||||
{{ label("Email", "email") }}
|
||||
{{ field( "email", "email", { required: true, placeholder: "", autocomplete: "email" } ) }}
|
||||
</li>
|
||||
<li class="[ field-list__field-group ] [ full-width ]">
|
||||
{{ 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 ]">
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
{% include "icons/astrolabe_logo.svg" %}
|
||||
</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: (
|
||||
'wrap-max-width': 71.25rem,
|
||||
'wrap-inner-max-width': 62.25rem,
|
||||
'wrap-inner-max-width': 47rem,
|
||||
'md-breakpoint': 48rem
|
||||
);
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
.button {
|
||||
.button,
|
||||
.btn {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
background-color: var(--color-action-bg);
|
||||
@ -17,25 +18,28 @@
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.button:focus:hover {
|
||||
.button:focus:hover,
|
||||
.btn:focus:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button:focus:not(:hover) {
|
||||
.button:focus:not(:hover),
|
||||
.btn:focus:not(:hover) {
|
||||
outline: 1px solid var(--color-action-text);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
.button:active,
|
||||
.btn:active {
|
||||
transform: scale(.99);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1.25rem 2rem;
|
||||
padding: 1.125rem 2rem;
|
||||
border: 0;
|
||||
border-radius: 1.75rem;
|
||||
line-height: 1;
|
||||
line-height: 1.25rem;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
@ -53,5 +57,6 @@
|
||||
&.btn-secondary {
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,30 @@
|
||||
/* Form */
|
||||
|
||||
form {
|
||||
max-width: 35rem;
|
||||
.form-container {
|
||||
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 {
|
||||
@ -13,25 +36,32 @@ label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
@include apply-utility('font', 'base');
|
||||
background-color: #fff;
|
||||
background-color: var(--color-primary-glare);
|
||||
font: inherit;
|
||||
border: 1px solid var(--color-text);
|
||||
margin-top: .15rem;
|
||||
padding: .5rem 1rem;
|
||||
border: 0;
|
||||
margin-top: 1rem;
|
||||
line-height: 1.5rem;
|
||||
padding: .75rem 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
label input {
|
||||
margin: -.25rem .5rem 0 0;
|
||||
margin: -.25rem 1rem 0 0;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -47,6 +77,13 @@ legend {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn[type=submit] {
|
||||
margin-top: 3.5rem;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.field-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -54,7 +91,7 @@ legend {
|
||||
}
|
||||
|
||||
.field-list__field-group {
|
||||
margin-bottom: 2rem;
|
||||
// margin-bottom: 2rem;
|
||||
transition: transform 150ms;
|
||||
|
||||
&__description {
|
||||
@ -77,7 +114,7 @@ legend {
|
||||
margin: 0;
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
// font-weight: normal;
|
||||
}
|
||||
|
||||
.field-list__field-group__description {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user