Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Implementering af Kontaktformularen | Oprettelse af et Porteføljewebsite med Bootstrap
Bootstrap-Essentials til Moderne Websites

bookImplementering af Kontaktformularen

1. Tilføj kontaktformularsektionen

Opret en sektion nederst på siden til kontaktformularen.

<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. Opret kontaktformularen

Brug Bootstraps form-komponenter i formularen til at oprette inputfelter til navn, email, besked osv. Tilpas formularens etiketter, pladsholdere og knaptekst efter behov.

Resultat

index.html

index.html

copy
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 7

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

bookImplementering af Kontaktformularen

Stryg for at vise menuen

1. Tilføj kontaktformularsektionen

Opret en sektion nederst på siden til kontaktformularen.

<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. Opret kontaktformularen

Brug Bootstraps form-komponenter i formularen til at oprette inputfelter til navn, email, besked osv. Tilpas formularens etiketter, pladsholdere og knaptekst efter behov.

Resultat

index.html

index.html

copy
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 7
some-alt