Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Implementierung des Kontaktformulars | Erstellung Einer Portfolio-Website Mit Bootstrap
Bootstrap-Grundlagen für Moderne Websites

bookImplementierung des Kontaktformulars

1. Kontaktformular-Sektion hinzufügen

Einen Abschnitt am unteren Rand der Seite erstellen, um das Kontaktformular aufzunehmen.

<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. Kontaktformular erstellen

Innerhalb des Formulars die Formular-Komponenten von Bootstrap verwenden, um Eingabefelder für Name, E-Mail, Nachricht usw. zu erstellen. Die Formularbeschriftungen, Platzhalter und den Button-Text nach Bedarf anpassen.

Ergebnis

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how to customize the form labels and placeholders?

What other fields can I add to the contact form?

How do I style the contact form to match my website?

Awesome!

Completion rate improved to 3.23

bookImplementierung des Kontaktformulars

Swipe um das Menü anzuzeigen

1. Kontaktformular-Sektion hinzufügen

Einen Abschnitt am unteren Rand der Seite erstellen, um das Kontaktformular aufzunehmen.

<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. Kontaktformular erstellen

Innerhalb des Formulars die Formular-Komponenten von Bootstrap verwenden, um Eingabefelder für Name, E-Mail, Nachricht usw. zu erstellen. Die Formularbeschriftungen, Platzhalter und den Button-Text nach Bedarf anpassen.

Ergebnis

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 7
some-alt