Añadir un formulario de contacto

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

No importando el tema sobre el cual trata nuestro sitio web, el objetivo es siempre colocar información en internet

Y que todo el mundo pueda encontrar esa información y hacer algo con ella

No importando si es el sitio web de una empresa, un blog, o una persona que solo desea publicar contenido en internet.

En todo es muy posible que las personas al ver nuestro contenido, deseen comunicarse con nosotros, sobre ese contenido.

Por esa razón siempre debe existir un formulario de contacto en todos los sitios web, de modo que las personas que visitan el sitio

Puedan comunicarse fácilmente con el dueño del sitio o el autor del contenido

Dependiendo de lo que trate nuestro sitio web, puede que deseemos recolectar información diferente de nuestros visitantes

De modo que te aconsejo que coloques un formulario de contacto, y que añadas en el menú principal un botón hacia el formulario

De esta forma las personas podrán conectarse contigo fácilmente

En este ejemplo vamos a crear un formulario de contacto, en el que también colocaremos un poco de información sobre el sitio, como un pequeño mensaje, números de teléfonos y otra información

La razón por la que es mejor crear un formulario de contacto en lugar de publicar nuestro e-mail en el sitio web

Es debido a que si lo hacemos, nuestro e-mail será fácilmente encontrado por los spambots, o robots que se encargan de recolectar e-mails

Lo colocarán en una lista y luego comenzaremos a recibir spam en nuestra cuenta de e-mail

Así que publicar de esa forma nuestro e-mail es una muy mala idea

Es mejor crear un formulario de contacto, para recolectar la información de las personas que desean ponerse en contacto con nosotros

Igualmente es mucho más fácil para el visitante entrar al sitio web, y si desea contactarte llenar el formulario con la información y dar clic en enviar.

En lugar de copiar tu e-mail, entrar a sus correos, pegar tu e-mail y enviar el mensaje desde ahí

Así que en este video, vamos a crear una página de contacto con información y también con un formulario de contacto

Para ello debemos instalar el plugin que nos permitirá hacerlo

Vamos a ir hacia nuestro panel de control, luego vamos a plugins y damos clic en añadir nuevo

Voy a buscar uno de miles de formularios de contacto disponibles para wordpress, el que usaremos es contact form 7, y es muy fácil de usar.

Damos clic en buscar

Y obtenemos los resultados de nuestra búsqueda, pero también muchos otros plugins similares

Desde aquí si lo deseamos podemos usar un plugin diferente, el que usaremos es solo cuestión de nuestra preferencia

Vemos que al inicio tenemos el contact form 7, y lo vamos a instalar, para ello daremos clic directamente en el enlace de instalar ahora, damos clic en aceptar

Y el plugin se descarga y se instala en wordpress

Podemos activarlo, y al hacerlo podemos ver que tenemos una nueva opción dentro de nuestro menú lateral, que dice, contacto

El lugar donde aparece nuestro plugin, es definido por el desarrollador del plugin

En ocasiones puede aparecer dentro de nuestra barra de herramientas, en nuestro menú principal como en este caso, o solo en la vista de plugins

Es posible que en el caso de algunos plugins debamos buscar un poco dentro de nuestra administración para encontrarlos, es por ello que debemos siempre leer las instrucciones de uso del plugin

En nuestro caso vamos a dar clic sobre el botón de contacto

Esto nos lleva a la página principal del plugin

Desde aquí podemos administrar todos nuestros formularios de contacto

Tenemos en este primer panel una descripción del plugin, y también algunos links hacia la documentación del mismo

Si lo deseamos podemos eliminar este panel dando clic en dismiss

En la parte de abajo tenemos nuestros formularios de contactos creados

Siempre que instalemos este plugin, automáticamente nos creará un formulario de prueba

Desde aquí podemos ver el título de nuestro formulario, el shortcode que es el código que usaremos para añadirlo a nuestra página como veremos en breve,

El autor del formulario, que es la persona que creo este formulario

Y la fecha de creación, si nos situamos sobre el formulario podemos editarlo y copiarlo.

Si deseamos eliminar un formulario, simplemente lo seleccionamos, y luego en acciones en lote seleccionamos eliminar y luego daríamos clic en aplicar

Sin embargo en este caso, vamos a usar este formulario de prueba para crear nuestro formulario

Así que damos clic en editar

Este formulario creado automáticamente, consulta al visitante sobre

Su nombre, que es requerido, su e-mail, igualmente requerido, un asunto, el mensaje y luego muestra el botón para enviar.

Podemos desde aquí cambiar los campos del formulario, podemos eliminarlos o añadir nuevos campos

Por ejemplo, en este caso vamos a añadirle, un campo extra, en el que preguntaremos el nombre de la empresa en la que trabaja

Podemos hacerlo primero colocando el cursor sobre el lugar donde deseamos que aparezca esta opción

Luego damos clic en el panel lateral en el botón generar etiqueta

Desde aquí podemos seleccionar que tipo de etiqueta deseamos añadir

Podemos añadir un campo de texto, e-mail, URL, fechas, menús desplegables, botones de opción única y muchos más tipos de campos

En nuestro caso lo que deseamos es añadir un campo de texto, así que damos clic sobre esa opción

Al hacerlo lo primero que debemos determinar es si es un campo requerido, esto significa que si lo dejamos como un campo requerido, el formulario no se enviará hasta que el usuario llene este campo

En este caso no será un campo requerido así que lo dejamos sin marcar

Luego podemos definir un nombre para este campo, este nombre es usado por el plugin para captar la información, de modo que no es necesario que lo cambiemos

En nuestro caso vamos a dejarlo como se encuentra

Podemos añadir un id y un clase, esto es usado para darle un estilo específico a este campo por medio de css, en nuestro lo dejaremos vacío

En size podemos definir cuantos caracteres tendrá de ancho este campo, lo dejaremos vacíos para que tome los que son por defecto, que son entre 20 a 25 caracteres de ancho

En maxlength podemos definir si deseamos que tenga un número limitado de caracteres, lo dejaremos vacío en nuestro caso

Muy bien, ahora podemos como lo indica simplemente copiar y pegar este código en el lado izquierdo para añadirlo al formulario

Para darle un formato correcto será bueno que lo coloquemos como se encuentran los otros campos

Aquí tocaremos un poquito de html, pero si no sabes html, puedes copiar un campo

Por ejemplo copiaremos el campo que dice asunto y lo pegaremos justo abajo

Ahora vamos a remplazar donde dice asunto por empresa

Y el texto que se encuentra encerrado en llaves lo cambiaremos por el código de este campo en particular

Con eso añadiríamos el campo nuevo a nuestro formulario

En la parte de abajo tenemos las opciones del e-mail que se nos envía a nosotros

En para, debemos colocar el correo donde deseamos recibir la información del formulario

En de, podemos dejarlo como esta, ya que si observamos nos coloca your-name que sería el nombre nuestro visitante y your-emial que sería el correo de nuestro visitante

De modo que si Juan Pérez con el correo juanperez@hotmail.com nos envía un mensaje por el formulario de contacto

Cuando nosotros lo recibamos, podremos ver que dice de Juan Pérez, y el correo remitente juanperez@hotmail.com

En asunto igualmente dice your-subject que es el código del asunto en nuestro formulario

En el cuerpo del mensaje es la forma en la que nos llegará el correo a nuestro e-mail

En este caso dirá, de y luego el nombre y correo de nuestro visitante

Luego el asunto

Y en el cuerpo del mensaje nos mostrará lo que coloco en el campo mensaje

En nuestro caso hemos añadido un campo extra, así que vamos a colocar este nuevo campo aquí

Vamos a colocar debajo de Asunto, Empresa, dos puntos y ahora copiamos y pegamos el código de ese campo

De esa forma ahora también nos llegará lo que el visitante coloca en el campo empresa

También podemos más abajo, colocar una segunda cuenta de e-mail para recibir la información de este formulario

Y los mensajes que se muestran cuando las personas nos envían un mensaje

Ahora que ya hemos modificado nuestro formulario, daremos clic en guardar

Lo que deseamos hacer con este formulario es colocarlo en su propio botón dentro de nuestro menú principal

Para ello primero vamos a copiar el código que nos muestra en esta parte

Este código lo vamos a pegar en el lugar de la página donde deseamos que se muestre nuestro formulario

Así que ahora debemos crear una nueva página para mostrar el formulario

Vamos hacia página, añadir nueva

Y vamos a darle el nombre de Contacto

Ahora simplemente vamos a pegar el código que hemos copiado y publicaremos la página

Ahora que se ha publicado vamos a visitar el sitio

Y como puedes observar, tenemos en nuestro menú principal la nueva página llamada contacto

Y si damos clic en ella podremos ver el formulario de contacto que hemos creado

Desde aquí nuestro visitante puede colocar su nombre, e-mail, el asunto de su menaje, su empresa, el mensaje y dar clic en enviar

Pero como hemos indicado anteriormente deseamos añadir información extra a este formulario

Así que vamos a regresar a la edición de nuestra página

Y desde aquí vamos a entrar a un archivo en Word donde tenemos preparada alguna información

La copiamos, regresamos a Wordpress, y usando el botón para pegar texto plano, pegaremos nuestro texto y ahora lo insertamos

Vamos a cambiar este encabezado hacia un título 2

Y como vemos el código no tiene inconvenientes con que exista contenido antes o después de el

Vamos en este caso incluso a colocar una imagen en esta área

Entramos al botón añadir objeto y usaremos esta imagen, vamos a asegurarnos que se encuentre alineada donde la deseamos y damos clic en insertar

Antes publicar la página voy a eliminar la opción de comentarios de esta página

Y Ahora si publicamos la página nuevamente dando clic en actualizar

Una vez se actualiza vamos a visitar la página

Y podemos observar que ahora se muestra la información que hemos añadido incluyendo la imagen, y en la parte de abajo podemos usar el formulario  de contacto sin inconvenientes

Lo que haremos ahora es hacer una prueba de nuestro formulario

Vamos a colocar información de prueba en estos campos, primero nuestro nombre, vamos a colocar nuestro correo, un asunto, nuestra empresa, y al final colocamos un mensaje

Damos clic en enviar

Y nos mostrará un mensaje que nos indica que nuestro mensaje fue enviado correctamente

Y el mensaje se enviaría a nuestro correo, al que hemos especificado dentro de la configuración del formulario

Así que ahora vamos a ir hacia nuestro correo, vamos a recargarlo

Y podremos ver el mensaje desde nuestro formulario de contacto.

Si lo abrimos podremos observar el mensaje con los datos de nuestro visitante, tal y como lo hemos indicado en la configuración del formulario

Y si damos clic en responder, podemos ver que responde al e-mail que nuestro visitante ha indicado automáticamente

Añadir un formulario de contacto a nuestro sitio web les permite a nuestros visitantes contactarnos fácilmente

Sin que tú tengas la necesidad de hacer publica tu cuenta de e-mail

Y como hemos visto en este video, añadir un formulario de contacto es un proceso fácil de realizar.

6 Comments on “Añadir un formulario de contacto”

Deja un comentario

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

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image