Cómo agregar formularios de contacto usando el complemento - P2: Use WPForms

En el artículo anterior de la serie "Formulario de contacto", hemos aprendido qué es un formulario de contacto y cómo utilizar el complemento Formulario de contacto 7. Como prometí, escribí otro tutorial con WPForms y te lo mostraré en este artículo.

WPForms es un complemento de formulario de contacto de arrastrar y soltar freemium con una vista previa en tiempo real. En mi experiencia, es fácil y conveniente trabajar con este complemento.

¿Recuerda esta muestra de formulario de registro universitario que hemos creado en la parte 1 de esta serie? Ahora, vamos a crear el mismo con WPForms.

Paso 1: Instale y active el complemento WPForms

Este complemento tiene una versión gratuita en wordpress.org, por lo que solo necesita instalar y activar el complemento directamente en el Panel de administración .

Formulario de contacto de WPForms - Creador de formularios de arrastrar y soltar para WordPress

Autor (es): WPForms

Versión actual: 1.7.1.2

Última actualización: 18 de noviembre de 2021

wpforms-lite.1.7.1.2.zip

98% Calificaciones 5,000,000+ Instalaciones WP 4.9+ Requiere

Paso 2: cree un nuevo formulario de contacto y elija una plantilla

En su Panel de administración , vaya a WPForms > Agregar nuevo .

Aquí está la interfaz con la que debe trabajar:

En la barra lateral izquierda, puede ver 5 secciones:

1. Configuración : nombre el formulario de contacto y elija su plantilla.
2. Campos : agregue y personalice campos para el formulario de contacto.
3. Configuración : configure las notificaciones, confirmaciones y configuraciones generales.
4. Marketing : enlace con herramientas de marketing por correo electrónico como Constant Contact, Campaign Monitor, Mailchimp,…
5. Pagos : agregue el pago de PayPal Standard, Stripe y Authorize.Net.

Nota : No ejecuto ninguna campaña de marketing por correo electrónico y mi formulario no requiere información de pago. Por lo tanto, no necesito las secciones de marketing y pagos .

En la sección Configuración , ingrese el nombre de su formulario y seleccione la plantilla deseada.

Hay cuatro plantillas predeterminadas:

• Formulario de contacto simple
• Formulario de suscripción al boletín
• Sugerencia para
• Formulario en blanco

Excluyendo Formulario en blanco , otras plantillas tienen sus propios campos prediseñados que puede utilizar para crear formularios de contacto más rápido. Además, puede instalar complementos de WPForms (solo disponibles en versiones pagas) para obtener más plantillas.

En este artículo, elijo la plantilla Formulario en blanco para construir un formulario de contacto paso a paso desde el principio. Esto te ayudará a comprender todo más fácil y profundamente.

Paso 3: agregue campos para el formulario de contacto

Agregar campos

Después de elegir la plantilla Formulario en blanco en el paso 2, será trasladado a la sección Campos .

Para agregar campos para su formulario de contacto, arrastre los campos deseados desde la pestaña Agregar campos y suéltelos en el formulario de contacto.

A continuación, para personalizar un campo, haga clic en él y luego edite sus parámetros en la pestaña Opciones de campos .

Además, puede eliminar o duplicar un campo colocando el cursor sobre él y haciendo clic en los botones deseados.

En este artículo, necesito agregar los siguientes campos:

Después de agregar todos estos campos, debe personalizar cada campo en los siguientes pasos.

Personalice las opciones generales para cada campo

En general, existen dos tipos de opciones para personalizar cada campo:

Opciones básicas : todos los campos contienen estas opciones y debes trabajar con ellas para que tu formulario de contacto sea claro y comprensible.

• Etiqueta : ingrese el nombre del campo que desea mostrar.
• Descripción : esta es la pantalla de texto debajo del campo para indicar a los usuarios qué hacer.
• Obligatorio : ¡Es opcional! Márcalo para que este campo sea obligatorio.

En los siguientes pasos, cuando menciono "información básica", significa que debe ocuparse de estas opciones básicas.

Opciones avanzadas : hay algunas funciones avanzadas para cada campo. Es opcional que se ocupe de ellos, pero hay algunas cosas importantes que debe tener en cuenta:

• Texto de marcador de posición : muestra un texto dentro de los campos antes de que los usuarios ingresen datos. Este texto se puede utilizar como guía o ejemplo para ayudar a los usuarios a comprender fácilmente lo que deben completar. Por ejemplo, puede establecer el texto del marcador de posición del campo de correo electrónico como "Ingrese su correo electrónico".
• Valor predeterminado : si hay muchas personas que tienen la misma respuesta, puede establecer una respuesta predeterminada para ahorrar tiempo y esfuerzo a los usuarios. Por ejemplo, crea un formulario de contacto para las personas que viven en Nueva York, por lo que puede ingresar un valor predeterminado de "Nueva York" en el campo "Ubicación".
• Clases CSS : ingrese clases CSS en este cuadro para diseñar el campo. En el siguiente paso, incluiré código en esta sección para diseñar el formulario de contacto.

Nota :

• En Contact Form 7, puede utilizar el valor predeterminado como texto de marcador de posición. Pero es más conveniente en WPForms porque tiene la sección de texto de marcador de posición separada. Además, WPForms tiene la sección Descripción que muestra el texto debajo del campo. Utilizo esta forma porque hace que mi formulario de contacto se vea mejor.

• Puede hacer clic en el botón del signo de interrogación junto a las opciones / campos para leer las instrucciones de WPForms para ellos.

Además, hay algunas opciones diferentes según cada campo. ¡Averigüemos cuáles son!

Personalizar el campo "Su nombre"

Seleccione el campo Texto de línea simple y simplemente complete la información básica:

En este campo, hay 2 opciones más en la sección Opciones avanzadas :

• Límite de longitud : márquelo para elegir un límite para el máximo de caracteres que se pueden ingresar en el campo.
• Máscara de entrada : introduzca máscaras de entrada para requerir formatos específicos para el campo. Lea más detalles aquí.

Personaliza el campo "Tu número de teléfono"

Este campo no tiene nada de especial. Simplemente seleccione el campo Números y complete la información básica:

Personalizar el campo "Su correo electrónico"

Seleccione el campo Correo electrónico y complete la información básica del campo:

Este campo tiene una opción más básica: Habilitar confirmación por correo electrónico . Puede marcarlo para pedir a los usuarios que proporcionen su dirección de correo electrónico dos veces. Esto asegura que su correo electrónico sea correcto.

Personalice los campos "Ubicación para estudiar" y "Principales"

Primero, elija el campo desplegable . En la sección Opciones, ingrese las opciones para el campo. Puede hacer clic en (+) (-) para agregar / eliminar opciones.

Además, también puede hacer clic en el botón Bulk Add para agregar muchas opciones a la vez. En el cuadro Agregar opciones , complete las opciones en el orden deseado (cada opción es una línea) y luego haga clic en Agregar nuevas opciones .

Además, en este campo, hay 2 opciones avanzadas que deberían interesarle:

• Estilo : puede diseñar su menú desplegable con dos opciones: clásico y moderno. El estilo moderno le permite buscar por palabras clave. Por lo tanto, funciona bien en menús con muchas opciones (más de 10 opciones).
• Opciones dinámicas : permite a los usuarios seleccionar opciones de tipos de publicaciones o taxonomías. Por ejemplo, si elige Fuente de tipo de publicación dinámica como Publicaciones , cada opción en el menú desplegable es una publicación en su sitio web.

Personalizar el campo "Registrarse en"

Seleccione los campos de Casillas de verificación e ingrese opciones como los campos desplegables .

En este campo, hay 2 opciones avanzadas que deberían interesarle:

• Use opciones de imagen : puede usarlo para ilustrar sus opciones y hacer que su formulario de contacto sea más atractivo y visualizado.
• Elecciones aleatorias : esto puede evitar que las personas elijan una opción solo porque es la primera.

Paso 4: configurar el formulario de contacto

Después de crear un formulario de contacto, debemos configurarlo. En la versión gratuita de WPForms, puede configurar tres secciones a continuación:

Configurar ajustes generales

El complemento WPForms tiene instrucciones específicas para cada opción en esta parte. Debe hacer clic en el botón del signo de interrogación, leerlo detenidamente y prestar atención a estos campos:

• Enviar texto del botón : en el formulario de contacto 7, debe crear el campo Enviar . Pero en WPForms, el botón de envío está integrado. Puede cambiar el texto de este botón en esta sección a lo que desee, como Registrarse en, Enviar correo electrónico, ...
• Habilite la protección anti-spam : A veces, los spammers pueden molestarlo con toneladas de "formularios basura". En ese caso, debe activar esta función de anti-spam.

Configurar las notificaciones

Si desea recibir una notificación por correo electrónico cada vez que un usuario envía un formulario de contacto, vaya a Configuración > Notificaciones .

Puede agregar "etiquetas inteligentes" o texto a los campos de esta sección para administrar el correo electrónico que recibe cuando un usuario envía un formulario de contacto con mayor facilidad.

Nota : Las etiquetas inteligentes pueden agregar información a las notificaciones de su formulario de contacto automáticamente.

Este es un ejemplo de mi configuración:

Configurar las confirmaciones

En la sección Confirmación , puede configurar los mensajes que reciben los usuarios después de enviar formularios de contacto.

Cuando termine toda la configuración, simplemente haga clic en Guardar .

Paso 5: mostrar el formulario en páginas / publicaciones

Para mostrar sus formularios en páginas / publicaciones, hay 2 formas.

La primera forma es hacer clic en Insertar para mostrar su formulario en una página:

Después de eso, inserte el formulario de contacto en una nueva página o una página existente en su sitio.

La segunda forma es insertando el código corto del formulario de contacto en páginas / publicaciones. Te recomiendo que elijas la segunda forma porque puede mostrar el formulario de contacto tanto en publicaciones como en páginas . Para hacerlo, en el Panel de administración , vaya a WPForms > Todos los formularios , busque su formulario de contacto y copie su código corto.

A continuación, pegue este código corto en las publicaciones / páginas deseadas.

Y aqui esta el resultado:

Todavía no se parece a la muestra del formulario de contacto, así que tengo que darle un estilo.

Paso 6: Estilo del formulario

En el Panel de administración , diríjase a WPForms > Todos los formularios , busque su formulario de contacto y luego haga clic en Editar .

Ahora, haga clic en cada campo, vaya a Opciones avanzadas > Clases CSS y agregue los siguientes valores:

• Su nombre y regístrese en : ip-100
• Su número de teléfono, correo electrónico, ubicación de Estudio, el Mayor: ip-50

A continuación, vaya a Personalizador > Adición de CSS , agregue este código:

 .wpforms-field-container {
    pantalla: flex;
    envoltura flexible: envoltura;
		justificar-contenido: espacio-entre
}

.ip-50 {
    ancho: 48%! importante;
}

.ip-100 {
		ancho: 100%! importante;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	ancho máximo: 100%;
}

.ip-100 ul {
	pantalla: flex;
	justificar-contenido: espacio-entre;
}

div.wpforms-container-full {
    margen inferior: 24px;
    fondo: #eeeeee;
    relleno: 20px;
}

Finalmente, haz clic en Publicar .

Y aquí está el resultado final:

El formulario de contacto se ve mejor ahora, ¿no? Bueno, acabamos de terminar los últimos pasos para tener un formulario completamente similar a mi muestra.

Ultimas palabras

En mi experiencia, usar la interfaz de arrastrar y soltar como en WPForms es más fácil y rápido que usar el Formulario de contacto 7. Además, tiene el botón de envío prediseñado y 2 secciones más útiles como Texto de marcador de posición y Descripción . La vista previa en vivo también es muy conveniente. Me ayuda a detectar errores más fácilmente al crear y personalizar el formulario.

Para aprender a usar más complementos de formularios de contacto, ¡siga nuestro próximo artículo de esta serie! Si tiene alguna pregunta sobre WPForms o sugiere algún complemento de formulario de contacto, no dude en dejarlo en la sección de comentarios.