Botón para mostrar un formulario oculto sin javascript

Programación

Un cliente me plantea la necesidad de ocultar un formulario de contacto que «pesa» mucho en la página. Lo que le propongo es poner un botón que abra el formulario de manera dinámica.

Por quitarme poner código javascript en la página, preferí hacerlo mediante css. Es un tema sencillo. Primero vemos el código html (muy simplificado)

<div id="contacto">
  <p class="btnForm"><a href="#contacto">Abrir formulario</a></p>
  <form class="formulario" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required><br>

    <label for="apellidos">Apellidos:</label>
    <input type="text" id="apellidos" name="apellidos" required><br>

    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="telefono">Teléfono:</label>
    <input type="tel" id="telefono" name="telefono" required><br>

    <label for="asunto">Asunto:</label>
    <input type="text" id="asunto" name="asunto" required><br>

    <label for="comentarios">Comentarios:</label>
    <textarea id="comentarios" name="comentarios" required></textarea><br>

    <input type="submit" value="Enviar">
  </form>
</div>

Tenemos una capa con id contacto que agrupa todo. Dentro un enlace a dicha capa en un párrafo con la capa btnForm. Finalmente el formulario al que le pondremos la clase formulario. Vamos con el CSS

#contacto .formulario, #contacto:target .btnForm {
    display: none;
}
#contacto:target .formulario {
    display: block;
}

Ocultamos el formulario por defecto y lo mostramos si el target de la página está en #contacto. De la misma manera el párrafo de mostrar formulario lo ocultamos en ese caso.

Listo. Ni una línea de javascript y totalmente funcional.

Lo mismo se podría hacer con las etiquetas details y summary pero habría que tocar más css para convertir el summary en un botón u ocultar la flechita. Adenmás me gusta la idea de que el enlace desaparezca. Pero, bueno, sería algo así

<details>
  <summary>Abrir formulario</summary>
  <form class="formulario" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required><br>

    <label for="apellidos">Apellidos:</label>
    <input type="text" id="apellidos" name="apellidos" required><br>

    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="telefono">Teléfono:</label>
    <input type="tel" id="telefono" name="telefono" required><br>

    <label for="asunto">Asunto:</label>
    <input type="text" id="asunto" name="asunto" required><br>

    <label for="comentarios">Comentarios:</label>
    <textarea id="comentarios" name="comentarios" required></textarea><br>

    <input type="submit" value="Enviar">
  </form>
</details>

Deja un comentario