Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Mise en œuvre du formulaire de contact | Création d'un Site Portfolio avec Bootstrap
Essentiels de Bootstrap pour les Sites Web Modernes

bookMise en œuvre du formulaire de contact

1. Ajouter la section du formulaire de contact

Créer une section en bas de la page pour accueillir le formulaire de contact.

<section id="contact" class="contact-section py-5 bg-secondary">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <h2 class="text-center mb-4 text-light">Contact Me</h2>
        <!-- Add the contact form here -->
        <form>
          <div class="mb-3">
            <label for="name" class="form-label text-light">Name</label>
            <input
              type="text"
              class="form-control"
              id="name"
              placeholder="Enter your name"
            />
          </div>
          <div class="mb-3">
            <label for="email" class="form-label text-light">Email</label>
            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-3">
            <label for="message" class="form-label text-light">Message</label>
            <textarea
              class="form-control"
              id="message"
              rows="5"
              placeholder="Enter your message"
            ></textarea>
          </div>
          <button type="submit" class="btn btn-warning">Submit</button>
        </form>
      </div>
    </div>
  </div>
</section>

2. Créer le formulaire de contact

À l'intérieur du formulaire, utiliser les composants de formulaire de Bootstrap pour créer des champs de saisie pour le nom, l'email, le message, etc. Personnaliser les libellés, les espaces réservés et le texte du bouton selon les besoins.

Résultat

index.html

index.html

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 7

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.23

bookMise en œuvre du formulaire de contact

Glissez pour afficher le menu

1. Ajouter la section du formulaire de contact

Créer une section en bas de la page pour accueillir le formulaire de contact.

<section id="contact" class="contact-section py-5 bg-secondary">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <h2 class="text-center mb-4 text-light">Contact Me</h2>
        <!-- Add the contact form here -->
        <form>
          <div class="mb-3">
            <label for="name" class="form-label text-light">Name</label>
            <input
              type="text"
              class="form-control"
              id="name"
              placeholder="Enter your name"
            />
          </div>
          <div class="mb-3">
            <label for="email" class="form-label text-light">Email</label>
            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-3">
            <label for="message" class="form-label text-light">Message</label>
            <textarea
              class="form-control"
              id="message"
              rows="5"
              placeholder="Enter your message"
            ></textarea>
          </div>
          <button type="submit" class="btn btn-warning">Submit</button>
        </form>
      </div>
    </div>
  </div>
</section>

2. Créer le formulaire de contact

À l'intérieur du formulaire, utiliser les composants de formulaire de Bootstrap pour créer des champs de saisie pour le nom, l'email, le message, etc. Personnaliser les libellés, les espaces réservés et le texte du bouton selon les besoins.

Résultat

index.html

index.html

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 7
some-alt