Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Implementación del Formulario de Contacto | Creación de un Sitio Web de Portafolio con Bootstrap
Esenciales de Bootstrap para Sitios Web Modernos

bookImplementación del Formulario de Contacto

1. Añadir la sección de formulario de contacto

Crear una sección en la parte inferior de la página para alojar el formulario de contacto.

<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. Crear el formulario de contacto

Dentro del formulario, utilizar los componentes de formulario de Bootstrap para crear campos de entrada para nombre, correo electrónico, mensaje, etc. Personalizar las etiquetas del formulario, los marcadores de posición y el texto del botón según sea necesario.

Resultado

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 7

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

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

bookImplementación del Formulario de Contacto

Desliza para mostrar el menú

1. Añadir la sección de formulario de contacto

Crear una sección en la parte inferior de la página para alojar el formulario de contacto.

<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. Crear el formulario de contacto

Dentro del formulario, utilizar los componentes de formulario de Bootstrap para crear campos de entrada para nombre, correo electrónico, mensaje, etc. Personalizar las etiquetas del formulario, los marcadores de posición y el texto del botón según sea necesario.

Resultado

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 7
some-alt