Como Crear un Formulario con Material Design (Responsive)

Demo Github

Los formularios son parte importante dentro de los diferentes medios o formas para comunicarse entre una organización o una celebridad con los usuarios. Material Design nos permite crear diferentes elementos siguiendo su propia base de estilos para una página web, entre estos elementos están los formularios y crear uno es fácil, solo debes entender como funciona y practicando lograrás dominarlo. En este tutorial te enseñaré a Como Crear un Formulario con Material Design (Responsive), vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a scuchar el Podcast: “Porque Algunos Desarrolladores no Terminan El Proyecto de Un Cliente” (En Spotify, Sound Cloud y Apple Podcasts)” y “ChatGPT ¿ Dejará sin empleo a los Desarrolladores ?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear un Formulario con Material Design (Responsive). 

Como Crear un Formulario con Material Design (Responsive)

Primero crearé un archivo con el nombre index.html y le agrego el siguiente código:

<div class="mdl-cell mdl-cell--8-col">
  <div class="mdl-cell mdl-cell--8-col">
    <div class="mdl-seccion-formulario mdl-card mdl-shadow--2dp">
      <div class="mdl-card__supporting-text">
        <h3 class="txt_formulario">Formulario de Contacto</h3>
        <form action="#">
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="nya" required>
            <label class="mdl-textfield__label" for="nya">Nombres y Apellidos</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="email" id="email" required>
            <label class="mdl-textfield__label" for="email">Email</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="telefono">
            <label class="mdl-textfield__label" for="telefono">Teléfono</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="asunto" required>
            <label class="mdl-textfield__label" for="asunto">Asunto</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield frmensaje">
            <textarea class="mdl-textfield__input" type="text" rows="6" id="mensaje" required></textarea>
            <label class="mdl-textfield__label" for="mensaje">Mensaje</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Aceptar </button>
        </form>
      </div>
    </div>
  </div>
</div>

Ahora pasemos al código CSS, creamos un archivo llamado estilos.css y le agregamos el siguiente código (Recuerda que puedes usar @media queries para personalizar el diseño responsive para otros tamaños de pantalla):

.mdl-seccion-formulario.mdl-card {
  width: 100%;
}

.mdl-seccion-formulario > .mdl-card__menu {
  color: #444444;
}

.txt_formulario {
  text-align: center;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  color: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  overflow: hidden;
  -webkit-transform-origin: 149px 48px;
  transform-origin: 149px 48px;
  margin: 0;
}

.frmensaje {
  width: 100%;
}

Entonces si vamos al navegador podemos que nuestro formulario se ha creado correctamente:

Al inicio de este Post he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.

Nota: Recuerda que puedes usar @media queries para personalizar el diseño responsive para otros tamaños de pantalla.

Conclusión

En este post has aprendido a como crear un formulario con Material Design, aprender a como hacerlo te servirá de base para crear formulario más complejos con Material Design.

Nota(s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.