Contact Form 7 – Totalmente personalizable

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.

dejujo

View more posts from this author
8 thoughts on “Contact Form 7 – Totalmente personalizable
  1. aida

    Hola, como lo hago en contact form 7para poner un ancho del 50% a los campos de nombre y email?
    He intentado [text* your-name placeholder “Escriba su nombre aquí”]
    pero no hay manera…

    Muchas gracias

     
    Reply
    1. Juan jose Blanco Bejarano

      hola

      Hola,

      Por ancho entiendo que te refieres al espacio horizontal, ¿no?

      Para hacer esto puede añadir en la configuración del formulario el ancho que tendrá en caracteres y el número máximo de caracteres permitidos.

      Si por ejemplo tienes un campo para solicitar el nombre como el siguiente:

      [text* your-name]

      puedes indicar el número de caracteres de ancho y el número máximo de caracteres admitidos de la siguiente forma:

      [text* your-name 30/60]

      Para el ejemplo anterior al caja tendrá un ancho de 30 caracteres y se admitirá escribir en ellas hasta un máximo de 60 caracteres.

       
      Reply

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *