Formulario de contacto 2

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Este video lo vamos a iniciar realizando un paso que aún no hemos completado y que es muy importante para nuestro formulario de contacto.

Debemos añadir el formulario a nuestro menú principal.

Para añadirlo, recuerda que debes ir hacia apariencia, luego en menú.

Y aquí, tenemos ahora dos diferentes menús, así que utilizando este selector, voy a seleccionar el menú principal.

Ahora vamos a seleccionar la página de contacto y la añadimos al menú.

No le vamos a realizar ninguna modificación, así que simplemente damos clic en guardar menú.

Si ahora vamos a ver el sitio web, podrás notar que ya tenemos la opción de contáctanos en el menú principal.

Muy bien, ahora veremos el siguiente plugin que igualmente es muy fácil de utilizar, pero que también nos permite añadir más campos al formulario.

Ya que como puedes ver el plugin de pirateforms únicamente nos permite tener estos campos en el formulario y no podemos añadirle más.

Así que vamos a regresar a nuestra área de administración.

Debemos instalar un nuevo plugin, así que vamos hacia plugins.

Antes de instalar el nuevo plugin, debemos desactivar el que tenemos activado en este momento, y luego lo voy a eliminar, debemos dar clic en si, para que elimine todos los archivos del plugin.

Te recomiendo eliminar o como minimo desactivar cualquier plugin y plantilla que no te encuentras utilizando.

Tener un plugin o una plantilla que no utilizas en tu WordPress, puede causar problemas de seguridad, especialmente debido a que olvidaras actualizarlos.

Hablaremos más sobre este tema que es parte del mantenimiento que debes darle a tu blog en el último módulo de este curso.

Muy bien, ahora vamos a dar clic en añadir nuevo, y buscamos el plugin llamado WPForms.

Lo tenemos aquí, así que lo instalamos y activamos.

Una vez lo instalas, te llevará de forma automática a la página de bienvenida del plugin.

También podrás ver que ahora tenemos un nuevo elemento en nuestro menú llamado WPForms.

Si damos clic sobre WPForms, entraremos en la lista de los formularios que hemos creado, lo bueno de este plugin es que tenemos más control sobre nuestros formularios y podemos crear varios y diferentes formularios.

En este momento no tenemos ningún formulario aún, así que damos clic en add new para crear nuestro primer formulario con WPForms.

Desde esta ventana podemos iniciar con la creación de nuestro primer formulario de contacto.

Primero puedes añadirle un título al formulario desde aquí.

Luego debemos seleccionar una plantilla, tenemos estas tres disponibles, y estas adicionales se encuentran disponibles dentro de la versión Premium del plugin, pero podrás ver que con la versión gratuita nuestro formulario será completamente funcional.

Vamos a seleccionar la plantilla en blanco para iniciar desde cero.

Muy bien, ahora estamos en el segundo paso, aquí debemos añadir los diferentes campos que deseamos mostrar en el formulario.

Tenemos los campos estándar que son gratuitos y los otros grupos de campos están disponibles con la versión de pago del plugin.

Vamos a empezar por añadir el campo de Nombre, así que selecciono el campo de single line text y lo arrastra hacia esta zona.

Este elemento me permite añadir un campo de texto, una vez tenemos aquí el nuevo elemento, podemos modificar sus opciones al dar clic sobre él.

En este caso el primer campo deseo que sea el de nombre, así que le colocaremos Nombre.

Podeos añadirle un descripción que se muestra en la parte inferior del campo.

En esta opción podemos indicar si es un campo requerido, y en este caso si lo es, así que lo voy a dejar marcado.

Luego tenemos algunas opciones avanzadas, desde aquí es posible definir el tamaño del campo de texto, en este momento se encuentra en el tamaño medio, podemos hacerlo más pequeño o más grande, dependiendo de cómo deseas mostrar el diseño del formulario.

Desde el siguiente campo puedes añadir un texto que se mostrará dentro del campo de texto.

Con la siguientes opción podemos ocultar el label del formulario.

Las otras dos opciones nos permiten añadir un valor por defecto para este campo y también añadirle una clase CSS a este campo, de modo que podamos modificar su diseño utilizando código CSS.

En este caso no utilizaremos estas opciones debido a que estamos creando un formulario básico.

Así que vamos a eliminar este texto también.

Y dejaremos el campo de esta forma.

Muy bien, podemos seguir añadiendo mas campos a nuestro formulario, vamos a la opción de add fields.

Vamos a utilizar un elemento de correo, lo arrastramos hacia aquí.

Entremos en sus opciones.

La única modificación que haremos, es añadir una pequeña descripción.

Vamos hacia todos los elementos nuevamente y añadiremos un segundo campo de texto.

Entramos a sus opciones, y a este campo le llamaremos asunto.

Ahora utilizaremos una caja de texto, vamos a entrar en sus opciones y la llamaremos mensaje.

Entonces, como puedes ver en este momento, ya tendríamos el mismo formulario que podíamos crear con pirateforms, contamos con el nombre, el correo, asunto y el mensaje que el visitante desea enviar.

Pero gracias a que tenemos más elementos adicionales que podemos añadir al formulario, es posible crear con wpforms formulario con más información.

Por ejemplo, en este caso, voy a utilizar otro elemento, añadiremos unos checkboxes, esto nos permite mostrar una cantidad de opciones con selección multiple.

Vamos a entrar en sus opciones.

Le voy a consultar al visitante, cuál de nuestros productos se encuentra interesado.

En esta zona podemos añadir todas las opciones, o en este caso el nombre de los productos.

También es posible añadir más opciones desde estos botones.

Le vamos a colocar una pequeña descripción.

Y abrimos las opciones avanzadas, las opciones avanzadas pueden mostrar las opciones utilizando una cantidad diferentes de columnas, por ejemplo en este caso, lo voy a dejar en dos columnas.

Regresemos a los elementos del formulario.

Cómo pudiste notar, hay otra cantidad de elementos que es posible añadir al formulario, sin embargo este otro conjunto de elementos son parte del plugin en su versión de pago.

Pero, para crear tu primer formulario de contacto, los elementos que trae en la versión gratuita son más que suficiente.

Ahora pasemos a modificar las opciones del formulario desde aquí.

Tenemos en primer lugar las opciones generales del formulario.

Desde aquí es posible modificar el título del formulario nuevamente, añadir una descripción, También es posible ocultar la descripción y el título, que es algo que vamos a dejar marcado en el caso de este formulario.

También podemos modificar lo que dice el texto del botón para enviar, como puedes ver actualmente se encuentra en inglés, así que lo vamos a cambiar y le colocamos, enviar.

Y en el siguiente campo podemos indicar una clase CSS para modificar el estilo del botón de enviar por medio de CSS.

Pasemos a las opciones de notificación.

Desde aquí es posible modificar a quien y como le llegaran los correos que son enviados desde el formulario de contacto.

En este caso voy a modificar el asunto y el nombre del remitente.

Todo lo demás lo vamos a dejar como se encuentra.

En las siguientes opciones podemos indicar lo que deseamos mostrar después que el visitante envía un mensaje.

Es posible mostrar un mensaje de agradecimiento, enviarlo hacia una página, o hacia un URL específica.

En este caso le diremos que deseamos mostrar un mensaje de agradecimiento y podemos añadir nuestro mensaje en este campo de texto.

Voy a dejar marcada esta opción para que la página se mueva hacia el mensaje de confirmación después que el usuario envíe el mensaje.

Las opciones de marketing y pagos, son parte de las opciones Premium del plugin, de modo que de esta forma terminamos con nuestro formulario.

Ahora damos clic en save para guardar los cambios.

Podemos salir de la vista del formulario desde la x que se encuentra en la parte superior derecha.

Añadir el formulario a una de nuestras páginas es realmente muy fácil.

Vamos a modificar la página de contacto que hemos creado antes.

Muy bien, ahora debemos borrar el shortcode que añadimos antes para mostrar el formulario creado con pirateforms.

Como puedes ver, tenemos otra opción desde el editor, demos clic sobre este nuevo botón que dice add form.

Desde aquí podemos seleccionar el formulario que deseamos mostrar, en este caso únicamente tenemos este nuevo formulario, así que se encuentra seleccionado por defecto, para añadirlo simplemente damos clic en add form.

Eso añade el shortcode correspondiente a ese formulario de forma automática.

Ahora únicamente debemos actualizar la página para mostrar el nuevo formulario.

Una vez los cambios se guardan vamos a ver la página.

Y como puedes ver tenemos aquí nuestro nuevo formulario.

Pirateforms es muy fácil de utilizar, pero WPForm también lo es, de modo que dependiendo de tus necesidades puedes usar cualquier de ellos.

Existen varios otros plugins para añadir formularios a tu web, de pagos y gratuitos, por ejemplo, contact form 7, que es un plugin muy popular y relativamente fácil de utilizar, si te encuentras viendo este video en nuestro sitio web en lievanosan.com, podrás encontrar abajo un link hacia un video en el que mostramos como utilizar contact form 7.

Y uno de los formularios más robustos y lleno de características es Gravity Forms, que es un plugin de pago de pago.

Tienes muchas opciones para añadir formularios en tu sitio web, pero las que te hemos presentado en este y en el anterior video son las más fácil de utilizar y ambos plugins son gratuitos.

Ahora debemos ir al siguiente paso, ya que con el próximo video iniciamos el módulo de diseño de nuestro blog, vamos a trabajar con plantillas y le daremos el estilo final a nuestro blog.

Recuerda compartir este curso con tus amigos para esparcir el conocimiento.

Mi nombre es José Lievano y nos veremos en el siguiente video.

One Comment on “Formulario de contacto 2”

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