MANUAL CONTACT FORM 7

COMO AADIR FORMULARIOS EN NUESTRA PGINA WEB

Tabla de contenido
1.

Crear un nuevo formulario............................................................................................................... 2

1.1

Primeros pasos ............................................................................................................................ 2

1.2

Descripcin de la pantalla del formulario ........................................................................ 3

2. Opciones de configuracin del formulario .................................................................................... 4

2.1. Opciones que tienes en el epgrafe Formulario ................................................................... 4
2.2. Opciones que tienes en el epgrafe E-mail ............................................................................ 5
2.3. Opciones que ves en el epgrafe Mensajes............................................................................ 6
3. Caso practico ............................................................................................................................................. 7
Resumen grfico: ........................................................................................................................................ 17

Este manual define las lneas bsicas de uso de Contact form 7. En los siguientes
apartados veremos cmo crear un formulario de contacto usando este plugin.

1. Crear un nuevo formulario

1.1 Primeros pasos
1

Una vez dentro de nuestro panel de control de Wordpress nos

dirigimos a la parte izquierda del mismo. Encontraremos un
desplegable que tiene por titulo contacto (1). Hacemos click
en el y acto seguido hacemos click en aadir nuevo.
A continuacin el plugin nos pide elegir el idioma, para usar
espaol como idioma por defecto solo debemos hacer click
en aadir nuevo (2) otra vez.

1.2 Descripcin de la pantalla del formulario

En el punto (1) tenemos la posibilidad de editar el nombre de tu formulario.

En el punto (2) que se titula Formulario encontraremos el conjunto de

herramientas para crear los campos de tu formulario.

El punto (3) se titula E-mail. Aqu tienes un conjunto de opciones para

configurar cmo y a qu correo electrnico llegar el contenido del
formulario cuando el lector haga clic en el botn de enviar.

En el punto (4) tenemos los Mensajes. Se trata de todo el conjunto de mensajes

informativos que se mostrarn en cada caso a la persona que trate de enviar el
formulario. Prcticamente todos los textos traducidos al castellano y no es
necesario realizar modificaciones. Aun as podemos escribir el mensaje que
queramos.
El punto (6) Configuracin adicional. Esta pestaa es para formularios que
requieran un uso muy avanzado del plugin. Desde aqu podemos aadir lneas
de cdigo CSS a nuestro formulario.

2. Opciones de configuracin del formulario

2.1. Opciones que tienes en el epgrafe Formulario

En el rectngulo superior tenemos de una lista de 16 etiquetas. Cada una de ellas estn
pensadas para habilitar en tu formulario un tipo de campo destinado a recopilar aquella
informacin que estimemos oportuna. Las diferentes etiquetas son:

La etiqueta Texto est pensada para nombre, apellidos y cadenas cortas de texto
en general.
En correo electrnico aadimos un campo para obtener el mail del usuario
En telfono adquirimos un numero de contacto
(A veces da errores, mejor remplazarla por una etiqueta texto si los da)
En nmero obtenemos del usuario una cantidad.
En fecha obtenemos un da concreto como por ejemplo el nacimiento del
usuario.
Area de texto funciona de la misma forma que texto pero con ms espacio para
escribir.
En la etiqueta men desplegable creamos un men para que el usuario elija una
opcin de entre las prestablecidas.
Casillas de verificacin nos permite mostrar una lista de tems para que el
usuario escoja tantos tems como quiera.
Botn de seleccin nos permite mostrar una lista de tems para que el usuario
escoja un nico item.
Aceptacin aade una casilla en la que el usuario manifiesta la aceptacin de los
trminos de uso del formulario
La etiqueta pregunta nos permite hacer pares de preguntas y respuestas para
hacer un QUIZZ GAME.
Recaptcha aade un cdigo captcha a nuestro formulario.

Con la etiqueta archivo permitimos que el usuario adjunte ficheros con el

formulario.
La etiqueta Enviar aade el botn de envio al formulario.
Las dos opciones dynamics nos permiten elaborar formularios ms avanzados.
Con estas etiquetas podemos hacer que diferentes tems aparezcan o se oculten
a travs de una funcin condicional de tipo SI.

En los otros rectngulos ms pequeos vemos resaltadas las cadenas de texto <br /> y
<p>. Cuando escribimos <br /> indicamos un salto de lnea. Para entendernos, es como
pulsar la tecla Enter en un documento Word. Al escribir <p> indicamos el comienzo
de un prrafo y al escribir </p> indicamos el final del mismo.

2.2. Opciones que tienes en el epgrafe E-mail

En el epgrafe de E-mail encontramos las opciones de configuracin relativas a la

composicin del correo electrnico. Por defecto, toma una cuenta de correo que ya est
dada de alta, tal y como ves en (1).

Para. Correo electrnico donde llegar el contenido del formulario

De. Nombre de la persona que introduzca al completar el formulario
Asunto: Texto que ha puesto la persona en el campo asunto de nuestro
formulario
Encabezados adicionales. Sin comentarios aqu
Cuerpo de mensaje. Contenido detallado del cuerpo del mensaje que nos
llegar. Fjate que se compone de etiquetas. Dichas etiquetas sern sustituidas
por los datos correspondientes

2.3. Opciones que ves en el epgrafe Mensajes

En la pestaa mensajes podemos editar las frases que se mostraran en pantalla en las
diferentes situaciones. En la captura se muestran solo algunos de los mensajes como
ilustracin. El plugin contempla muchos tipos de situaciones diferentes.

3. Caso practico
Digamos que queremos crear un formulario de contacto creado en contact form 7 y
contiene los campos:

Nombre
Apellidos
Email
Asunto
Mensaje
Sexo
Qu te interesa: Soluciones informticas, RRHH o Soluciones sectoriales? (Puede
elegir ambas)
Cmo nos has conocido?
Botn Enviar

Empezamos!
1. Para abrir un nuevo formulario hacemos click en contacto y aadir nuevo en la
parte izquierda del panel de control de wordpress. Se abrir una nueva ventana,
hacemos click nuevamente en aadir nuevo. (Este paso esta detallado en el punto
1 de este documento)
2. Al abrir un nuevo formulario Wordpress nos da ya por defecto los siguientes campos:
Nombre, Correo, Asunto, Mensaje y Enviar. As que no habr que aadirlos.

3. Vamos ahora a aadir los campos que nos faltan. Empezamos con apellidos.
Situamos el cursor entre Nombre y Correo. Ahora escribimos <p> Apellido <br />.
Hacemos click en la etiqueta texto y nos aparecer la pantalla siguiente:

3.1. Ahora lo rellenamos. La primera casilla de verificacin (remarcada en la imagen)

nos da la opcin de elegir si el campo ser obligatorio en nuestro formulario.
3.2. En nombre pondremos el nombre del campo, en este caso apellidos.
3.3. Muy importante! El ltimo rectngulo sealado es necesario en la siguiente
pestaa del formulario a la hora de componer el correo que nos llegara.
Wordpress te lo rellena de forma automtica.

3.4. Hacemos click en insertar y escribimos </p> <br />

4. Ahora vamos con el campo sexo. Situamos el cursos entre apellido y Correo.
Escribimos <p> Sexo <br />. Hacemos click en la etiqueta botn de seleccin y nos
aparecer la pantalla siguiente:

4.1. Los rectngulos marcados en primer y tercer lugar se comportan igual

que en el caso anterior. Escribiremos por orden: Sexo y [radio Sexo]
4.2. En opciones escribiremos una opcin por lnea. En este caso Hombre
(Pulsamos Enter) y Mujer.

4.3. Hacemos click en instertar y escribimos </p> <br />

5. Vamos bien!. Ahora pasamos al campo: Qu te interesa: Soluciones Informticas,

RRHH o Soluciones sectoriales?. Situamos el cursor entre sexo y Correo.
Escribimos <p> Qu te interesa? (Puede seleccionar varios) <br />. Hacemos click en la
etiqueta casillas de verificacin y nos aparecer la pantalla siguiente:

5.1. Los rectngulos marcados en rojo funcionan de manera idntica a los puntos
anteriores. En nombre escribiremos Intereses. En opciones: Soluciones
Informaticas (Pulsamos Enter) RRHH (Pulsamos Enter) Soluciones
sectoriales. Y finalmente [checkbox Intereses].
5.2. En el rectngulo marcado en verde es una casilla de verificacin. Si esta
seleccionada solo dejara escoger una opcin al usuario. En nuestro caso se
quedara sin seleccionar.

5.3. Pulsamos insertar y escribimos </p> <br />

6. Solo queda un campo!. Situamos el cursor entre Qu te interesa? y Correo.

Escribimos <p> Cmo nos has conocido? <br />. Hacemos click en la etiqueta men
desplegable. Los campos funcionan de la misma forma que los anteriores.
1

7. As ha quedado el cdigo de nuestro formulario!

8. Ahora vamos a construir el mensaje que nos llegara al pulsar enviar. La parte
genrica de este paso esta explicada en el apartado 2.2. Cuando escribimos entre
corchetes de manera literal el nombre de un campo (Por ejemplo [Sexo]) al correo
nos llegara el dato del formulario perteneciente a ese campo.

9. Vamos a explicar en este paso como insertar el formulario en una pgina de la web.
Pulsamos en guardar formulario. Vamos a la pgina donde queramos insertarlo. En
Visual composer hacemos click en aadir elemento y elegimos Contact form 7.

9.1. Seleccionamos el formulario que queremos de la lista.

Resumen grfico: