contact-form.pug

doctype html
html(lang="fr")
  head
    meta(charset="utf-8")
    title= "Formulaire de contact du site morganbancon.com"
    meta(name="description" content="Formulaire de contact")
    meta(name="author" content="Morgan BANCON")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" type="text/css" href=require("./style.sass").default)
    link(rel="stylesheet" type="text/css" href=require("./contact-form.sass").default)
    link(rel="icon" href="data:,")
  body
    -
      var contactLinkPosition = navLinks.findIndex(({ text }) => /contact/i.test(text))
    nav(id="left-side-nav-links")
      h1 Morgan BANCON
      each link, index in navLinks
        a(href=link.href style=index === contactLinkPosition ? 'text-decoration: underline' : '')= link.text
    header
      h1 Morgan BANCON
      div(id="header-links")
        each link, index in navLinks
          a(href=link.href style=index === contactLinkPosition ? 'text-decoration: underline' : '')= link.text
      div(id="burger-menu-container")
        button(id="burger-menu" class="hamburger-box")
          div(class="hamburger-top")
          div(class="hamburger-middle")
          div(class="hamburger-bottom")
    main
      div(id="overlay")
      form(onsubmit="return false;")
        div(class="float-container")
          label(for="name")= "Nom"
          input(id="name" data-placeholder="name")
        div(class="float-container")
          label(for="email")= "Email *"
          input(id="email" type="email" data-placeholder="email" required)
        div(class="float-container")
          label(for="message")= "Message"
          textarea(id="message" data-placeholder="message")
        button(class="w3-button w3-border w3-mobile button")
          span(class="button__text")="Envoyer"
        div(style="clear: right")
        div(id="message-sent-confirmation" class="message-sent-outcome w3-panel w3-green" style="display: none")
          p="Message envoyé"
          span(class="confirmation-panel-close" class="w3-xxlarge") ×
        div(id="message-sending-error" class="message-sent-outcome w3-panel w3-red" style="display: none")
          p="Une erreur est survenu et votre message n'a pas pu être transmis. Veuillez nous en excuser."
          span(class="confirmation-panel-close" class="w3-xxlarge") ×
    script(src="https://www.google.com/recaptcha/api.js?render=6Lfm1cIbAAAAAPp9ox3Pqz4mrLQb2BZXyToCTkl0")