Cómo personalizar Contact Form 7 en WordPress con un SVG hecho a mano

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Nota: Este tutorial supone que está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 único elemento <svg>, que contenía todos los diferentes elementos que necesitábamos en forma de elementos <symbol>, cada uno con un id único. Cada vez que necesitábamos uno de los elementos en nuestro formulario, empleábamos un elemento <use>, haciendo referencia al id de esta forma:

1	<svg>
2	<use xlink:href="#checkbox_empty"></use>
3	</svg>

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 file

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

Then 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.

Usaremos una combinación de códigos cortos de CF7 junto con un poco de HTML personalizado.

Aquí hay dos cosas importantes:

En primer lugar, si ves el tutorial anterior, todos los elementos hijos del formulario están envueltos dentro de los elementos contenedores .handmade-form y .container. Má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 verificación personalizadas con los códigos cortos de CF7 disponibles. Para superar esta limitación, escribiremos un poco de código JavaScript personalizado. Además, para una manipulación más sencilla, la lista .checkbox-list no seguirá siendo un ul, sino que la convertiremos en un div.

Este es el código que tenemos que agregar al editor de CF7:

<h1>Contact us</h1>
<ul>
  <li class="grid grid-2">
    <div class="form-wrapper">
      [text* your-name placeholder "Name*"]
      <svg>
        <use xlink:href="#input1"></use>
      </svg>
    </div>
    <div class="form-wrapper">
      [text* your-surname placeholder "Surname*"]
      <svg>
        <use xlink:href="#input2"></use>
      </svg>
    </div>
  </li>
  <li class="grid grid-2">
    <div class="form-wrapper">
      [email* your-email placeholder "Email*"]
      <svg>
        <use xlink:href="#input3"></use>
      </svg>
    </div>
    <div class="form-wrapper">
      [tel your-phone placeholder "Phone"]
      <svg>
        <use xlink:href="#input4"></use>
      </svg>
    </div>
  </li>
  <li class="form-wrapper">
    [textarea your-message placeholder "Message"]
    <svg>
      <use xlink:href="#textarea"></use>
    </svg>
  </li>
  <li class="form-wrapper">
    <fieldset>
      <legend>Select preferred method of contact</legend>
      <div class="checkbox-list">
        [radio contact-method default:1 "email" "phone"]   
      </div>
      <svg>
        <use xlink:href="#fieldset"></use>
      </svg>
    </fieldset>
  </li>
  <li class="grid grid-3">
    <div class="form-wrapper">
      <button type="submit" class="wpcf7-form-control wpcf7-submit">SUBMIT</button>
      <svg>
        <use xlink:href="#button"></use>
      </svg>
    </div>
    <div class="form-wrapper">
      <button type="reset">RESET</button>
      <svg>
        <use xlink:href="#button"></use>
      </svg>
    </div>
  </li>
</ul>

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):

1	wp_enqueue_style( 'customcss', get_template_directory_uri() . '/assets/css/custom.css' );

Aquí colocaremos la mayoría de los estilos de la demostración estática, con algunas adiciones nuevas para los mensajes de edición que vienen con CF7.

Estos son todos los estilos necesarios:

/* RESET RULES & INITIAL SET UP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: "Summer";
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Summer%20Font%20Regular.woff);
}

@font-face {
  font-family: "Summer Bold";
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Summer%20Font%20Bold.woff);
}

:root {
  --white: #fff;
  --red: #e31b23;
}

* {
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
  background: none;
  outline: none;
}

[type="radio"] {
  position: absolute;
  left: -9999px;
}

button,
label {
  cursor: pointer;
}

textarea {
  resize: none;
}

ul {
  list-style: none;
}

body {
  font: 32px/1.2 "Summer";
  margin: 1.5rem 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handmade-form h1,
.handmade-form li,
.handmade-form .grid > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

.handmade-form .form-wrapper,
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
  position: relative;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
  z-index: 1;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button {
  width: 100%;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form fieldset {
  padding: 15px;
}

.handmade-form textarea {
  height: 200px;
  vertical-align: top;
}

.handmade-form legend {
  padding-top: 15px;
  margin: 0 auto;
}

.handmade-form ::placeholder {
  color: inherit;
  /*Fix opacity issue on Firefox*/
  opacity: 1;
}

.handmade-form .form-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.handmade-form button {
  font-family: "Summer Bold";
  color: var(--white);
  padding: 5px 10px;
}


/* RADIO BUTTONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handmade-form .checkbox-list {
  display: flex;
  justify-content: center;
}

.handmade-form .checkbox-list .first {
  margin-right: 50px;
}

.handmade-form .checkbox-list label svg {
  top: 50%;
  left: -25px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

.handmade-form .checkbox-list label .checkmark {
  /*the value of the stroke-* properties comes from the getTotalLength() method*/
  stroke-dasharray: 233.69552612304688;
  stroke-dashoffset: 233.69552612304688;
  transition: stroke-dashoffset 0.5s linear;
}

.handmade-form [type="radio"]:checked + label .checkmark {
  stroke-dashoffset: 0;
}


/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 600px) {
  .handmade-form .grid {
    display: grid;
    grid-gap: 1.5rem;
  }

  .handmade-form .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .handmade-form .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .handmade-form .grid > *:not(:last-child) {
    margin-bottom: 0;
  }
}


/* OUTPUT MESSAGES CF7
–––––––––––––––––––––––––––––––––––––––––––––––––– */
span.wpcf7-form-control-wrap {
  display: block;
}

span.wpcf7-not-valid-tip {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 24px;
}

div.wpcf7-validation-errors, 
div.wpcf7-acceptance-missing,
div.wpcf7-mail-sent-ng, 
div.wpcf7-aborted,
div.wpcf7-mail-sent-ok {
  border: none;
  color: var(--red);
  margin: 0;
}

div.wpcf7-mail-sent-ok {
  color: green;
}

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, asegúrate de verificar los estilos de tu tema y hacer los cambios necesarios.

4. Agrega el código JavaScript

A continuació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):

1	wp_enqueue_script( 'customjs', get_template_directory_uri() . '/assets/js/custom.js', array(), '', true );
2

Después, en su interior, vamos a escribir el código necesario para la funcionalidad de las casillas de verificación:

const radios = document.querySelectorAll(".checkbox-list .wpcf7-list-item");
const wpcf7Elm = document.querySelector(".wpcf7");

radios.forEach((radio) => {
  const input = radio.querySelector("input");
  input.nextElementSibling.remove();
  const inputValue = input.value;
  input.id = inputValue;
  const label = document.createElement("label");
  label.setAttribute("for", inputValue);
  label.innerHTML = `
    <svg>
      <use xlink:href="#checkbox_empty"></use>
    </svg>
    <svg class="checkmark">
      <use xlink:href="#checkmark"></use>
    </svg>   
    By ${inputValue}
  `;
  radio.appendChild(label);
});

Paso adicional: personaliza los mensajes de salida

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

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

const wpcf7Elm = document.querySelector(".wpcf7");
const output = document.querySelector(".wpcf7-response-output");
const html = `
  <svg>
    <use xlink:href="#fieldset"></use>
  </svg>
`;

wpcf7Elm.addEventListener("wpcf7submit", () => {
  setTimeout(() => {
    output.classList.add("form-wrapper");
    output.insertAdjacentHTML("beforeend", html);
  }, 100);
});

5. Llama al formulario de contacto

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

1	[contact-form-7 id="5" title="Handmade SVG Form" html_class="handmade-form container"]

Observa las clases agregadas a través del atributo html_class.

Complementos prémium de formularios de contacto

Los complementos gratuitos son perfectos cuando estás comenzando con WordPress, pero si quieres pasar al siguiente nivel con tus sitios y ahorrar tiempo al hacerlo, considera un complemento pré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 estático a algo dinámico incorporándolo en un popular complemento de formularios de WordPress. Ojalá que los pasos hayan sido claros para ti y que lo pongas en práctica.

¿Alguna vez has hecho alguna personalización para Contact Form 7?

Si tienes alguna pregunta o problema, ¡házmelo saber en los comentarios a continuación!