templates/front-office/contact/index.html.twig line 1

{% extends "front-office/_base.html.twig" %}

{% block content %}

    <div class="contact">
        <div class="meli-section-90">
            {# Breadcrumb #}
            <div class="breadcrumb">
                <a class="txt-century txt-orange txt-size12 txt-regular txt-underline" href="{{ path('home') }}">Accueil</a>
                <span  class="txt-century txt-orange txt-size12 txt-regular"> > </span>
                <span class="txt-century txt-orange txt-size12 txt-regular">Contact</span>
            </div>

            <div class="meli-center-start">
                <div class="left-box meli-width-50">
                    <h1 class="title txt-dancing txt-bold txt-size40 txt-green txt-center">Envoyez-nous un message</h1>
                    <div class="img-box meli-section-50">
                        <img src="{{ asset('assets/img/illu/phone.png') }}" alt="Contactez-nous">
                    </div>
                </div>


                <div class="right-box meli-width-50 bgc-white">
                    <form action="#" data-t="{{ path('contact_treatment') }}" method="POST" id="contactForm">
                        <div class="field">
                            <label for="lastname">Nom*</label>
                            <input type="text" name="lastname" id="lastname" placeholder="Nom" required>
                        </div>
                        <div class="field">
                            <label for="firstname">Prénom*</label>
                            <input type="text" name="firstname" id="firstname" placeholder="Prénom" required>
                        </div>
                        <div class="field">
                            <label for="email">Votre email*</label>
                            <input type="email" name="email" id="email" placeholder="Email" required>
                        </div>
                        <div class="field">
                            <label for="object">Objet de votre demande*</label>
                            <select name="object" id="object" required>
                                <option value="">Sélectionnez un sujet</option>
                                <option value="réclamation">Mes achats</option>
                                <option value="parcours apprentissage">Mon parcours de formation</option>
                                <option value="remerciement">Remerciement</option>
                                <option value="contact pro">Prise de contact professionnel</option>
                                <option value="carte cadeau">Carte cadeau</option>
                                <option value="autre">Autre</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="email">Message*</label>
                            <textarea name="message" id="message" cols="30" rows="10"></textarea>
                        </div>
                        <div class="button-box">
                            <button class="btn-base bgc-green meli-width-100">
                                Envoyer
                            </button>
                        </div>
                        <input type="hidden" name="url" value="{{ app.request.pathInfo }}" >

                    </form>

                </div>
            </div>

            <div class="contact-line-orange"></div>

            <div class="contact-pro">
                <p class="txt-dancing txt-bold txt-size40 txt-green txt-center">Vous êtes un professionnel ? </p>
                <p class="txt-century txt-bold txt-size35 txt-green txt-center">Écrivez-nous sur admin@lacabaneacoudre.fr </p>

            </div>

        </div>


    </div>



    <script>
        document.addEventListener("DOMContentLoaded",() => {
            /**
             * To show contact's form
             */
            (() => {
                let form = document.querySelector("#contactForm");

                form.setAttribute("method","POST");
                form.setAttribute("action",form.dataset.t);

            })();

            /**
             * Controle when form submit
             */
            (() => {
                let form = document.querySelector("#contactForm");

                form.addEventListener("submit",(e) => {
                    if(!e.isTrusted){
                        e.preventDefault();
                    }
                })

            })();
        });
    </script>

{% endblock %}