Curso de WordPress – 13. Creación de formularios (plugins)

Los plugins son aplicaciones que añadidas a WordPress ofrecen funcionalidades extra. Existen multitud de plugins (tanto gratuitos como de pago) que pueden ser utilizados para adaptar el funcionamiento de la web al modelo de negocio o proyecto que necesitemos.

Por ejemplo, plugins para crear catálogos de productos, para gestión de reservas, para comercio electrónico, para directorios de empresas, redes sociales, etc.

En este capítulo, instalaremos y utilizamos un plugin para crear un formulario de contacto, que será rellenado por nuestros visitantes y entregado a nosotros mediante corre electrónico.

Para acceder a los plugins de WordPress pulsamos en Menú – Plugins.

Menú plugins

Por defecto hay 2 plugins instalados. En mi caso no suelo usarlos y siempre los borro. Si queremos añadir un nuevo plugin, hacemo clic en el botón Añadir Nuevo:

Buscar Ninja Forms

Podemos subir el plugin desde nuestro PC (en el caso de que lo hayamos adquirido en una web externa o lo hayamos desarrollado nosotros) o buscarlo en el catálogo de plugins on-line de WordPress.

El plugin que vamos a buscar es Ninja Forms. Lo tecleamos en el buscador para localizarlo:

Instalar Ninja Forms

Normalmente será el primer resultado mostrado, hacemos clic en instalar ahora:

Activar plugins Ninja Forms

Esperamos unos segundos a que se instale, y lo activamos. Los plugins se descargan pero para que comiencen a funcionar necesitamos activarlos.

Una vez activado veremos un elemento nuevo en el menú de WordPress, Formularios:

Nuevo menú formularios

Hacemos clic en Formularios. El plugin es gratuito aunque ofrece opciones de pago, podemos descartar el mensaje haciendo clic en Skip.

Descartar mensaje comercial ninja forms

La pantalla principal muestra los formularios creados. Por defecto viene uno de ejemplo:

Listado de formularios creados

Hacemos clic en Añadir Nuevo para crear nuestro nuevo formulario:

En la parte izquierda tenemos la lista de campos que podemos usar para el formulario. Vamos a empezar creando un campo para pedir el nombre de la persona que nos escribe. Hacemos clic en Cuadro de texto, y automáticamente se añadirá al formulario para configurarlo.

Añadir campo de formulario

La etiqueta es el texto que precederá al campo. Escribimos “Tu nombre”.

Añadir campo nombre

Ahora vamos a hacer que este campo sea obligatorio de rellenar. Desplegamos las opciones de Configuración de Restricciones y marcamos la casilla Necesario:

Configurar campo obligatorio

Ahora añadimos un nuevo campo de Número, para pedir el teléfono de la persona que nos contacta. Este tipo de campo sólo permitirá que el usuario escriba números. En la etiqueta podemos poner “Teléfono”:

Añadir campo teléfono

Ahora vamos a crear otro campo para pedir el correo electrónico de nuestro visitante:

Como etiqueta ponemos “E-Mail” y en Configuración de Restricciones marcamos Necesario y Validar como una dirección de correo electrónico. Si el usuario introduce un texto que no se relaciona con una dirección de e-mail (sin arrobas y punto), el navegador le avisará y no podrá continuar con el envío del formulario.

Añadir campo e-mail

Ahora añadiremos un área de texto donde el visitante puede escribir su consulta y observaciones:

Añadir campo comentarios

Por último creamos el botón de envío, que es la opción Presentar:

Configurar botón de envío

Guardamos y especificamos un nombre para el formulario:

Nombrar el formulario

Ahora vamos pulsar en la pestaña Dirección de Correo Electrónico y Acciones:

Configurar acciones del formulario

Aquí vamos a configurar cómo nos va a llegar a nosotros el formulario, y qué acción se va a producir cuando el usuario haga clic en Enviar el formulario.

Ahora mismo la lista de acciones está vacía, así que pulsamos en Añadir Nuevo:

Añadir nueva acción

La primero en configurar será el envío del propio formulario. En nombre de la acción ponemos algo como “Enviar Formulario”:

Configurar envío de formulario

Escribir: Dirección de corre electrónico.

Nombre de quién procede el correo: Por defecto nos marca el nombre de nuestra página web, pero podemos cambiarlo e indicar que el nombre del remitente sea la persona que nos está escribiendo, utilizando los datos que ha especificado en el campo Nombre del formulario:

Personalizar remitente formulario

Dirección de quien proviene el formulario: Podemos configurar para que muestre la dirección de la persona que nos está escribiendo:

Personalizar remitente email del formulario

Para: Aquí escribimos la dirección de correo que va a recibir el formulario, es decir la nuestra:

Configurar destinatario del formulario

Sujeto: Es el mensaje personalizado que aparecerá en el asunto del correo:

Configurar asunto del formulario

Por último configuramos el cuerpo del mensaje, con texto personalizado por nosotros mezclado con los datos que ha indicado el usuario en los campos del formulario:

Personalizar mensaje del formulario

Vamos a añadir los datos que se han introducido en el campo Nombre. Situamos el cursor en Nombre y seleccionamos el campo Tu Nombre de la lista:

Añadir campos del formulario al mensaje

Lo mismo con el campo Teléfono:

Añadir campos del formulario al mensaje 2

Así con el resto de campos del formulario hasta que quede tal que así:

Guardar ajustes del formulario

Guardamos y volvemos a la lista de acciones para el formulario.

Volver a la lista de acciones

Ahora añadimos una nueva acción para personalizar un mensaje de confirmación que verá el visitante al hacer clic en el envío del formulario:

Añadir nueva acción

En este caso la opción Escribir la cambiamos por Mensaje de éxito. Y personalizamos un mensaje de agradecimiento por contactar con nosotros.

Personalizar mensaje de éxito

Volvemos a la página principal de Formularios, donde aparece la lista de formularios que tenemos creados. Para añadir el formulario a una página necesitamos copiar y pegar el Código Corto del formulario.

Copiar código corto del formulario

Nos vamos a la página de contacto y pegamos el código del formulario:

Añadir formulario a la página

Actualizamos la página y la visualizamos para ver el resultado:

Vista del formulario en la web

Podemos hacer una prueba enviando un formulario:

Enviar formulario de prueba

Y observamos que el mensaje de éxito aparece correctamente:

Ver mensaje de éxito del formulario

Recordar que para el formulario se envíe necesitamos estar trabajando en un servidor en internet, por lo que si estamos trabajando en modo local, el formulario no se enviará.

Curso de WordPress – 14. Biblioteca de medios: imágenes, videos, documentos

 

 

Contacta con Gestionatuweb
 
×

Utilizamos cookies para mejorar la experiencia de uso y obtener datos estadísticos de nuestras visitas. Si no aceptas las condiciones algunos apartados de la web podrían no funcionar correctamente. Más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar