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

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