Formulaire de contact

.eleventy.js

@@ -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();
 

.gitignore

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

src/_data/tokens.json

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

src/_includes/layouts/home.njk

@@ -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 %}

src/_includes/layouts/page.njk

@@ -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 ] [ 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 }}
       </div>
     </article>
   </main>
 {% endblock %}
-
-{{ content | safe }}

src/_includes/macros/form.njk

@@ -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 %}

src/_includes/partials/components/contact-form.njk

@@ -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>

src/_includes/partials/components/sponsor.njk

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

src/_includes/partials/global/site-head.njk

@@ -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>

src/form/contact-form-handler.php

@@ -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>

src/scss/_config.scss

@@ -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
 );
 

src/scss/components/_button.scss

@@ -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;
   }
 }

src/scss/components/_form.scss

@@ -1,7 +1,30 @@
 /* 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 {
@@ -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);
+  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%;
 }
 
+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 {