Personalizando plugins: Contact Form 7

Personalizando plugins: Contact Form 7

Contact Form 7, algo más personal.

Realizar tu página web con wordpress es como abrir una gran ventana a la investigación y el reto personal.

Cuando no eres ni programador ni informático ni desarrollador ni ingeniero de nada, cada pequeño paso que das para “ponerla bonita” es como montar el Belén, o cambiar el escaparate de tu tienda y sentarte a contemplar como se fijan en él los transeúntes: sintiendo una gran satisfacción con los resultados si es admirado por los demás.

Dicen que trabajar en wordpress es coser y cantar, pero os aseguro que hay que haber cosido mucho para que los trajes se ajusten a cada cuerpo, sin defecto notable.

Y en wordpress elegir una plantilla ya empieza a ser el primer reto, porque no hay plantillas iguales, en cuanto a funciones, configuraciones, plugins que ya traen o no incluidos, formularios, tablas, widgets, menús, códigos cortos…sólo lo básico del maravilloso cms es lo que siempre permanece intacto.

Personalizar tu web hasta conseguir tu “custom css” (tu hoja de estilo tuneada) requiere horas de dedicación que nunca verás del todo agotadas, porque aunque terminado, siempre habrá un pequeño escollo pendiente de resolver, actualizar o mejorar.

Y como para conseguir esa armonía de colores, tipografías, botones y en resumen, esa Identidad Corporativa Digital que todos deseamos en nuestras páginas, debes modificar hasta los plugins que le añadas.

Ahora vamos a personalizar uno sencillo pero indispensable para cualquier web: el formulario de contacto.

Para no salirnos del rebaño, elegimos el Contact Form 7, que con 21 millones de descargas y a gran distancia de sus competidores, no ofrece la menor duda de cual vas a implementar en tu web. (a no ser que tu plantilla ya traiga incorporados sus propios formularios de contacto y subscripción). Tú decides, tú eliges.

No vamos a dedicar espacio ni texto a como entrar en tu wordpress e instalar el plugin (he visto vídeos que ocupan en esto el 90%).

Tan sólo asegúrate de instalar la última versión del plugin  [Contact Form 7 4.0.1]

Tu ya lo tienes instalado, activado y vamos al botón de “Configuración”.

Por defecto te aparecerá una muestra de formulario “Formulario de contacto 1” con su código abreviado y su identificador para instalar en la página donde quieres que se muestre.

Insértalo en una página, simplemente por ver como quedaría, y haz también una prueba de envío en él. ¿Funciona? Probablemente sí.

Lo mejor de este plugin es que aunque es muy simple, también es muy funcional.

Vamos a añadir una personalización, pero antes, creamos uno nuevo en lugar de modificar sobre el que viene por defecto, por si hay que volver atrás.

Añadimos un nuevo formulario de contacto, y le asignamos un nuevo nombre. Directamente insertamos el nuevo código en una página para ir comprobando los cambios que hagamos en él.

Éste es el código por defecto:

<p>Su nombre (requerido)<br />
[text* your-name] </p>

<p>Su e-mail (requerido)<br />
[email* your-email] </p>

<p>Asunto<br />
[text your-subject] </p>

<p>Su mensaje<br />
[textarea your-message] </p>

<p>[submit “Enviar“]</p>

Y ésta su apariencia:

Su nombre (requerido)

Su e-mail (requerido)

Asunto

Su mensaje

Fácilmente podemos modificar el texto, cambiar colores, añadir campos, o añadir alguna etiqueta que nos interese. La más importante, hacer que el usuario acepte algún término antes de su envío.

  • Para cambiar el color añadiremos el siguiente código: <span style=”color: #ff3333;”>, indicando después de # el código html del color deseado
  • Podemos añadir un titular modificando el tamaño de la letra usando los códigos de wordpress para marcar titulares h1, h2, h3…de apertura y cierre: <h2><span style=”color: #ff3333;”>Consúltanos</span></h2>
  • Cambiaremos los mensajes que aparecen por defecto sustituyéndolos por otros mas personalizados: <p><span style=”color: #ff3333;”>Te llamas<br />[text* your-name] </p>
  • Y añadiremos cuantas etiquetas consideremos necesarias en nuestro formulario, seleccionándolas en el marco de la derecha
    • Cada etiqueta debe insertarse en un párrafo, esto es: <p>[textarea your-message]</p>
    • Dejando un espacio entre líneas para el recuadro rellenable por el usuario con el código <br />

Éstas son todas las etiquetas disponibles (tag forms):

Hemos usado algunas de ellas para éste ejemplo. Y así es como quedaría nuestro nuevo formulario, usando las indicaciones de inserción de códigos que hemos detallado arriba:

<h2><span style="color: #ff3333;">Consúltanos</span></h2>
<p><span style="color: #ff3333;">Te llamas <br />[text* your-name] </p>
<p><span style="color: #ff3333;">Tu dirección de correo<br />[email* your-email] </p>
<p><span style="color: #ff3333;">De que se trata<br />[text your-subject] </p>
<p><span style="color: #ff3333;">Explícate<br />[textarea your-message] </p>
<p><span style="color: #ff3333;">Incluye tu archivo<br />[file file-699] </p>
<p><span style="color: #ff3333;">Elige tu país<br />[select your-country "España" "México" "Argentina"]</p><p>[submit "Mándalo ya"]</p>

Últimos detalles:

Nos queda el último y mas importante de los detalles:

Solicitar al usuario que acepte algún término de nuestro interés antes de enviar su petición. Incluiremos otra etiqueta [acceptance] y añadiremos algún enlace referido a lo que el usuario debe aceptar antes de enviar:

En nuestro caso, enlazamos a Política de Privacidad del sitio. Tú solo debes cambiar la url de aterrizaje.

[acceptance Acepto]Acepto la</span> <a href=“https://www.socialmediaproject.es/politica-de-privacidad”><span style=”color: #ff3333;”><strong>Política de Privacidad</strong></span><span style=”color: #666666;”> de este sitio</a>

Y el código definitivo sería:

<h2><span style="color: #ff3333;">Consúltanos</span></h2> <p><span style="color: #ff3333;">Te llamas <br />[text* your-name] </p><p><span style="color: #ff3333;">Tu dirección de correo<br />[email* your-email] </p><p><span style="color: #ff3333;">De que se trata<br />[text your-subject] </p>
<p><span style="color: #ff3333;">Explícate<br />[textarea your-message] </p>
<p><span style="color: #ff3333;">Incluye tu archivo<br />[file file-699] </p>
<p><span style="color: #ff3333;">Elige tu país<br />[select your-country "España" "México" "Argentina"]</p>
[acceptance Acepto]Acepto la</span> <a href="https://www.socialmediaproject.es/politica-de-privacidad"><span style="color: #ff3333;"><strong>Política de Privacidad</strong></span><span style="color: #666666;"> de este sitio</a>
<p>[submit "Mándalo ya"]</p>

 

Este ha sido el resultado de nuestra prueba de Contact Form:

Consúltanos

Te llamas

Tu dirección de correo

De que se trata

Explícate

Incluye tu archivo

Elige tu país

Acepto la Política de Privacidad de este sitio


¿A que lo has probado?

No intentes que funcione si no has rellenado los campos ni has clicado la aceptación en el recuadro correspondiente…uhmmm