Cómo agregar formularios de contacto usando el complemento – P2: use WPFFORMS

después Agregando todos estos campos, debe personalizar cada campo en los siguientes pasos.

Personalice las opciones generales para cada campo en general, hay dos tipos de opciones para personalizar cada campo: Opciones básicas: todos los campos contienen estas opciones y debe trabajar con ellos para que el formulario de contacto sea claro y fácil de entender.

Etiqueta: ingrese el nombre de campo que desea mostrar.
Descripción: Este es el texto debajo del campo para decirle a los usuarios qué hacer.
Obligatorio: ¡es opcional! Compruébelo para que este campo sea obligatorio.
En los próximos pasos, cuando menciono “información básica”, significa que debe lidiar con estas opciones básicas. Opciones avanzadas: hay algunas características avanzadas para cada campo. Es opcional que usted lidie con ellos, pero hay algunas cosas importantes que debe buscar
Texto sustituto: Muestre un texto dentro de los campos antes de que los usuarios ingresen datos. Este texto se puede usar como guía o ejemplo para ayudar a los usuarios a comprender fácilmente qué completar. Por ejemplo, puede establecer el texto sustituyente del campo de correo electrónico como “Ingrese la dirección de 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, cree un formulario de contacto para personas que viven en Nueva York, para que pueda ingresar una “Nueva York” en el campo de “ubicación”.
Clases CSS: Ingrese las clases de CSS en esta caja para atacar el campo. En el siguiente paso, incluiré el código en esta sección para estilizar el formulario de contacto.
Nota:
En el Formulario de contacto 7, puede usar el valor predeterminado como texto sustituto. Pero es más conveniente en WPFORMS, porque tiene la sección de texto sustituyente separada. Además, WPFFORMS tiene la sección Descripción que muestra el texto en el campo. Uso de esta manera porque hace que mi forma de contacto se vea mejor.
Puede hacer clic en el botón de la pregunta junto a sus opciones/campos para leer las instrucciones de WPFFORMS para ellas.
Además, hay algunas opciones diferentes dependiendo de cada campo. ¡Descubra cuáles son! Personalice el campo “su nombre”. Seleccione el campo de línea de texto simple y complete solo la información básica: en este campo, hay 2 opciones más en las opciones avanzadas:
Longitud del límite: verifíquelo para elegir un límite para el número máximo de caracteres que se pueden ingresar en el campo.


Máscara de entrada: ingrese máscaras de entrada para solicitar formatos de campo específicos. Lea más detalles aquí.

Personalice el campo “su número de teléfono”. Este campo no tiene nada especial. Simplemente seleccione el campo Número y complete la información básica:

Personalice el campo “su correo electrónico”. Seleccione el campo E – envíe el correo y complete la información básica para el campo:
Este campo todavía tiene una opción básica: habilitar la confirmación de correo electrónico. Puede verificarlo para solicitar a los usuarios que proporcionen su dirección de correo electrónico dos veces. Esto le asegura que su correo electrónico es correcto.
Personalice los campos “Ubicación para estudiar” y “Mayor”. Primero, elija el campo desplegable. En la sección Opciones, ingrese las opciones de campo. Puede hacer clic en (+) (-) para agregar/eliminar opciones.

Además, también puede hacer clic en el botón Agregar en el bloque para agregar más opciones simultáneamente. En el cuadro Agregar opciones, complete las opciones en el orden deseado (cada elección es una línea) y luego haga clic en Agregar nuevas opciones.

Además, en esta área, hay 2 opciones avanzadas que debería preocuparse:

Estilo: puede atacar el menú desplegable con dos opciones: clásico y moderno. El estilo moderno le permite buscar palabras clave. Por lo tanto, funciona bien en los menús con muchas opciones (más de 10 opciones). Opaco dinámico: permita a los usuarios seleccionar opciones de publicaciones o taxonomías. Por ejemplo, si elige una fuente dinámica de publicaciones como publicaciones, cada opción en el menú desplegable es una publicación en su sitio web.
Personalice el campo “Regístrese en”. Seleccione campos de cuadro de selección e ingrese opciones como campos desplegables.

En esta área, hay 2 opciones avanzadas que debería preocuparse:

Use opciones de imagen: puede usarla para ilustrar sus opciones y hacer que el formulario de contacto sea más atractivo y visto.
Elecciones aleatorias: esto puede evitar que las personas elijan una opción solo porque es la primera.
Paso 4: Configure el formulario de contacto Después de crear un formulario de contacto, debemos configurarlo. En la versión gratuita de WPFFORMS, puede configurar tres secciones a continuación: Configurar la configuración general del complemento WPFFORMS tiene instrucciones específicas para cada opción. Debe hacer clic en el botón con el signo de interrogación, leerlo cuidadosamente y prestar atención a estos campos:

Texto del botón de referencia: en el Formulario de contacto 7, debe crear el campo de referencia. Pero en WPForms, se incorpora el botón de envío. Puede cambiar el texto de este botón en esta sección con lo que desee, como registrarse, enviar correo electrónico, …

Active la protección contra el spam: a veces, los spammers pueden molestarlo a través de toneladas de “fórmulas de basura”. En este caso, debe activar esta función anti-spama. Configure las notificaciones si desea recibir una notificación de correo electrónico cada vez que un usuario envía un formulario de contacto, vaya a Configuración> Notificaciones. Puede agregar “etiquetas inteligentes” o mensaje de texto a los campos en esta sección para facilitar el manejo del correo electrónico que recibe cuando un usuario envía un formulario de contacto. Nota: Las etiquetas inteligentes pueden agregar automáticamente información a las notificaciones de formulario de contacto. Este es un ejemplo de mi configuración:
Configurar la sección de confirmación de confirmación, puede configurar los mensajes que reciben los usuarios después de enviar los formularios de contacto.
Cuando haya terminado toda la configuración, haga clic en Guardar.
Paso 5: Muestre el formulario en páginas/publicaciones para mostrar sus formularios en páginas/publicaciones, hay 2 modos. La primera forma es hacer clic en la incorporación para mostrar el formulario en una página:
Después de eso, incorpore el formulario de contacto en una nueva página o en una página existente en su sitio.
La segunda forma es ingresar el código corto del formulario de contacto en páginas/publicaciones. Le recomiendo que elija la segunda forma porque puede mostrar el formulario de contacto en publicaciones y páginas. Para hacer esto, en el tablero de administración, vaya a WPFFORMS> Todos los formularios, encuentre el formulario de contacto y copie su código corto.

Luego pegue este brevemente a las publicaciones / páginas deseadas.

Y aquí está el resultado:

Todavía no se parece al ejemplo de un formulario de contacto, por lo que tengo que peinarlo un poco. Paso 6: Stiland el formulario en el tablero de administración, vaya a WPFFORMS> Todos los formularios, encuentre el formulario de contacto y luego haga clic en Edición. Ahora, haga clic en cada campo, acceda a opciones avanzadas> Clases CSS y agregue los siguientes valores:

Su nombre y registro en: IP-100

Su número de teléfono, correo electrónico, ubicación para estudiar, especialización: IP-50

Luego acceda a la personalización> Agregar CSS, agregue este código: .wpforms-campo-Container {

Pantalla: Flex;

Flex-Wrap: envoltura;

Contenido a la justificación: espacio entre

}
.IP-50 {
Ancho: 48%! Importante;
}
.Ip-100 {
Ancho: 100%! Importante;
}
Div.wppforms-container-full .wppforms-form de entrada.wppforms-campo-medio,
Div.wpforms-container-full .wppforms-form select.wpforms-field-medium {
Ancho máximo: 100%;
}
.ip-100 ul {
Pantalla: Flex;
Contenido a la justificación: espacio entre;
}
Div.wpforms-Container-Full {
Jos de borde: 24px;
Antecedentes: #EEEEEE;
Llenado: 20px;
} Finalmente, haga clic en Publicación. Y aquí está el resultado final: