22. Section Contact

Avec un portfolio convaincant, il est probable que certains visiteurs de votre site web voudront vous contacter.

Actuellement, cela est déjà possible grâce aux liens des médias sociaux et à votre adresse électronique dans la section “À propos”.

Bien que cette solution soit pratique et courante, elle présente deux inconvénients, notamment en ce qui concerne le courrier électronique :

1. votre adresse électronique devient publiquement visible sur l’internet. Il se peut donc que vous receviez soudainement des courriels non sollicités de la part d’annonceurs et d’escrocs.
2. il arrive souvent que les personnes qui veulent vous contacter oublient des informations importantes dans leur demande par e-mail et vous devez écrire beaucoup de choses.

Ces deux problèmes peuvent être résolus au moyen d’un formulaire sur votre site web. D’une part, parce qu’il n’indique pas directement votre email; d’autre part, parce que vous pouvez montrer aux utilisateurs quelles informations vous attendez sous quelle forme lorsqu’ils vous contactent.

# Formulaires HTML

Les formulaires sont un sujet assez vaste dans le développement du web. Elle va de la saisie des données par les utilisateurs sur votre site web, à la validation (garantissant l’absence de fausses informations) et à la protection contre le spam (protection contre les soumissions non désirées, voire les attaques), en passant par l’évaluation et le traitement des données sur le serveur.

Il ne serait pas possible de couvrir tous ces sujets de manière compréhensible dans le cadre de ce cours. C’est pourquoi ce guide se concentre sur les aspects pertinents pour votre portefeuille.

Liens connexes

• Internetingishard - Formulaires HTML
• Mozilla - Webforms - Travailler avec les données des utilisateurs

Le HTML vous fournit de nombreuses balises et attributs pour traiter les entrées de l’utilisateur. En principe, les formulaires HTML se composent toujours d’une balise “form”, d’une ou plusieurs balises “input” et d’une balise “button” pour soumettre le formulaire.

    <form action="URL-for-processing-the-form">
      <input type="text" placeholder="Enter a text">
      <button type="submit">Submit</button>
    </form>

Note

Comme vous pouvez le voir, il n’y a pas de balise de fermeture pour les balises “input”. Ils se comportent donc comme des étiquettes qui se ferment d’elles-mêmes, comme l’étiquette “IMG”.

# Les principales balises de formulaire

Pour construire des formulaires HTML fonctionnels, vous devez connaître au moins ces balises :

tag	description
form	qui envoie tous les champs de saisie imbriqués à l’URL dans l’attribut “action” lors de la soumission
label	Texte de description pour un champ de saisie unique, qui peut être attribué dans l’attribut “for”.
input	champ de saisie à une ligne pour différents types de données
textarea	champ de saisie multiligne pour le texte
select	Liste de sélection avec une ou plusieurs options

Les attributs de formulaire les plus importants

Pour que votre formulaire se comporte comme prévu, vous devez connaître certains attributs.

Ces attributs sont importants pour la balise “form” :

attribut	signification
action	Détermine ce qui doit se passer lorsque le formulaire est soumis.
method	Détermine si quelque chose doit être envoyé (post) ou reçu (get) lors de la soumission.

sur la balise input :

attribut	signification
type	Détermine les données autorisées dans l’entrée. Les valeurs possibles de “type” comprennent “texte”, “email”, “interger”, “date”, “time”, “file”, “password”, “checkbox”, etc. Les navigateurs modernes ont des représentations et des comportements prédéfinis pour chacun de ces types. Le type “submit” existe également. Dans la plupart des cas, cependant, il est plus logique d’utiliser une balise “button” avec le type “submit” comme déclencheur pour soumettre le formulaire.
required	champ obligatoire, qui bloquera l’envoi s’il n’est pas rempli correctement
placeholder	texte de description pour un champ de saisie unique
name	nom du champ de saisie qui sera soumis lors de l’envoi du formulaire
valeur	valeur qui sera soumise lors de la soumission du formulaire
id	ID afin que, entre autres, l’étiquette sache à quelle entrée elle appartient

:hammer_pick: Contact Markup

Maintenant que vous savez les choses les plus importantes sur les formulaires HTML, vous pouvez commencer à créer votre section “Contact”.

    <!-- Insérer après la section Carrière, à l'intérieur de <main> -->
    <!-- Section contact -->
    <section id="contact">
      <div class="block_with_background">
        <div class="section_title">
          <h3>Contact</h3>
          <p class="section_subtitle">Comment me joindre</p>
        </div>
        <form class="form" action="monscript.php" role="form" method="post">
          <label for="name">Nom</label>
          <input type="text" class="form_input" id="name" name="name" placeholder="Quel est votre nom ?" required>
    
          <label for="email">Email</label>
          <input type="email" class="form_input" id="email" name="_replyto" placeholder="Quelle est votre adresse électronique ?" required>
    
          <label for="message">Message</label>
          <textarea class="form_input" rows="5" id="message" name="message" placeholder="Que voulez-vous me dire ? "required></textarea>
    
          <input type="hidden" name="_subject" id="email-subject" value="Nouvelle demande via portfolio">
          <button class="form_submit" value="submit" type="submit">Envoyer</button>
        </form>
      </div>
    </section>

Note

Il manque le script d’envoi du formulaire qui peut être réalisé de plusieurs façons.

:hammer_pick: Tâches de styles de contact

Pour que votre formulaire ait une bonne apparence, vous avez besoin du CSS approprié.

/* 
--------------------------------
Contact section
--------------------------------
*/

#contact {
    padding: 7vh 0 0;
}

.form {
    display: flex;
    flex-direction: column;
    max-width: 50rem;
    margin: 0 auto;
    padding: 0 7vw;
}

.form label {
    font-size: 0.85rem;
}

.form_input {
    padding: 1rem;
    margin: 0.5rem 0 1rem 0;
    border-radius: 0.5rem;
    resize: none; 
}

.form_input::placeholder {
    color: rgba(2,54,94,0.5);
}

.form_submit {
    align-self: center;
    padding: 1.25rem 3.5rem; 
    margin: 1rem 0;
    border-radius: 10rem;
    text-transform: uppercase;
    background: #02365E;
    color: white;
    letter-spacing: 0.025rem;
    cursor: pointer;
}

Toutes les propriétés qui ne sont pas commentées en plus, vous devriez déjà le savoir par les chapitres précédents.

# Contrôle dans le navigateur

Comme toujours, il est important de vérifier votre progression dans le navigateur. Selon le modèle, la section “Contact” devrait maintenant ressembler à ceci :

Note

Veuillez soumettre le formulaire au moins une fois sur votre page elle-même. Vous devriez recevoir un courrier de confirmation. Ce n’est qu’après que votre formulaire fonctionnera.

Relever les défis

#19 Select Dropdown (Ajouter un menu déroulant avec des choix au formulaire)