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

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 :

tagdescription

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" :

attributsignification

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 :

attributsignification

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

⚒️ 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.

⚒️ 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)

Dernière mise à jour