Cuando construimos un sitio web independiente, en nuestro sitio web, como Contáctenos, o algunos sitios tob, a menudo agregamos algunos formularios de contacto con un efecto similar a este. Bueno, hemos compartido otro complemento de formulario con usted antes, que es formulario de contacto 7 es el complemento de formulario que vemos ahora, pero hay un problema con este complemento de formulario. Después de abrirlo, encontraremos que utiliza códigos cortos al configurar el formulario. Por ejemplo, queremos insertar un formulario de texto. , insertaremos directamente dicho código corto de texto, pero el efecto mostrado por el código corto no es particularmente bueno. Por ejemplo, nuestro nombre muchas veces no necesita ser largo. Esperamos que el nombre y la dirección de correo electrónico se coloquen juntos. Bueno, si no conoces la interfaz, no podrás modificarla.

formulario de contacto 7 interfaz de edición de formularios

Introducción al complemento wpforms:

De hecho, cuando construimos un sitio web independiente, también usaremos otro complemento de formulario muy famoso llamado WPforms. Este complemento es visual y podemos arrastrar y soltar directamente el módulo de formulario en su interior. Ahora te lo demostraremos. Si tiene WPforms instalado, entonces este formulario de contacto 7. Simplemente elimínelo; ambos tienen la misma función.

Introducción al complemento wpforms

Instalar el complemento de formulario wpforms:

Ahora, instalamos el complemento de manera similar, hacemos clic en cargar y seleccionamos el complemento que hemos preparado en el escritorio. Su última versión es la 1.84. Si tiene una actualización de versión más adelante, puede descargarla directamente desde el artículo sobre cómo aprender a crear un sitio web. Eso es todo.

Por supuesto, también se proporciona un paquete chino. No lo necesitamos ahora porque cuando usamos un sitio web independiente, generalmente usamos inglés y hacemos clic para abrir la instalación. Una vez completada la instalación, podemos activar este complemento. Después de una activación exitosa, ingresará a dicha interfaz. Agrega una función a nuestro lado izquierdo.

Instalar el complemento de formulario wpforms

El complemento wpforms establece la interfaz de configuración;

Primero, entramos en la configuración y hacemos clic en configuración. Entonces, este complemento de formulario tendrá algunas configuraciones simples. Primero, vemos el complemento actual. Se activa y luego tendrá algunas configuraciones predeterminadas. No necesitamos modificar la configuración.

configuración del complemento wpforms

El otro es nuestro correo electrónico de envío, por lo que también podemos modificar el formato de este correo electrónico para que, en circunstancias normales, lo utilicemos de forma predeterminada y se pueda mostrar normalmente. También existe un proceso de imitación de basura. Por ejemplo, si algunas personas completan nuestros formularios al azar, en este momento podemos identificar si son robots. Esto es principalmente una función.

validación del complemento wpforms

También hay algunas otras configuraciones. Podemos echarles un breve vistazo. Esto es porque después de enviar el correo electrónico, tendrá una descripción, como qué elementos son necesarios. Luego, si no completa ningún elemento, por ejemplo, el correo electrónico se configura en los campos obligatorios. Si no completa el correo electrónico, le dirá que el correo electrónico es obligatorio. También hay algunas otras instrucciones. Por ejemplo, si envía correctamente y no envía, habrá algunas explicaciones. Por supuesto que las hay. Si el texto es normal, podemos usarlo por defecto.

notificación de información del formulario wpforms

Generalmente no utilizaremos este formulario para pagar. Se pueden utilizar otras configuraciones de forma predeterminada y no es necesario configurarlas.

Cree formularios usando wpforms;

La función de formulario que usamos principalmente aquí, abrimos todos los formularios, primero creamos un formulario, hacemos clic en agregar nuevo y luego ingresaremos a la interfaz de configuración del formulario. Esta interfaz es muy sencilla. Por ejemplo, primero configuramos un Por ejemplo, puede configurar un nombre de formulario de manera informal, pero este nombre no se mostrará en la recepción. Es normal que cuando lo muestres en la recepción, necesite decir este nombre. Podemos usar inglés o pinyin.

creación de formularios wpforms

Hay dos opciones. La primera opción es crear un formulario en blanco. La segunda opción es utilizar la plantilla. Actualmente, vemos que aquí hay una plantilla simple. Podemos previsualizarlo directamente. Es para mostrar este formato. Cuando veamos estos dos contenidos, se mostrarán en una fila. Este es el valor predeterminado. No es diferente de crearlo nosotros mismos, por lo que vamos directamente a crear una nueva forma.

La mayor diferencia entre este formulario y el Formulario de contacto 7 es la visualización. Por ejemplo, puedes arrastrar y soltar todos los módulos de la izquierda. Aquí te lo demostraremos. Por ejemplo, mi formulario debe completar la información del cliente. Por ejemplo, simplemente selecciono Nombre y luego lo arrastro aquí, y aparecerá como un cuadro de entrada para el nombre.

adiciones de elementos de formulario wpforms

Después de arrastrar el cuadro de entrada, también podemos arrastrar otras cosas. Por ejemplo, podemos agregar otro correo electrónico, EMAIL o un número de teléfono. Por supuesto, también podemos agregar texto para explicarlos. Puedes simplemente agregarlos todos.

Después de agregarlo, obtendremos una vista previa. Necesitamos guardarlo y luego lo actualizaremos.

Demostración de interfaz de formulario de wpforms

configuración de diseño del módulo de formulario wpforms;

Bueno, este formulario muestra este formato. Puede arrastrar y soltar el contenido aquí, lo cual es más conveniente que el formulario de contacto 7. Luego, podemos modificar y configurar cada opción. Por ejemplo, ingresaremos a la interfaz de edición si hacemos clic en Editar. Hay varias opciones en la interfaz de edición. El primero es su encabezado. Puedes seleccionarlo. Aquí, ingrese su nombre y nombre de usuario. Por ejemplo, nuestro nombre de usuario está aquí y su formato de visualización está debajo. , porque los nombres extranjeros generalmente se componen de dos partes. Por supuesto, también puedes configurarlo según tus necesidades. Aquí simplemente lo configuramos. También hay una descripción a continuación. Por ejemplo, puedes decirle qué ingresar aquí se explica a continuación.

Configuración de diseño del módulo de formulario wpforms

El último es un elemento obligatorio. ¿Es necesario este artículo? Si selecciona un campo obligatorio y está vacío, no se enviará. También hay algunas opciones avanzadas. Las opciones avanzadas consisten en establecer su tamaño y parte del contenido, incluida la adición de algunos estilos CSS. Hay otra lógica a continuación. ¿Qué significa esta lógica? Si lo abrimos, ¿debería mostrarse este módulo de formulario? Por ejemplo, si lo mostramos normalmente, le daremos una condición para su visualización. Por ejemplo, solo después de completar el número se vinculará al módulo de formulario. Sólo después de completarlo, si está vacío, se mostrará.

Entonces, si lo guardamos, el resultado final es que no podemos ver el nombre de usuario porque solo se mostrará después de completar los números. Podemos guardarlo y actualizarlo, y veremos que no está. Donde ingresamos el nombre, si solo ingresamos algunos números aquí, se mostrará, por lo que significa una opción lógica.

Por supuesto, esto depende de tus propias necesidades. Si no lo necesita, simplemente apáguelo. Entonces, las otras opciones son similares. Por ejemplo, en el segundo ocurre lo mismo cuando ingresamos EMAIL. Podemos establecer un encabezado aquí, luego describir si es un elemento requerido y si este correo electrónico debe confirmarse. Es decir, ingresa una dirección de correo electrónico y luego aparecerá aquí un cuadro de confirmación. Debe enviar un código de verificación y luego completar el correcto antes de poder enviar el formulario. Normalmente, en circunstancias normales, no lo configuraremos así. A menos que sea algún contenido especial, lo necesitamos con anticipación. Su estilo también tiene una lógica y la lógica de configuración de todos los módulos es exactamente la misma.

configuración del elemento de formulario wpforms

Vemos que el nombre a continuación también es el mismo. ¿Es un campo obligatorio? Si es un campo obligatorio, agregue un símbolo de aviso y luego agregue lógica a sus opciones avanzadas. Otros módulos son similares. Simplemente agréguelos según sus propias necesidades.

A veces, necesitamos una situación en estos entornos. Por ejemplo, necesitamos poner la dirección de correo electrónico y el nombre de usuario en una fila en lugar de dos porque el nombre es corto. En este momento, podemos usarlo. En el módulo de diseño, vemos un diseño. Primero retiramos este diseño. Después de detenerlo, primero se divide en dos columnas. Podemos poner nuestro nombre a la izquierda y el correo electrónico a la derecha. Luego, también podemos editar el ancho de esta área. Por ejemplo, podemos hacer que el lado izquierdo sea más ancho y el derecho más estrecho, o el lado izquierdo más estrecho y el derecho más ancho. Simplemente configúrelo así. Después de configurarlo, guárdelo y luego actualícelo. Se mostrará como una fila, pero debajo está el número de teléfono móvil, por lo que, por supuesto, puedes ajustar su ancho; simplemente configúrelo en su estilo.

Por ejemplo, editemos este y luego mostrémoslo como una fila. En este caso, no necesitamos ningún conocimiento de front-end y podemos diseñar un formulario muy hermoso.

También hay un escenario, y el escenario son sus reglas. En primer lugar, el nombre de su formulario y la descripción del formulario solo están aquí si puede verlos. A continuación se muestra un botón de envío. Ahora vemos que el botón de enviar se llama enviar para que pueda configurarlo para otro contenido. Bien, después del envío, habrá un proceso de espera. Hay algunas opciones avanzadas a continuación, como agregar algunos estilos CSS. Luego hay otro a continuación: el envío Ajax significa que la página no se actualizará cuando enviemos este formulario. Todo el Ajax significa esto. Envíe en esta página sin cambiar la dirección del enlace.

Hay otro más abajo que forma parte de la configuración de la que hablamos antes. Le agregamos una operación anti-bot. Normalmente usaríamos Cloudflare, que es gratuito. Después de configurarlo, por supuesto, debemos seguir algunos de los requisitos aquí. Luego, solicitamos una cuenta. Una vez completada la solicitud, ingresa el número de cuenta y el efecto será así.

34

Cuando la gente lo complete, determinará automáticamente si es un robot. Si es un robot, el envío no tendrá éxito. bien. También hay algunos recordatorios en nuestra configuración. Una vez enviado correctamente, tendrá algunas instrucciones, incluidas instrucciones sobre cómo enviar correos electrónicos y cuál utilizar para enviar correos electrónicos. Por supuesto, esta forma es sólo un estilo. Para enviar, necesitamos normalizar esta función. También necesitamos usar SMTP porque le hemos dicho antes que el sistema de envío de correo electrónico de WordPress PHP a menudo falla o va a la papelera, por lo que normalmente debemos completar nuestra propia dirección de correo electrónico de envío. Necesitamos comprobarlo, como un complemento para la configuración SMTP.

El último es el botón de enviar. Una vez completado el envío, podemos explicárselo. Gracias por su envío y por contactarnos. Nos pondremos en contacto con usted tan pronto como sea posible. Ésta es una de esas explicaciones.

35

Cómo insertar el formulario creado por wp form en la página independiente;

Los otros contenidos son algunas funciones extendidas, que son normales fuera del formulario y no las necesitamos. Después de configurar este formulario, vemos que después de configurar este formulario, tendrá un código corto, y luego podemos hacer clic en el código corto, y este código corto nos ayudará automáticamente a crear una página y luego colocarla aquí. la página, esta es una manera.

Por supuesto, otra forma es apagarlo. Después de apagarlo, vemos que tendrá un código corto aquí. Luego podemos colocar este código corto donde queramos, por ejemplo, ahora copiamos el código corto y luego creamos una nueva página. Podemos completar un nombre aleatorio para esta página y agregar un código corto a continuación. Podemos usar el shortcode en Gutenberg, por supuesto, también podemos usar otros. , luego colocamos este código abreviado aquí, después de pegarlo y luego lo publicamos correctamente, luego abrimos la página recién creada y se mostrará este formulario.

36

Por supuesto, después de que se muestre este formulario, también podrá volver a la configuración que acabamos de realizar y modificarla. Esto también es posible. Se trata de utilizar wpforms, un complemento de formulario muy famoso.