Contact Form  7 – Totalmente personalizable

Hoy quiero enseñaros personalizar totalmente nuestros formularios creados en Contact Form 7, muchas veces creamos los formularios y quedan muy sosos y para que no se vea de una forma que no llega mucho a los ojos, vamos a meter código HTML, para darle un toque diferente a nuestros formularios.

Descargar – Instalar – Contact Form 7

Lo primero que tenemos que hacer, es instalar nuestro Plugin WordPress, me imagino que ya lo sabéis como hacerlo, así que ésta parte la vamos a obviar.

Aquí os dejo un Vídeo Tutorial que he realizado para éste post.

Una vez instalado vamos a Contacto de nuestro Menú WordPress

Contact Form

Una vez dentro de Contact Form 7 vemos que hay uno creado, asi que vamos a editar ese mismo.

Como vemos, ha generado un Shortcode para insertar en una página.

Vamos a Página y creamos una nueva, le damos el nombre que queramos y pegamos el Shortcode, guardamos y vamos a ver que diseño tiene.

Contact Form

Ese es el aspecto que tiene nuestro formulario, ahora vamos a cambiarlo un poco, le vamos a dar color a las letras, vamos a cambiar de tamaño y vamos a cambiar la fuente de las letras.

Para quien no conozca código HTML  y para quienes si lo conozcan, vamos a introducirlo dentro de nuestro Contact Form 7, volvemos a la edición de nuestro formulario.

Contact Form

Meter código HTM

  • Para poder cambiar el tamaño de la fuente vamos a utilizar  <font size=2></font>
  • Le daremos un color, usaremos colores hexadecimales <font color=#DA3A3A></font>
  • También cambiaremos la fuente <font face=”Comic Sans MS,arial,verdana”></font>

Esos tres códigos utilizaremos, para que podáis elegir el mejor color os dejo una página donde podemos elegir nuestro color hexadecimal “Elige tu color

Antes de utilizar nuestro código HTML voy a escribir como quedaría el código terminado

<font size=2 color=#DA3A3A face=”Comic Sans MS,arial,verdana”>Texto</font>

Ahora vamos a ir a configurar nuestro formulario de Contact Form 7, y vamos a pegar el código de ésta manera.

Contact Form

Guardamos y vamos a ver como ha quedado nuestro formulario, actualizamos…

Contact Form

Y vemos como es más pequeña, tiene un color rojo y ha cambiado la fuente, el tamaño de la letra lo vamos bien nosotros mismo, podemos poner cualquier valor del 1 al 6, y lo mismo con el color y la fuente.

Como veis es muy sencillo dar un poco de forma nuestros formularios,

Si quieres leer más post interesantes debajo tienes enlaces que te llevarán a ellos.