Un nuevo formulario para completar la compra

Clase 19 de 21 • Curso de Bootstrap 4

Harold David Avila Sabogal

student•

Kelvin Omar Silvestre Moises

student•

Gracias, me serve de inspiracion.

Jose L. Figueroa

student•

Les comparto mi modal form :

<div class="modal fade" id="modalCompra" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Adquirir Tickets</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="was-validated">
          <div class="form-row">
            <div class="col form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                <div class="invalid-feedback">
                  Tu Username es incorrecto, ingrésalo nuevamente
                </div>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col form-group">
              <label class="text-platzi-modal" for="inputPassword5">Password</label>
              <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" placeholder="Password">
              <div class="invalid-feedback">
                Tu passwaor es incorrecto
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col form-group">
              <div class="form-check">
                <div class="custom-control custom-checkbox mb-3">
                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
                  <label class="custom-control-label" for="customControlValidation1">Acepto los términos y condicones del sorteo</label>
                  <div class="invalid-feedback">  Debes aceptar los términos y condiciones para acceder al sorteo.</div>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="alert alert-success" role="alert">
          Recibirás un correo de confirmación si sales sorteado.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-platzi">Comprar</button>
      </div>
    </div>
  </div>
</div>

Sebastián Canessa

student•

buen aporte

Noe de Jesus Muñoz Martinez

student•

Muy buen aporte, te quedo muy bien tu modal, felicidades!!!

Wilson Marino Pablo Mendez

student•

Hice algunas modificaciones en el modal

Wilson Marino Pablo Mendez

student•

Harold David Avila Sabogal

student•

Muchas gracias por la información que buen aporte

Fernando Galdós

student•

Codigo Completo

<form action="">
             <div class="row">
               <div  class="form-label col">
                 <div class="input-group mb-3">
                   <span class="input-group-text" id="basic-addon1">@</span>
                   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                 </div>
               </div>
             </div>
           </form>
           <!-- Alerta -->
           <div class="alert alert-warning" role="alert">
             Recibiras un correo de confirmacion si ganas el Sorteo!
           </div>
           <!-- Alerta -->

Luis Alejandro Vera Hernandez

student•

Gracias

Randy Guerra

student•

Gracias,ha servido mucho tus aportes,sin duda. Actualmente en el 2021.

Andrés David Loaiza Zamudio

student•

Brutal curso, he aprendido algo que me llamaba la atención hace mucho y pues sería genial especializarse en esos frameworks que facilitan los procesos de maquetación 🏆

Kathion Vega

student•

en el div con class: modal-body agregamos la etiqueta form y dentro de esta se inserta otro div con clase: form-row y posteriormente otro div mas con class: form-group col

Pamela Cinthya Torres Gutiérrez

student•

muy buena clase y la manera de utilizar

Jorge Fidel Zubieta Choque

student•

se termino! y me encanto!!

Kleiver Oscar Marcano Torres

student•

Así lo hice sencillo

Jimmy Buriticá Londoño

student•

Definitivamente Bootstrap lleva nuestros sitios web a otro nivel.

Cristobal Nyram

student•

Hace que nuestro sitio se mas rapido de countruir y sin tanto codigo

Platzi Team

student•

Genial, gran curso, muy importante

Franz H. Flores

student•

Al agregar un nuevo formulario, tendríamos 2 formularios en la misma pagina , si se hiciera un submit , se enviaría los datos de ambos formularios?

Jhonatan David Ibarra Lavado

student•

no, cada formulario es independiente

Daiana Isabel Gamez Vivas

student•

Adaptando el modal con un formulario relacionado:

Julia Gabriela Nieva Paredes

student•

Excelente curso, no hay más que decir

Said Leonardo Uceda Paredes

student•

¿El modal puede ser responsive?

Kleiver Oscar Marcano Torres

student•

Así lo hice sencillo

Fredy Frasser

student•

Christian David Sánchez

student•

Que otro rollo bootstrap :)

Alejandro Sanchez

student•

Seria interesante hacer esta misma pagina con django por ejemplo.

Juan Camilo Castillo Camacho

student•

Bootstrap es demasiado útil y práctico. Quiero profundizar más en esto.

<div class="modal fade" id="modalCompra" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Adquirir Tickets</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="was-validated">
          <div class="form-row">
            <div class="col form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                <div class="invalid-feedback">
                  Tu Username es incorrecto, ingrésalo nuevamente
                </div>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col form-group">
              <label class="text-platzi-modal" for="inputPassword5">Password</label>
              <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" placeholder="Password">
              <div class="invalid-feedback">
                Tu passwaor es incorrecto
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col form-group">
              <div class="form-check">
                <div class="custom-control custom-checkbox mb-3">
                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
                  <label class="custom-control-label" for="customControlValidation1">Acepto los términos y condicones del sorteo</label>
                  <div class="invalid-feedback">  Debes aceptar los términos y condiciones para acceder al sorteo.</div>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="alert alert-success" role="alert">
          Recibirás un correo de confirmación si sales sorteado.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-platzi">Comprar</button>
      </div>
    </div>
  </div>
</div>

<form action="">
             <div class="row">
               <div  class="form-label col">
                 <div class="input-group mb-3">
                   <span class="input-group-text" id="basic-addon1">@</span>
                   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                 </div>
               </div>
             </div>
           </form>
           <!-- Alerta -->
           <div class="alert alert-warning" role="alert">
             Recibiras un correo de confirmacion si ganas el Sorteo!
           </div>
           <!-- Alerta -->

Un nuevo formulario para completar la compra

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso