Advertisement
  1. Web Design
  2. Forms

Cómo personalizar Contact Form 7 en WordPress con un SVG hecho a mano

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Nota: Este tutorial supone que estás en cierto modo familiarizado con WordPress y Contact Form 7.

Suponiendo que has instalado CF7 en un proyecto de WordPress, discutamos los pasos necesarios para lograr que el formulario sea compatible con este complemento.

1. Incluye sprites de SVG

Para comenzar, tenemos que incluir los sprites de SVG en nuestro proyecto.

En el tutorial anterior usamos un único elemento <svg>, que contenía todos los diferentes elementos que necesitábamos en forma de elementos <symbol>, cada uno con un id único. Cada vez que necesitábamos uno de los elementos en nuestro formulario, empleábamos un elemento <use>, haciendo referencia al id de esta forma:

Ahora, dentro de nuestro tema de WordPress, vamos a crear un archivo PHP nuevo para que contenga el marcado del sprite de SVG:

As a first step we have to create a new fileAs a first step we have to create a new fileAs a first step we have to create a new file

Luego incorporaremos este contenido SVG justo después de la etiqueta de apertura body en el header.php de nuestro tema:

Then include it in the header of our themeThen include it in the header of our themeThen include it in the header of our theme


2. Crea el formulario de contacto

El segundo paso es crear el formulario desde el interior de WordPress.

The name of our handmade SVG formThe name of our handmade SVG formThe name of our handmade SVG form

Usaremos una combinación de códigos cortos de CF7 junto con un poco de HTML personalizado.

Aquí hay dos cosas importantes:

  • En primer lugar, si ves el tutorial anterior, todos los elementos hijos del formulario están envueltos dentro de los elementos contenedores .handmade-form.container. Más tarde, cuando llamemos al formulario, adjuntaremos estas clases contenedoras directamente al elemento form.
  • En segundo lugar, no podemos recrear al 100% el marcado de las casillas de verificación personalizadas con los códigos cortos de CF7 disponibles. Para superar esta limitación, escribiremos un poco de código JavaScript personalizado. Además, para una manipulación más sencilla, la lista .checkbox-list no seguirá siendo un ul, sino que la convertiremos en un div.

Este es el código que tenemos que agregar al editor de CF7:


3. Agrega los estilos CSS para el formulario

Cambiando de tema, vamos a poner en cola un nuevo archivo CSS en el archivo functions.php de nuestro proyecto, de esta forma (es posible que tu carpeta de destino sea diferente):

Aquí colocaremos la mayoría de los estilos de la demostración estática, con algunas adiciones nuevas para los mensajes de edición que vienen con CF7.

Estos son todos los estilos necesarios:

Nota: Para este ejemplo estoy usando un tema simple. Sin embargo, dependiendo de tu tema, algunos de estos estilos pueden sobrescribirse. Teniendo en cuenta este hecho, si el formulario no tiene la apariencia esperada en tu proyecto, asegúrate de verificar los estilos de tu tema y hacer los cambios necesarios.

4. Agrega el código JavaScript

A continuación, vamos a poner en cola un nuevo archivo JavaScript en el archivo functions.php de nuestro proyecto, de esta forma (es posible que tu carpeta de destino sea diferente):

Después, en su interior, vamos a escribir el código necesario para la funcionalidad de las casillas de verificación:

Paso adicional: personaliza los mensajes de salida

Solo por diversión, agreguemos uno de nuestros SVGs personalizados a los mensajes de salida de AJAX.

Add a custom SVG to the output messageAdd a custom SVG to the output messageAdd a custom SVG to the output message

Para hacer esto no usaremos CSS en absoluto; en su lugar, aprovecharemos los eventos AJAX de Contact Form 7:


5. Llama al formulario de contacto

Por último, pero no por eso menos importante, vamos a incluir el código corto generado de CF7 en la parte de nuestro proyecto que sea deseada:

Observa las clases agregadas a través del atributo html_class.

Complementos prémium de formularios de contacto

Los complementos gratuitos son perfectos cuando estás comenzando con WordPress, pero si quieres pasar al siguiente nivel con tus sitios y ahorrar tiempo al hacerlo, considera un complemento prémium de formularios de contacto de CodeCanyon.

¡Acabas de personalizar un Contact Form 7 con SVG!

¡Y hemos terminado, amigos! En este tutorial seguimos el proceso para convertir un formulario SVG estático a algo dinámico incorporándolo en un popular complemento de formularios de WordPress. Ojalá que los pasos hayan sido claros para ti y que lo pongas en práctica.

¿Alguna vez has hecho alguna personalización para Contact Form 7?

Si tienes alguna pregunta o problema, ¡házmelo saber en los comentarios a continuación!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.