a propos + Formcontact

assets/app/frontend/js/script.js

 $(document).ready(function () {
     menuToggle();
+    manageForm();
 });
 
 function menuToggle() {
     button.on('click', function(){
         box.toggle('slow');
     });
+}
+
+function manageForm() {
+    $('#contact_lccap').val('blop');
+    $('#contact-form-btn').on('click', function () {
+        if (checkFormValidity('#contact-form')) {
+            $('#contact-form').fadeOut(200);
+            $form = $('#contact-form');
+            $.ajax({
+                url: $form.prop('action'),
+                method: $form.prop('method'),
+                data: $form.serialize(),
+                dataType: "json",
+                success: function (response) {
+                    $('#contact-form').html('<p class="success-post">Merci pour votre message, nous vous r&eacute;pondrons dans les plus brefs d&eacute;lais.</p>');
+                    $('#contact-form').fadeIn(500);
+                }
+            });
+        }
+    });
+}
+
+function checkFormValidity(formId){
+    if(!document.getElementById(formId.substr(1)).checkValidity()){
+        document.getElementById(formId.substr(1)).reportValidity()
+        return false;
+    }else{
+        return true;
+    }
 }

assets/app/frontend/scss/about.scss

       display: inline-block;
     }
   }
+  
+  .bloc-coop-cit {
+    background-color: $green;
+    color: #FFF;
+
+    .container-coop {
+      padding-top: 100px;
+      padding-bottom: 100px;
+
+      h2 {
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 50px;
+      }
+
+      p {
+        margin-top: 50px;
+      }
+
+      .more {
+        color: $green;
+        background-color: $yellow;
+        padding: 10px;
+        font-size: 23px;
+        display: inline-block;
+        text-align: center;
+        margin-top: 30px;
+      }
+    }
+
+    .container-coeur {
+      background-color: $yellow;
+      color: $green;
+      padding-top: 100px;
+      padding-bottom: 100px;
+
+      h2 {
+        font-weight: bold;
+        margin-bottom: 50px;
+      }
+
+      .join-coeur {
+        color: $green;
+        border: 2px solid $green;
+        display: inline-block;
+        padding: 15px;
+        font-size: 22px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .container-funded {
+    padding-top: 100px;
+    padding-bottom: 100px;
+    text-align: center;
+
+    h2 {
+      color: $green;
+      font-weight: bold;
+      margin-bottom: 70px;
+      font-size: 25px;
+    }
+
+    img {
+      max-width: 80%;
+    }
+  }
 }

assets/app/frontend/scss/base.scss

 
 a:hover {
   text-decoration: none;
+}
+
+.success-post {
+  color: $green;
+  border: 2px solid $green;
+  text-align: center;
+  padding: 15px;
+  margin-top: 50px;
+  margin-bottom: 50px;
 }

assets/app/frontend/scss/contact.scss

       font-size: 37px;
     }
   }
+
+  .container-contact {
+    margin-top: 100px;
+    margin-bottom: 200px;
+
+    input, textarea {
+      color: #797677;
+      border: 1px solid #797677;
+      margin-bottom: 40px;
+      width: 100%;
+      padding: 10px;
+    }
+
+    textarea {
+      min-height: 200px;
+    }
+
+    #contact-form-btn {
+      background-color: #FFF;
+      color: $green;
+      border: 2px solid $green;
+      font-weight: bold;
+      padding: 15px;
+      font-size: 30px;
+    }
+  }
 }

assets/app/frontend/scss/header.scss

     background-color: #FFF;
     height: 150px;
     z-index: 2;
+    border-bottom: 1px solid lightgrey;
 
     .navbar-brand {
       width: 50%;

config/routes.yaml

   path: /contact
   controller: App\Controller\Frontend\DefaultController::contact
 
+app_contact_form:
+    path: /contact-form
+    controller: App\Controller\Frontend\DefaultController::contactForm
+
 app_about:
   path: /a-propos
   controller: App\Controller\Frontend\DefaultController::about

public/build/app-frontend.48212924.js

+(self["webpackChunk"] = self["webpackChunk"] || []).push([["app-frontend"],{
+
+/***/ "./assets/app/frontend/app/app.common.js":
+/*!***********************************************!*\
+  !*** ./assets/app/frontend/app/app.common.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _app_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app.scss */ "./assets/app/frontend/app/app.scss");
+/* harmony import */ var _app_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.js */ "./assets/app/frontend/app/app.js");
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+// any CSS you import will output into a single css file (app.css in this case)
+
+ // start the Stimulus application
+//import './bootstrap';
+
+/***/ }),
+
+/***/ "./assets/app/frontend/app/app.js":
+/*!****************************************!*\
+  !*** ./assets/app/frontend/app/app.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var bootstrap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js");
+/* harmony import */ var bootstrap__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(bootstrap__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _js_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/script */ "./assets/app/frontend/js/script.js");
+/* harmony import */ var _js_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_js_script__WEBPACK_IMPORTED_MODULE_1__);
+
+
+
+/***/ }),
+
+/***/ "./assets/app/frontend/js/script.js":
+/*!******************************************!*\
+  !*** ./assets/app/frontend/js/script.js ***!
+  \******************************************/
+/***/ (() => {
+
+$(document).ready(function () {
+  menuToggle();
+  manageForm();
+});
+
+function menuToggle() {
+  var box = $('.menu-content');
+  var button = $('.toggle');
+  button.on('click', function () {
+    box.toggle('slow');
+  });
+}
+
+function manageForm() {
+  $('#contact_lccap').val('blop');
+  $('#contact-form-btn').on('click', function () {
+    if (checkFormValidity('#contact-form')) {
+      $('#contact-form').fadeOut(200);
+      $form = $('#contact-form');
+      $.ajax({
+        url: $form.prop('action'),
+        method: $form.prop('method'),
+        data: $form.serialize(),
+        dataType: "json",
+        success: function success(response) {
+          $('#contact-form').html('<p class="success-post">Merci pour votre message, nous vous r&eacute;pondrons dans les plus brefs d&eacute;lais.</p>');
+          $('#contact-form').fadeIn(500);
+        }
+      });
+    }
+  });
+}
+
+function checkFormValidity(formId) {
+  if (!document.getElementById(formId.substr(1)).checkValidity()) {
+    document.getElementById(formId.substr(1)).reportValidity();
+    return false;
+  } else {
+    return true;
+  }
+}
+
+/***/ }),
+
+/***/ "./assets/app/frontend/app/app.scss":
+/*!******************************************!*\
+  !*** ./assets/app/frontend/app/app.scss ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+},
+/******/ __webpack_require__ => { // webpackRuntimeModules
+/******/ "use strict";
+/******/ 
+/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
+/******/ __webpack_require__.O(0, ["vendors-node_modules_jquery_src_jquery_js","vendors-node_modules_popper_js_dist_esm_popper_js","vendors-node_modules_bootstrap_dist_js_bootstrap_js"], () => (__webpack_exec__("./assets/app/frontend/app/app.common.js")));
+/******/ var __webpack_exports__ = __webpack_require__.O();
+/******/ }
+]);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsIm1lbnVUb2dnbGUiLCJtYW5hZ2VGb3JtIiwiYm94IiwiYnV0dG9uIiwib24iLCJ0b2dnbGUiLCJ2YWwiLCJjaGVja0Zvcm1WYWxpZGl0eSIsImZhZGVPdXQiLCIkZm9ybSIsImFqYXgiLCJ1cmwiLCJwcm9wIiwibWV0aG9kIiwiZGF0YSIsInNlcmlhbGl6ZSIsImRhdGFUeXBlIiwic3VjY2VzcyIsInJlc3BvbnNlIiwiaHRtbCIsImZhZGVJbiIsImZvcm1JZCIsImdldEVsZW1lbnRCeUlkIiwic3Vic3RyIiwiY2hlY2tWYWxpZGl0eSIsInJlcG9ydFZhbGlkaXR5Il0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0NBR0E7QUFDQSx1Qjs7Ozs7Ozs7Ozs7Ozs7OztBQ1pBOzs7Ozs7Ozs7OztBQ0FBQSxDQUFDLENBQUNDLFFBQUQsQ0FBRCxDQUFZQyxLQUFaLENBQWtCLFlBQVk7QUFDMUJDLFlBQVU7QUFDVkMsWUFBVTtBQUNiLENBSEQ7O0FBS0EsU0FBU0QsVUFBVCxHQUFzQjtBQUNsQixNQUFJRSxHQUFHLEdBQUdMLENBQUMsQ0FBQyxlQUFELENBQVg7QUFDQSxNQUFJTSxNQUFNLEdBQUdOLENBQUMsQ0FBQyxTQUFELENBQWQ7QUFDQU0sUUFBTSxDQUFDQyxFQUFQLENBQVUsT0FBVixFQUFtQixZQUFVO0FBQ3pCRixPQUFHLENBQUNHLE1BQUosQ0FBVyxNQUFYO0FBQ0gsR0FGRDtBQUdIOztBQUVELFNBQVNKLFVBQVQsR0FBc0I7QUFDbEJKLEdBQUMsQ0FBQyxnQkFBRCxDQUFELENBQW9CUyxHQUFwQixDQUF3QixNQUF4QjtBQUNBVCxHQUFDLENBQUMsbUJBQUQsQ0FBRCxDQUF1Qk8sRUFBdkIsQ0FBMEIsT0FBMUIsRUFBbUMsWUFBWTtBQUMzQyxRQUFJRyxpQkFBaUIsQ0FBQyxlQUFELENBQXJCLEVBQXdDO0FBQ3BDVixPQUFDLENBQUMsZUFBRCxDQUFELENBQW1CVyxPQUFuQixDQUEyQixHQUEzQjtBQUNBQyxXQUFLLEdBQUdaLENBQUMsQ0FBQyxlQUFELENBQVQ7QUFDQUEsT0FBQyxDQUFDYSxJQUFGLENBQU87QUFDSEMsV0FBRyxFQUFFRixLQUFLLENBQUNHLElBQU4sQ0FBVyxRQUFYLENBREY7QUFFSEMsY0FBTSxFQUFFSixLQUFLLENBQUNHLElBQU4sQ0FBVyxRQUFYLENBRkw7QUFHSEUsWUFBSSxFQUFFTCxLQUFLLENBQUNNLFNBQU4sRUFISDtBQUlIQyxnQkFBUSxFQUFFLE1BSlA7QUFLSEMsZUFBTyxFQUFFLGlCQUFVQyxRQUFWLEVBQW9CO0FBQ3pCckIsV0FBQyxDQUFDLGVBQUQsQ0FBRCxDQUFtQnNCLElBQW5CLENBQXdCLHNIQUF4QjtBQUNBdEIsV0FBQyxDQUFDLGVBQUQsQ0FBRCxDQUFtQnVCLE1BQW5CLENBQTBCLEdBQTFCO0FBQ0g7QUFSRSxPQUFQO0FBVUg7QUFDSixHQWZEO0FBZ0JIOztBQUVELFNBQVNiLGlCQUFULENBQTJCYyxNQUEzQixFQUFrQztBQUM5QixNQUFHLENBQUN2QixRQUFRLENBQUN3QixjQUFULENBQXdCRCxNQUFNLENBQUNFLE1BQVAsQ0FBYyxDQUFkLENBQXhCLEVBQTBDQyxhQUExQyxFQUFKLEVBQThEO0FBQzFEMUIsWUFBUSxDQUFDd0IsY0FBVCxDQUF3QkQsTUFBTSxDQUFDRSxNQUFQLENBQWMsQ0FBZCxDQUF4QixFQUEwQ0UsY0FBMUM7QUFDQSxXQUFPLEtBQVA7QUFDSCxHQUhELE1BR0s7QUFDRCxXQUFPLElBQVA7QUFDSDtBQUNKLEM7Ozs7Ozs7Ozs7OztBQ3hDRCIsImZpbGUiOiJhcHAtZnJvbnRlbmQuNDgyMTI5MjQuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2VsY29tZSB0byB5b3VyIGFwcCdzIG1haW4gSmF2YVNjcmlwdCBmaWxlIVxuICpcbiAqIFdlIHJlY29tbWVuZCBpbmNsdWRpbmcgdGhlIGJ1aWx0IHZlcnNpb24gb2YgdGhpcyBKYXZhU2NyaXB0IGZpbGVcbiAqIChhbmQgaXRzIENTUyBmaWxlKSBpbiB5b3VyIGJhc2UgbGF5b3V0IChiYXNlLmh0bWwudHdpZykuXG4gKi9cblxuLy8gYW55IENTUyB5b3UgaW1wb3J0IHdpbGwgb3V0cHV0IGludG8gYSBzaW5nbGUgY3NzIGZpbGUgKGFwcC5jc3MgaW4gdGhpcyBjYXNlKVxuaW1wb3J0ICcuL2FwcC5zY3NzJztcbmltcG9ydCAnLi9hcHAuanMnO1xuXG4vLyBzdGFydCB0aGUgU3RpbXVsdXMgYXBwbGljYXRpb25cbi8vaW1wb3J0ICcuL2Jvb3RzdHJhcCc7IiwiaW1wb3J0ICdib290c3RyYXAnO1xuXG5pbXBvcnQgXCIuLi9qcy9zY3JpcHRcIjtcbiIsIiQoZG9jdW1lbnQpLnJlYWR5KGZ1bmN0aW9uICgpIHtcbiAgICBtZW51VG9nZ2xlKCk7XG4gICAgbWFuYWdlRm9ybSgpO1xufSk7XG5cbmZ1bmN0aW9uIG1lbnVUb2dnbGUoKSB7XG4gICAgdmFyIGJveCA9ICQoJy5tZW51LWNvbnRlbnQnKTtcbiAgICB2YXIgYnV0dG9uID0gJCgnLnRvZ2dsZScpO1xuICAgIGJ1dHRvbi5vbignY2xpY2snLCBmdW5jdGlvbigpe1xuICAgICAgICBib3gudG9nZ2xlKCdzbG93Jyk7XG4gICAgfSk7XG59XG5cbmZ1bmN0aW9uIG1hbmFnZUZvcm0oKSB7XG4gICAgJCgnI2NvbnRhY3RfbGNjYXAnKS52YWwoJ2Jsb3AnKTtcbiAgICAkKCcjY29udGFjdC1mb3JtLWJ0bicpLm9uKCdjbGljaycsIGZ1bmN0aW9uICgpIHtcbiAgICAgICAgaWYgKGNoZWNrRm9ybVZhbGlkaXR5KCcjY29udGFjdC1mb3JtJykpIHtcbiAgICAgICAgICAgICQoJyNjb250YWN0LWZvcm0nKS5mYWRlT3V0KDIwMCk7XG4gICAgICAgICAgICAkZm9ybSA9ICQoJyNjb250YWN0LWZvcm0nKTtcbiAgICAgICAgICAgICQuYWpheCh7XG4gICAgICAgICAgICAgICAgdXJsOiAkZm9ybS5wcm9wKCdhY3Rpb24nKSxcbiAgICAgICAgICAgICAgICBtZXRob2Q6ICRmb3JtLnByb3AoJ21ldGhvZCcpLFxuICAgICAgICAgICAgICAgIGRhdGE6ICRmb3JtLnNlcmlhbGl6ZSgpLFxuICAgICAgICAgICAgICAgIGRhdGFUeXBlOiBcImpzb25cIixcbiAgICAgICAgICAgICAgICBzdWNjZXNzOiBmdW5jdGlvbiAocmVzcG9uc2UpIHtcbiAgICAgICAgICAgICAgICAgICAgJCgnI2NvbnRhY3QtZm9ybScpLmh0bWwoJzxwIGNsYXNzPVwic3VjY2Vzcy1wb3N0XCI+TWVyY2kgcG91ciB2b3RyZSBtZXNzYWdlLCBub3VzIHZvdXMgciZlYWN1dGU7cG9uZHJvbnMgZGFucyBsZXMgcGx1cyBicmVmcyBkJmVhY3V0ZTtsYWlzLjwvcD4nKTtcbiAgICAgICAgICAgICAgICAgICAgJCgnI2NvbnRhY3QtZm9ybScpLmZhZGVJbig1MDApO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgfSk7XG59XG5cbmZ1bmN0aW9uIGNoZWNrRm9ybVZhbGlkaXR5KGZvcm1JZCl7XG4gICAgaWYoIWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGZvcm1JZC5zdWJzdHIoMSkpLmNoZWNrVmFsaWRpdHkoKSl7XG4gICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGZvcm1JZC5zdWJzdHIoMSkpLnJlcG9ydFZhbGlkaXR5KClcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1lbHNle1xuICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICB9XG59IiwiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQge307Il0sInNvdXJjZVJvb3QiOiIifQ==

public/build/app-frontend.f50d644b.js

-(self["webpackChunk"] = self["webpackChunk"] || []).push([["app-frontend"],{
-
-/***/ "./assets/app/frontend/app/app.common.js":
-/*!***********************************************!*\
-  !*** ./assets/app/frontend/app/app.common.js ***!
-  \***********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _app_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app.scss */ "./assets/app/frontend/app/app.scss");
-/* harmony import */ var _app_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.js */ "./assets/app/frontend/app/app.js");
-/*
- * Welcome to your app's main JavaScript file!
- *
- * We recommend including the built version of this JavaScript file
- * (and its CSS file) in your base layout (base.html.twig).
- */
-// any CSS you import will output into a single css file (app.css in this case)
-
- // start the Stimulus application
-//import './bootstrap';
-
-/***/ }),
-
-/***/ "./assets/app/frontend/app/app.js":
-/*!****************************************!*\
-  !*** ./assets/app/frontend/app/app.js ***!
-  \****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var bootstrap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js");
-/* harmony import */ var bootstrap__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(bootstrap__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _js_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/script */ "./assets/app/frontend/js/script.js");
-/* harmony import */ var _js_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_js_script__WEBPACK_IMPORTED_MODULE_1__);
-
-
-
-/***/ }),
-
-/***/ "./assets/app/frontend/js/script.js":
-/*!******************************************!*\
-  !*** ./assets/app/frontend/js/script.js ***!
-  \******************************************/
-/***/ (() => {
-
-$(document).ready(function () {
-  menuToggle();
-});
-
-function menuToggle() {
-  var box = $('.menu-content');
-  var button = $('.toggle');
-  button.on('click', function () {
-    box.toggle('slow');
-  });
-}
-
-/***/ }),
-
-/***/ "./assets/app/frontend/app/app.scss":
-/*!******************************************!*\
-  !*** ./assets/app/frontend/app/app.scss ***!
-  \******************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-
-/***/ })
-
-},
-/******/ __webpack_require__ => { // webpackRuntimeModules
-/******/ "use strict";
-/******/ 
-/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
-/******/ __webpack_require__.O(0, ["vendors-node_modules_jquery_src_jquery_js","vendors-node_modules_popper_js_dist_esm_popper_js","vendors-node_modules_bootstrap_dist_js_bootstrap_js"], () => (__webpack_exec__("./assets/app/frontend/app/app.common.js")));
-/******/ var __webpack_exports__ = __webpack_require__.O();
-/******/ }
-]);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsIm1lbnVUb2dnbGUiLCJib3giLCJidXR0b24iLCJvbiIsInRvZ2dsZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtDQUdBO0FBQ0EsdUI7Ozs7Ozs7Ozs7Ozs7Ozs7QUNaQTs7Ozs7Ozs7Ozs7QUNBQUEsQ0FBQyxDQUFDQyxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFZO0FBQzFCQyxZQUFVO0FBQ2IsQ0FGRDs7QUFJQSxTQUFTQSxVQUFULEdBQXNCO0FBQ2xCLE1BQUlDLEdBQUcsR0FBR0osQ0FBQyxDQUFDLGVBQUQsQ0FBWDtBQUNBLE1BQUlLLE1BQU0sR0FBR0wsQ0FBQyxDQUFDLFNBQUQsQ0FBZDtBQUNBSyxRQUFNLENBQUNDLEVBQVAsQ0FBVSxPQUFWLEVBQW1CLFlBQVU7QUFDekJGLE9BQUcsQ0FBQ0csTUFBSixDQUFXLE1BQVg7QUFDSCxHQUZEO0FBR0gsQzs7Ozs7Ozs7Ozs7O0FDVkQiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmY1MGQ2NDRiLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcblxuaW1wb3J0IFwiLi4vanMvc2NyaXB0XCI7XG4iLCIkKGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbiAoKSB7XG4gICAgbWVudVRvZ2dsZSgpO1xufSk7XG5cbmZ1bmN0aW9uIG1lbnVUb2dnbGUoKSB7XG4gICAgdmFyIGJveCA9ICQoJy5tZW51LWNvbnRlbnQnKTtcbiAgICB2YXIgYnV0dG9uID0gJCgnLnRvZ2dsZScpO1xuICAgIGJ1dHRvbi5vbignY2xpY2snLCBmdW5jdGlvbigpe1xuICAgICAgICBib3gudG9nZ2xlKCdzbG93Jyk7XG4gICAgfSk7XG59IiwiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQge307Il0sInNvdXJjZVJvb3QiOiIifQ==

public/build/entrypoints.json

         "/build/vendors-node_modules_jquery_src_jquery_js.2a8ff255.js",
         "/build/vendors-node_modules_popper_js_dist_esm_popper_js.e5c0d110.js",
         "/build/vendors-node_modules_bootstrap_dist_js_bootstrap_js.cfb3e18d.js",
-        "/build/app-frontend.f50d644b.js"
+        "/build/app-frontend.48212924.js"
       ],
       "css": [
-        "/build/app-frontend.d3c2f7e8.css"
+        "/build/app-frontend.aeb3dd19.css"
       ]
     }
   }

public/build/manifest.json

   "build/sov-ticket.js": "/build/sov-ticket.df76c7a0.js",
   "build/app-backend.css": "/build/app-backend.3d882954.css",
   "build/app-backend.js": "/build/app-backend.e0a6620d.js",
-  "build/app-frontend.css": "/build/app-frontend.d3c2f7e8.css",
-  "build/app-frontend.js": "/build/app-frontend.f50d644b.js",
+  "build/app-frontend.css": "/build/app-frontend.aeb3dd19.css",
+  "build/app-frontend.js": "/build/app-frontend.48212924.js",
   "build/runtime.js": "/build/runtime.3095b250.js",
   "build/vendors-node_modules_core-js_internals_export_js.2e873f33.js": "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
   "build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js": "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",

src/Controller/Frontend/DefaultController.php

 use App\Entity\ProjectsBoost;
 use App\Entity\ProjectsInspiring;
 use App\Entity\Revolts;
+use App\Type\ContactType;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Response;
 use App\Entity\Site\Page;
+use Symfony\Component\Mailer\MailerInterface;
+use Symfony\Component\Mime\Email;
+use Symfony\Component\HttpFoundation\Request;
 
 class DefaultController extends AbstractController
 {
         );
     }
 
+    public function contactForm(Request $request, MailerInterface $mailer)
+    {
+        $form = $this->createForm(ContactType::class);
+        $form->handleRequest($request);
+        if ($form->isSubmitted() && $form->isValid() && $form->get('lccap')->getData() == 'blop') {
+            $message = '<p>De : ' . $form->get('firstname')->getData() . ' '. $form->get('lastname')->getData() .'<br />Email : ' . $form->get('email')->getData() . '<br />Objet : ' . $form->get('object')->getData(
+                ) . '</p><p>' . $form->get('message')->getData() . '</p>';
+
+            $email = (new Email())
+                ->from('charly@laclic.fr')
+                ->from('nepasrepondre@laclic.fr')
+                ->replyTo($form->get('email')->getData())
+//                ->to('agir@lacooperativedescitoyens.fr')
+                ->to('charly@laclic.fr')
+                ->subject('Message de contact sur Aux Actes Citoyens !')
+                ->text(strip_tags($message))
+                ->html($message);
+
+            $mailer->send($email);
+
+            return new JsonResponse([
+                                        'status' => 'success'
+                                    ]);
+        }
+        return new JsonResponse([
+                                    'status' => 'error'
+                                ]);
+    }
+
     public function contact()
     {
-        return $this->render('frontend/contact.html.twig');
+        $form = $this->createForm(ContactType::class, null, array(
+            'action'=> $this->generateUrl('app_contact_form')
+        ));
+
+        return $this->render('frontend/contact.html.twig', [
+            'form'=> $form->createView()
+        ]);
     }
 
     public function about()

src/Type/ContactType.php

+<?php
+
+namespace App\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class ContactType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->add('lccap', HiddenType::class)
+            ->add('firstname', TextType::class, array(
+                'attr' => array(
+                    'placeholder' => 'Prénom'
+                )
+            ))
+            ->add('lastname', TextType::class, array(
+                'attr' => array(
+                    'placeholder' => 'Nom'
+                )
+            ))
+            ->add('email', EmailType::class, array(
+                'attr' => array(
+                    'placeholder' => 'Email'
+                )
+            ))
+
+            ->add('object', TextType::class, array(
+                'attr' => array(
+                    'placeholder' => 'Objet'
+                )
+            ))
+            ->add('message', TextareaType::class, array(
+                'attr' => array(
+                    'placeholder' => 'Message'
+                )
+            ));
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+                                   // Configure your form options here
+                               ]);
+    }
+}

templates/frontend/about.html.twig

         </div>
     </div>
 
-
     <div class="container container-ressource">
         <div class="row">
             <div class="col-5">
             </div>
         </div>
     </div>
+
+    <div class="bloc-coop-cit">
+        <div class="container container-coop">
+            <div class="row justify-content-center">
+                <div class="col-7">
+                    <h2>Une démarche portée par la Coopérative des Citoyens...</h2>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-8">
+                    <img class="logo-coop" src="{{ 'assets/img/LaCoop-Img.png' }}" alt="Coopérative des Citoyens">
+                </div>
+
+                <div class="col-4">
+                    <p>
+                        Association d’éducation populaire
+                        et de facilitation en intelligence
+                        collective, la Coopérative des ci-
+                        toyens accompagne les citoyens,
+                        collectivités et acteurs de l’ESS
+                        dans leur pouvoir d’agir et leur
+                        coopération. Basée à Belfort, elle
+                        porte cette initiative avec d’autres
+                        acteurs de l’équipe coeur.
+                    </p>
+                    <a class="more" href="" title="En savoir plus">En savoir plus sur la Coop</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="container container-coeur">
+            <div class="row justify-content-center">
+                <div class="col-10">
+                    <h2>... et accompagnée par l’équipe cœur</h2>
+                </div>
+                <div class="col-5">
+                    <p>
+                        Condition essentielle à la réussite de la démarche, un
+                        réseau d’acteurs de l’emploi, de l’insertion, de la transi-
+                        tion écologique et de la création d’entreprises se mobi-
+                        lisent avec nous pour mettre en place cette démarche
+                        unique sur le Nord Franche-Comté. Vous êtes acteurs
+                        impliqués sur le territoire et vous aussi vous souhaitez
+                        participer à la mise en oeuvre de cette concertation,
+                        n’hésitez pas à nous rejoindre !
+                    </p>
+                    <a class="join-coeur" href="" title="ÉQUIPE CŒUR">REJOINDRE L’ÉQUIPE CŒUR</a>
+                </div>
+                <div class="col-5">
+                    <img class="logo-coeur" src="{{ 'assets/img/Equipe-Coeur-Img.png' }}" alt="coeur">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container container-funded">
+        <h2>Financé par :</h2>
+        <div class="row">
+            <div class="col">
+                <img src="{{ 'assets/img/Bourgogne-Franche-Comté_2016.png' }}" alt="coeur">
+            </div>
+            <div class="col">
+                <img src="{{ 'assets/img/pma-pays-de-montbeliard-agg.jpg' }}" alt="coeur">
+            </div>
+            <div class="col">
+                <img src="{{ 'assets/img/Logo_Héricourt_70.png' }}" alt="coeur">
+            </div>
+        </div>
+    </div>
 {% endblock %}

templates/frontend/contact.html.twig

             </div>
         </div>
     </div>
+
+    <div class="container container-contact">
+        {{ form_start(form, {attr: {id: "contact-form",  'action' :  path('app_contact_form')}}) }}
+        <div class="row">
+            <div class="col-4">
+                {{ form_widget(form.firstname) }}
+            </div>
+            <div class="col-8">
+                {{ form_widget(form.lastname) }}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                {{ form_widget(form.email) }}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                {{ form_widget(form.object) }}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                {{ form_widget(form.message) }}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12 text-center">
+                <button type="button" id="contact-form-btn">ENVOYER</button>
+            </div>
+        </div>
+        {{ form_end(form) }}
+
+    </div>
 {% endblock %}