Formularios

Componentes

Formularios

Los formularios son una herramienta esencial en el mundo digital, facilitando el comercio, la creación de comunidades y la productividad. Sin embargo, su diseño puede ser un desafío.

En el sistema de diseño Finis, hemos dispuesto dos modelos de formularios: uno extendido y otro compacto.

Estos formularios pueden ser utilizados para contacto. En el caso de sitios de prospección como Admisión, Postgrados y MBA, se gestiona su desarrollo a través del equipo de CRM de la universidad.

Formulario extendido


        
<form action="#" method="POST" class="uft-form">


    <h4 class="text-primary mb-4">Datos personales</h4>


    <div class="row justify-content-center">


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="nombres">Nombres (*)</label>


                <input type="text" id="nombres" name="nombres" class="uft-form-control" placeholder="Ingrese su nombre" required>


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="apellidos">Apellidos (*)</label>


                <input type="text" id="apellidos" name="apellidos" class="uft-form-control" placeholder="Ingrese sus apellidos" required>


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="rut">Rut (*)</label>


                <input type="text" id="rut" name="rut" class="uft-form-control" placeholder="11111111-1" required>


                <span class="uft-form-info">Sin puntos con dígito verificador</span>


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="fecha_nacimiento">Fecha de nacimiento (*)</label>


                <input type="date" id="fecha_nacimiento" name="fecha_nacimiento" class="uft-form-control" required>


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="email">Email (*)</label>


                <input type="email" id="email" name="email" class="uft-form-control" placeholder="correo@uft.cl" required>


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="telefono">Teléfono (*)</label>


                <input type="text" id="telefono" name="telefono" class="uft-form-control" placeholder="+56 9 1234 5678" required>


            </div>


        </div>


    </div>


    <h4 class="text-primary my-4">Antecedentes académicos</h4>


    <div class="row justify-content-center">


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="egreso">Año de egreso</label>


                <input type="number" step="1" min="1900" id="egreso" name="egreso" class="uft-form-control" placeholder="Año de egreso">


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="carrera">Carrera</label>


                <select id="carrera" name="carrera" class="uft-form-control">


                    <option value="" selected disabled>--Seleccione carrera--</option>


                    <option value="arquitectura">Arquitectura</option>


                    <option value="diseno">Diseño</option>


                    <option value="ingenieria">Ingeniería</option>


                    <option value="pedagogia">Pedagogía</option>


                </select>


            </div>


        </div>


    </div>


    <h4 class="text-primary my-4">Antecedentes laborales</h4>


    <div class="row justify-content-center">


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="empresa">Empresa</label>


                <input type="text" id="empresa" name="empresa" class="uft-form-control" placeholder="Nombre de empresa">


            </div>


        </div>


        <div class="col-5 mb-4">


            <div class="uft-form-group">


                <label for="cargo">Cargo</label>


                <input type="text" id="cargo" name="cargo" class="uft-form-control" placeholder="Cargo en la empresa">


            </div>


        </div>


    </div>


    <div class="row justify-content-center">


        <div class="col-10 mb-4">


            <button type="submit" class="uft-btn uft-btn--submit uft-btn--sm">


                Enviar


                <span class="uft-icon uft-icon--rounded">keyboard_arrow_right</span>


            </button>


        </div>


    </div>


</form>