➜ Sección Contactos

¿Cómo implementar la sección Contacto con Bootstrap de una Web?

    <div class="container">

        <div class="row mt-5 mb-5 justify-content-center">

            <div class="col-sm-8 pt-5 pb-5">

                <h1 class="text-center">CONTACTO</h1>

                <h2 class="mt-5">Datos</h2>

                <ul>

                    <li><strong>Razón social</strong> Body Styles</li>

                    <li><strong>Celular</strong> 000 000 000</li>

                    <li><strong>Email</strong> empresa@bodystyles.com</li>

                    <li><strong>Dirección</strong>Av. America 2023</li>


                </ul>


                <h2 class="mt-5">Formulario</h2>

                <form class="needs-validation" novalidate>

                    <div class="form-row">

                      <div class="col-md-6 mb-3">

                        <label for="validationCustom01">Nombre</label>

                        <input type="text" class="form-control" id="validationCustom01" value="Mark" required>

                        <div class="valid-feedback">

                          Looks good!

                        </div>

                      </div>

                      <div class="col-md-6 mb-3">

                        <label for="validationCustom02">Apellido</label>

                        <input type="text" class="form-control" id="validationCustom02" value="Otto" required>

                        <div class="valid-feedback">

                          Looks good!

                        </div>

                      </div>

                    </div>

                    <div class="form-row">

                      <div class="col-md-6 mb-3">

                        <label for="validationCustom03">Ciudad</label>

                        <input type="text" class="form-control" id="validationCustom03" required>

                        <div class="invalid-feedback">

                          Please provide a valid city.

                        </div>

                      </div>

                     

                    </div>

                    <div class="form-row">

                        <div class="col-md-12 mb-3">

                          <label for="validationCustom03">Mensaje</label>

                          <textarea name="mensaje" class="form-control">


                          </textarea>

                         

                        </div>

                       

                      </div>

                    <div class="form-group">

                      <div class="form-check">

                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>

                        <label class="form-check-label" for="invalidCheck">

                          Terminos y condiciones

                        </label>

                       

                      </div>

                    </div>

                    <button class="btn btn-primary" type="submit">Enviar</button>

                  </form>

                 

                  <script>

                  // Example starter JavaScript for disabling form submissions if there are invalid fields

                  (function() {

                    'use strict';

                    window.addEventListener('load', function() {

                      // Fetch all the forms we want to apply custom Bootstrap validation styles to

                      var forms = document.getElementsByClassName('needs-validation');

                      // Loop over them and prevent submission

                      var validation = Array.prototype.filter.call(forms, function(form) {

                        form.addEventListener('submit', function(event) {

                          if (form.checkValidity() === false) {

                            event.preventDefault();

                            event.stopPropagation();

                          }

                          form.classList.add('was-validated');

                        }, false);

                      });

                    }, false);

                  })();

                  </script>

                <h2 class="mt-5">Ubicación</h2>


                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3827.5118212524794!2d-71.53909039978838!3d-16.39881229242326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91424a59ffae2999%3A0xc419f49d1f9cd270!2sPlaza%20de%20Armas%20de%20Arequipa!5e0!3m2!1ses-419!2spe!4v1594307956250!5m2!1ses-419!2spe" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>      </div>        </div>

    </div>

Descripción del Código:

Este fragmento de código HTML presenta una sección de "Contacto" utilizando Bootstrap 4.5, estructurando la información de contacto, un formulario de contacto, y un mapa integrado de Google Maps. Aquí está el desglose:

1. Contenedor Principal (<div class="container">):

   • Encapsula el contenido de la sección "Contacto" dentro de un contenedor que ajusta el ancho del contenido y proporciona márgenes adecuados.

2. Fila de Contenido (<div class="row mt-5 mb-5 justify-content-center">):

   • row: Define una fila para organizar columnas.
   • mt-5 mb-5: Añade márgenes superiores e inferiores para separar la sección de otras partes del contenido.
   • justify-content-center: Centra la columna horizontalmente dentro de la fila.

3. Columna de Contenido (<div class="col-sm-8 pt-5 pb-5">):

   • Ocupa 8/12 del ancho en dispositivos pequeños y superiores.
   • pt-5 pb-5: Añade padding superior e inferior para espaciar el contenido dentro de la columna.

4. Datos de Contacto (<h2> y <ul>):

   • <h1 class="text-center">CONTACTO</h1>: Título principal centrado para la sección de contacto.
   • <h2 class="mt-5">Datos</h2>: Subtítulo para los datos de contacto.
   • <ul>: Lista no ordenada que presenta los datos de contacto como razón social, celular, email y dirección.

5. Formulario de Contacto (<form class="needs-validation" novalidate>):

   • needs-validation: Clase para aplicar estilos de validación de Bootstrap.
   • novalidate: Desactiva la validación predeterminada del navegador para usar la validación personalizada de Bootstrap.
   • form-row: Agrupa los campos del formulario en filas.
   • Campos de texto (<input>) y área de texto (<textarea>) con etiquetas (<label>) y feedback de validación (<div class="valid-feedback"> y <div class="invalid-feedback">).
   • form-check: Permite seleccionar opciones, en este caso, aceptar términos y condiciones.
   • btn btn-primary: Botón estilizado con Bootstrap para enviar el formulario.

6. JavaScript para Validación del Formulario:

   • Código JavaScript para manejar la validación del formulario y evitar el envío si hay campos inválidos.

7. Ubicación (<iframe>):

   • iframe: Integración de Google Maps para mostrar la ubicación de la empresa.
   • src: URL del mapa con coordenadas específicas.