Crea un formulario de WordPress en varios pasos

1. Introducción: Bienvenido de nuevo a otra impresionante clase de Skillshare conmigo. Siempre es un placer tenerte aquí. En esta clase. Quiero mostrarte cómo construir un impresionante formulario de varios pasos para tu sitio web de WordPress. Y no sólo cualquier formulario de varios pasos, sino un formulario de varios pasos con un botón de pago al final o en el último paso. Para que puedas conocer a las personas a través esos diferentes pasos donde puedan seleccionar diferentes entradas y configuraciones para el servicio que estás ofreciendo. Y al final se les presentará el monto que se supone que falsifican y son muy estratégicos Botón de Pago colocado en el último paso para que puedan hacer su pedido. Estará mirando eso en detalle, y te estaré mostrando cómo hacer todo eso con herramientas gratuitas. No pagarás por ningún plug-in o servicio en absoluto. acaso es tu primera vez viéndome. He estado enseñando aquí mismo en Skillshare durante los últimos 1.5 años. Pero he estado usando WordPress durante los últimos cuatro años entrando en el quinto año ahora, nuevo, bastante experiencia usando las diferentes herramientas que WordPress tiene para ofrecer. La una parte en la que me gustó la maestría es buscar las mejores y más asequibles y preferiblemente herramientas gratuitas para usar para construir sitios web. Entonces si buscas una forma de construir un formulario de varios pasos que acepte el pago en el último paso. Esta es la clase para ti. Entonces sin perder más tiempo, comencemos. Muy bien. 2. Instalación del complemento: Entonces aquí estamos. Se trata de una nueva instalación de WordPress. Por supuesto, lo primero que tenemos que hacer es agregar el plugin que nos ayude a crear el formulario. Y vamos a usar un plugin de forma impresionante llamado formulador porque es gratuito y tiene características muy potentes. Así que vamos adentro. Logins, Añadir Nuevo. Entonces no estamos subiendo un plugin. Lo estamos instalando desde el repositorio de plugins. Entonces voy a hacer una búsqueda aquí para formulador. Aquí es creado por WPA AMU dev. Para que como se puede ver en este momento, cuenta con 200 mil más instalaciones activas. Voy a hacer clic en instalar ahora. Ya está instalado, así que lo activaré. Aquí está ahora activo. Estos son los dos plugins que vienen por defecto con cada nueva instalación de WordPress. Entonces seleccionaré los dos, y luego los eliminaré selectivamente del menú desplegable y luego aplicaré. Ahora se han ido. Sólo tenemos formulador como el único instalador, el plug-in. Lo siguiente que queremos hacer es ahora ir dentro del formulador. Lo encontrarás en algún lugar casi en la parte inferior de este menú lateral izquierdo. Por lo que voy a hacer clic más adelante. Ahí lo tenemos. Entonces este es el tablero de instrumentos del formulador dentro de tu tablero de WordPress. En otras palabras, aquí es donde estarás viendo resúmenes de cómo se están desempeñando tus formularios. Y también tienes atajos para crear nuevos formularios, encuestas, y básicamente cosas de administración. Así es como instalar el plug-in. En la siguiente lección, Veamos cómo crear los foros. Te veré en breve. 3. Agregar una entrada de formulario: Bienvenido de nuevo. Entonces para crear un formulario, lo que tenemos que hacer es ir aquí mismo mientras aún estamos dentro del tablero, desplázate para crear formularios. Y podemos hacer click en esto y nos llevarán a crear un nuevo formulario, o podríamos ir a Formularios, también tendremos la opción de crear o importar un formulario. Entonces, antes que nada, déjame cerrar esto abajo. No necesitamos eso. Voy a hacer clic en crear un formulario. Porque se trata de un multi-paso, una forma muy personalizada que estamos creando. No hay plantilla prefabricada que podamos utilizar para ese fin. Así que vamos con blanco. A partir de una pizarra en blanco. Vamos a darle un nombre. Lo llamaré paso realizado. Ahora haga clic en Crear. Ahora nuestro formulario está listo para ser poblado con campos. Entonces aquí es donde estaremos insertando campos. Notarás que el nombre aparece aquí arriba y podemos cambiarlo desde aquí. Ahora que lo llamamos paso realizar, podemos cambiarlo a ahora el nombre se quedará automáticamente para ser forma de varios pasos. Entonces sigamos adelante e insertemos campos. El primer campo necesitará estos un menú desplegable porque necesitamos que alguien pueda seleccionar y eso se llama select. Entonces haré clic en eso y luego insertaré campos. Y traerá los ajustes para ese tipo específico de entrada. Por lo que aquí podemos añadir una etiqueta para ese campo. Entonces digamos tipo de sitio web. Supongamos que estamos dirigiendo una empresa de diseño web. Y supongamos que estamos creando este tipo de formulario para permitir a las personas elegir una configuración y configuraciones diferentes que necesitan para su sitio web. Y luego consigue un precio dependiendo de las características que elijan para su sitio web y luego pague esa cantidad. Sitio web. Supongamos aquí queremos agregar un placeholder preguntándoles qué tipo de sitio web. Entonces. Ahora aquí tenemos dos opciones pre-pobladas ya. Permítanme solo aplicar eso por un segundo antes de hagamos cambios a ese aplique. Este es nuestro campo. Como se puede ver ahora lee página web. Y si lo previsualizamos, este es el placeholder acabamos de agregar qué tipo de sitio web y nuestra etiqueta YS sitio web. Si hacemos clic en el menú desplegable, tiene la opción uno y la opción dos. Déjame cerrar eso. Si lo abrimos de nuevo. Ahora entiendes por qué tenemos estas dos opciones. Nosotros también podemos cambiar eso. Porque estos serán los diferentes tipos de sitios web que alguien puede elegir. E-commerce, tal vez blog personal. Y podemos sumar tantas opciones como necesitemos haciendo clic en eso. Agregaré una tercera. Página web de la revista. Permítanme añadir una opción más. ¿ Qué tipo de sitio web? Escuela en línea. Muy bien. Ahora que tenemos estas diferentes opciones, permítanme simplemente aplicar eso rápidamente. Si lo previsemos ahora. Ahora tenemos estos diferentes tipos de sitios web en el menú desplegable y alguien puede seleccionarlo o bien, Déjame cerrar eso hacia abajo, abriéndolo de nuevo. Ahora tenemos que dar un precio a cada una de estas opciones porque cada tipo de sitio web podría costar una cantidad diferente, irá dentro de los cálculos. Y luego diremos habilitar, elegir si permitir que estos campos se usarían en los cálculos o no. El valor en los cálculos es el mismo que el valor de entrada de este campo. Entonces habilitemos eso. Y como pueden ver, aquí aparecen nuestras diferentes opciones, esperando que ingresemos el costo específico de crear cada opción. Digamos que cobraremos $80 por una tienda de comercio electrónico. Digamos 15 dólares. Para un blog personal y sitio web de revistas, digamos $53 por una, para una escuela en línea. Digamos 45 dólares. Ahora lo que tenemos que hacer es ir dentro de los ajustes. Si entramos en el estilo, este es solo un lugar para agregar CSS adicional, pero realmente no es necesario agregar ningún CSS aquí porque veremos cómo editar la apariencia de los formularios en la siguiente lección. Volviendo dentro de los ajustes, aquí es donde se establecen cosas como si este es un campo obligatorio o no. Y por supuesto, este es un campo obligatorio. Tienen que elegir el tipo de sitio web que necesitan. Si seleccionamos requerido, ingresaremos un mensaje de error que aparecerá en caso de que no lo sientan. Entonces digamos, por ejemplo, se requiere este campo. Realmente no necesitamos estas otras opciones aquí, pero puedes seguir adelante y jugar con ellas y ver qué hacen. Ahora que tenemos eso, voy a seguir adelante y aplicar. 4. Crear los pasos de la paginación de formularios: Lo que tenemos que hacer a continuación es agregar campos adicionales para nuestro formulario. Así que permítanme duplicar esto en lugar de agregar uno nuevo. Éste podría ser si el cliente necesita hosting o no. Entonces Hosting. ¿ Necesitas hospedaje? Por supuesto las opciones serán sólo dos opciones, sí o no. Así que eliminemos estos dos para los cálculos ahora si lo necesitan si lo eligen, sí, necesito hosting. Por supuesto, pongamos el precio por hospedaje. Digamos 2424 dólares. Saber, por supuesto que debería ser 0. No les cobraremos si dicen que no quieren hospedar. Volvamos aquí. Creo que estamos bien, así que aplica eso. Y ahora tenemos estos dos campos. Preview que necesitas hosting sí o no. Voy a seguir adelante y sumar dos campos más aquí. Nuestro campo sigue siendo un campo selecto. Quiero decir insertar campos. El sello podría ser algo así como número de páginas. ¿ Cuántas páginas necesitas en tu sitio web? 510. Vamos a sumar uno más, 1515 más. De acuerdo, habilitemos los cálculos aquí para cinco páginas cobrarán tal vez capacitación por diez páginas, 3038 por 15 más 45. Y apliquemos eso. Ahora tenemos esos tres campos. Previsualización que están bien, se ve bien. Estos tres campos conformarán el primer paso del formulario. Ahora vamos a crear, ahora vamos a insertar campos que entrarán en el segundo paso del formulario. Insertaré campo. A lo mejor podríamos añadir algo así como área de texto. Y luego inserte campo. Ahora tenemos un área de texto InputField. Cambiemos la etiqueta a comentarios para que en caso de que tengan algo que agregar como comentario. Añade tu mensaje o comentarios aquí. Aplicar eso. Y ahora aquí lo tenemos. Observaciones. Si previsualizamos eso, notarás que aún no tenemos pasos. No hemos creado el segundo paso de la forma. Para ello, lo que tenemos que hacer es insertar campo. Podemos insertarlo desde aquí o aquí. Necesitamos un salto de página. Por lo que haré clic en eso y luego insertaré campos. Arrastraré este salto de página justo encima comentarios hasta que esa línea azul se muestre por encima de él. Ahora el salto de página está justo antes de los comentarios, lo que significa que el segundo paso comienza desde aquí. Si previsualizamos eso, ahora notarás que tenemos dos pasos. Y si hacemos click maxed, en primer lugar, porque dijimos que estos campos deben ser requeridos, este es el mensaje que escribimos como mensaje de error. Entonces eso significa que necesitamos seleccionar al menos una opción, blog personal. Sí, necesito hospedaje. Y ahora podemos hacer click siguiente. Y esta es nuestra área de texto de comentarios. Pero quiero hacer de esto una forma de tres pasos. Por lo que tal vez podríamos insertar algunos campos más. Así que vamos a hacer clic en insertar campos. Voy a seguir adelante y seleccionar esto, seleccionar entrada porque tiene sentido para mí. Por supuesto que no hemos tocado estos otros campos de entrada. Tocaremos unos cuantos más. Pero la tarea o proyecto para ti será averiguar cómo se usan estos otros tipos de campos de entrada y dónde pueden aplicar en tu formulario. Entonces por ahora, sigamos adelante y seleccionemos ese tipo de campo selecto. Y vamos a darle una etiqueta. Pagos habilitados. Entonces. ¿ Necesitas opciones de pago en tu página web? No, claro. Ahora vamos a introducir dos opciones como PayPal y vamos a agregar raya. Raya. Ahí lo tenemos. Y ahora si vamos dentro de los cálculos y habilitamos eso, NO será $0 PayPal, tendrán que pagar una franja adicional de $13, tal vez un adicional de $17. Apliquemos eso. La opción de pagos habilitados estará en la segunda página porque tenemos un salto de página. Pero quiero agregar otro salto de página. Y en lugar de agregar uno nuevo a partir de ahí, solo duplicaré éste. Y ahora tenemos dos. Y arrastraré esto hasta el final, al fondo. Entonces quiero traer observaciones justo después del salto de página. Porque tenemos estos tres sitios web que hospedan número de páginas y luego tenemos un salto de página, luego los pagos habilitados. Sí o no. Permítanme traer este número de páginas. El segundo paso. Déjame ponerlo justo debajo de ahí porque hay algo que quiero mostrarte. Ahora tenemos alojamiento de sitios web, luego Salto de página, número de páginas, pagos habilitados, y otro salto de página después comentarios. Veamos eso en acción. Entonces la primera página tiene, ¿qué tipo de sitio web necesitamos alojamiento personal de blogs? Sí, necesitamos hosting. Segundo paso, número de páginas. ¿ Cuántas páginas necesitas? Tal vez diez. ¿Pagos habilitados en la página web? Sí, necesitas que PayPal esté habilitado en la página web. Entonces el siguiente paso, tenemos el campo de observaciones. Entonces, por último, lo que tenemos que hacer es sumar el pago en el último paso. Entonces veamos cómo hacer eso. 5. Añadir el botón de PayPal del formulario: Entonces sigamos adelante y agreguemos más campos. Y por supuesto, en la página de pago, necesitamos tener el nombre y el correo electrónico. Entonces nombre, correo electrónico y PayPal. Voy a seguir adelante e insertar campos, los tres campos. Por supuesto que ahora viene después de los comentarios. Tenemos nombre, papeles de correo electrónico, por lo que eso significa que necesitamos un salto de página aquí mismo. Yo duplicaré eso. Ahora tenemos dos, así que lo arrastraré justo después de comentarios que ahora es nombre, correo electrónico y PayPal. Después de eso. Vamos a prever los cambios. Ahora tenemos eso. Permítanme seleccionar eso. No, máximo, número de páginas, cinco papel. A continuación, tenemos nuestros comentarios aquí. A continuación, tenemos nombre, dirección de correo electrónico, y he notado que PayPal no se presenta. Así que vamos dentro de nuestro periódico. Y ahora notarás la razón por la que no se presenta es porque no hemos conectado a nuestra cuenta PayPal con formulador conecta la cuenta de PayPal aquí. Y eso es lo que estamos haciendo en la próxima lección. Antes de ir allí, recapitulación rápida. Todo lo que necesitamos hacer para rellenar nuestro formulario con facilidad campos, insertarlo haciendo clic aquí o en este botón aquí mismo, y luego seleccionando un campo de entrada, insertándolo. Déjame cerrar esto abajo. Una cosa más que no he mencionado es que puedas reorganizar y poner estos campos de lado a lado así para que cuando los preveas lado a lado. Déjame cerrar eso abajo. Permítanme también poner esto a la derecha en el déjame también poner esos nombre lado a lado y dirección de correo electrónico. Y si las previsualizamos, blog personal lado a lado. El nombre y la dirección de correo electrónico están de lado a lado. Veamos cómo vamos a agregar pagos a este paso final aquí que alguien pueda simplemente hacer clic en pagar ahora y pagar. Pero antes de hacer eso, asegurémonos de publicar el formulario. De lo contrario, si nos alejamos de esta página sin guardar los cambios, sin publicar, lo perderemos todo y tendremos que empezar desde el principio. Vamos a seguir adelante y haga clic en publicar. Ahora, el formulario se publica con éxito. El formulario ya está listo para ser incrustado en una página o una plantilla o nuestra elección. Así que voy a cerrar eso. Y ahora veamos cómo conectar PayPal a nuestro formulario. 6. Conéctate a PayPal: Y bienvenidos de vuelta. Por lo que ahora es el momento de conectarnos a PayPal para que podamos mostrar el botón de pintura aquí mismo en los pasos finales. Entonces déjame cerrar eso abajo. Y si abrimos PayPal, no te has conectado a cuenta PayPal, conéctate a cuenta PayPal aquí. Así que sigamos adelante y haga clic aquí. Y se abrirá en una nueva pestaña. Se llevará al área Configuración del formulador, se llevará directamente a la pestaña Pagos. Entonces tenemos dos opciones, Stripe y PayPal. Conectémonos al papel. Al hacer clic que se abrirá este pop-up. Y como puedes ver, ingresa tus claves API de PayPal rest para conectarte a tu cuenta. Puedes crear una aplicación API rest. Aquí, como se puede ver, formulado realmente está haciendo las cosas fáciles para nosotros como usuarios. Y eso es una gran cosa. Así que sigamos adelante y haga clic aquí para agarrar las credenciales se llevarán a una nueva pestaña. Entonces eso significa que necesitas tener una cuenta PayPal. Aquí estamos. Aquí es donde vamos a conseguir nuestras credenciales. Necesito iniciar sesión en mi tablero. Por lo que haré clic en iniciar sesión en Dashboard. Si no tienes una cuenta de desarrollador de PayPal, necesitas crear una. No puse mi contraseña de inicio de sesión. Y sólo tiene que comprobar si soy yo. Entonces claro voy a hacer clic en Sí. Y esto es por cuestiones de seguridad. Por lo que podría obtener ese aviso o no si sí proporciona lo que se necesita. Anulaciones. Entonces ya estamos dentro. Como se puede ver, mis apps y credenciales. Tenemos una caja de arena y tenemos un vivo. Y si puedo volver al interior de esta área, dentro de mi dashboard en la pestaña WordPress, tenemos el ID de cliente sandbox y sandbox secret. Entonces tenemos el ID de cliente en vivo y el secreto en vivo. Entonces entrando aquí tenemos la caja de arena y vidas. Entonces empecemos con credenciales de un sandbox. Lo que necesito hacer es simplemente hacer clic en Crear aplicación, darle un nombre. Por ejemplo, nueva app. Entonces tenemos estos dos tipos aquí. Para elegir. Acepta pagos como comerciante, vendedor, mueva pagos para vendernos como plataforma, por supuesto, necesitamos aceptar pagos como vendedor. Cuentas comerciales de Sandbox. Entonces crearé app. Se te presentarán tus credenciales. Ahora lo que necesitamos es agarrar este ID de cliente. Y ahora porque esta nueva app que he creado, estos no son un negocio real, no me conectaré a esto. Simplemente voy a hacer clic en mis abs y credenciales porque quiero usar esta app que había creado llamada visa Ken. Pero puedes usar la app que acabas de crear. Y me conectaré con eso con mi papel fuera. Por lo que ahora tenemos el ID de mi cliente. Por lo que seleccionaré mi ID de cliente aquí. Yo lo pegaré ahí. Entonces mostraré mi secreto. Puedes generar un nuevo secreto, pero usaré el que ya hemos generado. Lo pondré en su secreto sandbox. Y lo siguiente que tenemos que hacer es volver a hacer clic en Mis Apps y credenciales. Basta con hacer clic en Atrás para volver para seleccionar el modo en vivo. Entonces seleccionaré en vivo porque acabamos de elegir sandbox. Y volveré a seleccionar visa Ken porque ese es el negocio que quería conectar PayPal para seleccionar mi ID de cliente. Este es el Live ID ahora. Entonces lo pondremos en el ID de cliente en vivo. Y secreto. Asegúrate de que no se lo muestres a nadie. Pega ahí dentro, luego haz clic en Conectar. Ahora estamos conectados como se puede ver. Y si quieres desconectarte, siempre puedes desconectarte aquí. Así Guardar Configuración. Ahora la configuración de pagos se ha guardado con éxito. Y básicamente así es como conectar formulador con papel. En la siguiente lección, veamos cómo configurar el campo de pago de PayPal en nuestro formulario formulador. Te veré en breve. 7. Configurar el campo de PayPal: Y bienvenidos de vuelta. En la lección anterior, acabamos de ver cómo conectarnos a PayPal. Veamos cómo configurar el campo del formulario de pago de PayPal en nuestro formulario formulado. Volviendo al interior de las formas. Lo primero que notarás es que nuestro nombre del formulario no ha sido actualizado al nuevo nombre. Cambiamos los dos mientras estábamos editando el formulario y eso es porque publicamos el formulario con los nuevos cambios. Así que vamos adentro y editemos. Y por supuesto aquí es donde cambiamos el nombre del formulario, pero ahora desplazándonos hacia abajo, recuerda que agregamos el botón PayPal y al hacer clic en él, teníamos un mensaje de error antes de conectado al papel. Ahora ese mensaje no se puede ver aquí. Entonces lo primero que tenemos que hacer es establecer una moneda. Entonces sigue adelante y dice su moneda, yo lo dejaré en dólares. Y así nuestra cantidad no es fija. Es variable, depende de los campos que el usuario haya seleccionado. Entonces tendremos que seleccionar una variable, pero ahora aún no tenemos una variable. Tenemos que seleccionar un campo que muestre la cantidad total de efectivo que utilizan una casa para pagar dependiendo de qué campos hayan seleccionado. Y te mostraré cómo sumar ese campo. En primer lugar, vamos a cerrar esto y previsualizar nuestro botón PayPal. Por lo que seleccionaré ese e-commerce. ¿Qué está pasando? Permítanme seleccionar ese blog personal. No, a continuación. Déjame ir Siguiente. Siguiente. Ahora tenemos un botón Paypal Checkout aquí mismo. Y alguien también puede pagar con tarjeta de débito. Pero ahora, sigamos adelante e insertemos el campo que mostrará cuánto dinero necesita pagar el cliente. Y eso se llama las entradas de cálculos. Entonces seleccionaré los cálculos, insertaré campos. Entonces por supuesto, vamos a darle a esto tal vez una etiqueta diferente. El monto total facilidad. Vamos dentro de los cálculos y es aquí donde crearemos una fórmula simple para calcular el monto total. Y por supuesto, la fórmula simple es la adición de cualquier opción que la persona seleccione en cada campo. Entonces lo que tenemos que hacer es seleccionar los diferentes campos que necesitamos aquí. Entonces por ejemplo, el primer campo, sitio web de YS, Ahí es donde tenemos una opción. Permítanme cerrar esto por un segundo. Tenemos la página web y los tenemos hosting. Tienen una opción ahí. cualquier lugar donde haya una opción que involucre dinero. Tendremos la opción de seleccionar ese selector. Por lo que tenemos número de páginas, pagos habilitados y todo eso. Así que volviendo al interior de los cálculos, los cálculos, tenemos sitio web. Entonces, cualquier opción que elijan en el campo del sitio web debe agregarse a la selección de hosting que hagan. Y eso se debe agregar al número de páginas que seleccionan. Y eso se debe sumar a la opción de pagos habilitados que seleccionarán. Entonces aquí está nuestra fórmula. Elección de sitios web. La última opción de alojamiento más número de páginas más pagos habilitados. Y luego apliquemos eso. Ahora que tenemos estos cálculos, vamos a ponerlos por encima del botón PayPal, justo debajo del nombre y el correo electrónico. Ahora, yendo dentro de la variable de papel, seleccionemos cálculos y apliquemos ahí. Estos dos están conectados. Ahora, PayPal aceptará el pago del monto que mostrará la película de cálculos. Entonces si vamos dentro de revisión, por ejemplo, seleccione tienda de comercio electrónico. Digamos que no necesitamos hospedaje. A continuación, digamos que necesitamos diez páginas. ¿ Necesitamos opción de pago? Sí. Digamos que PayPal. No tienes comentarios. Y luego los cálculos muestran que tenemos que pagar un $131, digamos PayPal Checkout. Y empieza a abrir nuestro periódico. Si tienes una cuenta PayPal, si un cliente tiene una cuenta PayPal, puede iniciar sesión y completar el pago. Pueden hacer clic en tarjeta de débito o crédito. Ahora pueden ingresar todos sus detalles aquí y pagando ahora a través de papel, este mensaje de error ha aparecido porque he asesorado el pop-up de papel que estaba apareciendo. Esto es sólo para decirnos que el proceso de pago no se completó. El usuario abortó el proceso de pago de PayPal. Así que déjame cerrar eso abajo. Ahora que esa configuración, haré clic en actualizar. Nuestro formulario ya está listo para ser mostrado en el frontend de nuestra página web. Es decir, en nuestra página web. Entonces, ¿cómo mostramos estos formularios en el front-end? Hará eso en la próxima lección. Te veré en breve. 8. Mostrar el formulario en la página web: Y bienvenidos de vuelta. Ahora que tenemos nuestro formulario listo para ser mostrado en el front-end en una página web. ¿ Cómo lo hacemos? Quería mostrarte dos métodos. Uno de ellos está utilizando el método predeterminado de código corto de WordPress, y el otro está usando un constructor de páginas como Elementor. Empecemos con un método incorporado de WordPress. Entonces yendo dentro de páginas porque lo estamos mostrando en una página web. Porque mencioné esto es una instalación completamente nueva de WordPress. Estas son las dos páginas predeterminadas que vienen con cada nueva instalación de WordPress, quiero crear una nueva página, así que agrega nueva. Correcto, vamos a darle un nombre. Entonces supongamos que esta es la página de servicio o algo de ese tipo. Y debido a que estamos usando las herramientas integradas de WordPress, haré clic en Agregar para agregar un bloque. Y aquí escribiré corto. Aquí aparecerá código corto. Así que sólo seleccionaré código corto. Y ahora tenemos que escribir aquí un código corto. Por lo que voy a hacer clic derecho abrir este enlace en una nueva pestaña para que no cerremos esta página. Tenemos que agarrar un código corto del formulario formulador que creamos. Vamos a entrar en esta nueva pestaña. Iré dentro de formularios formuladores. Por supuesto que esta es nuestra forma. Lo que necesito hacer es hacer clic aquí en esta rueda dentada. La segunda y la segunda opción se copiarán código corto. Lo he copiado por si ya estás dentro del formulario. También puedes ir a esta rueda dentada y copiar código corto. Ahora, déjame volver a nuestra pestaña donde tenemos el bloque de código corto y pegarlo ahí. Eso es todo. Entonces a continuación, publiquemos la página. Publicarlo. Veamos la página. Ahí está nuestra página y nuestro formulario se muestra correctamente aquí mismo. Está funcionando como de costumbre. Nuestros cheques están funcionando porque como se puede ver, antes de que podamos ir al siguiente paso, el formulario hace los cheques y si hay algo malo, nos notifica. Permítanme simplemente seleccionar eso. No. A continuación, estos no tienen cheques. Ahí está nuestro botón de papel. Vamos a seleccionar papel. Ahora alguien puede iniciar sesión y completar su pago de $15. Recuerda que mencioné este mensaje de error aparece porque cerramos ese proceso de pago antes de completarlo, antes de que se completara. También podemos hacer clic en el método de tarjeta de débito o crédito. Aquí aparecerán los detalles y podremos seguir adelante y terminar nuestro pago. Ese es el primer método. Volviendo al interior de nuestro tablero, quiero mostrarte el segundo método usando Elementor. Así que básicamente es similar porque todavía estaremos usando un elemento de código corto. Pero por supuesto, no quiero suponer que todo el mundo viendo esta clase ha usado antes en el mentor. Solo quería asegurarme de que todos estén cubiertos. Así que ve dentro de plugins. Quiero añadir nuevo. Necesitamos agregar Elementor, elementor creador de sitios web, e instalarlo ahora. Muy bien, déjame activarlo. Esta es la configuración, este es el nuevo asistente de configuración de Elementor, por lo que tenemos que pasar por él. Sólo quiero que guardemos esto. Sáltate eso. No quiero seleccionar un tema. ahora no quiero darle un nombre al sitio porque esto es con fines ilustrativos. No quiero añadir el logo. Saltarse todos estos. Muy bien, por lo que podemos seleccionar editar un lienzo en blanco con editor Elementor. Por lo que voy a hacer clic en eso. Aquí estamos editando nuestra página. Entonces todo lo que necesito hacer mientras estoy en esta página aquí con esta edición con el editor Elementor disponible. Iré dentro de este widget de búsqueda y buscaré breves. En forma automática, aparece un elemento de código corto, pero necesitamos agregar una sección, así que voy a hacer clic en eso. Y luego agregaré tal vez una sección de doble columna. No, tal vez agreguemos una sola sección de columna, sección de columna única. Y ahí lo tenemos. Ahora, en el momento que lo agregamos, trae los ajustes para la sección. Pero no queremos eso. Queremos agregar el código corto. Voy a hacer clic en este ícono de Elementos para sacar a la vista los elementos. Nuevamente. Escribiré elementos de código corto y corto será una de las opciones allí. Voy a dejarlo ahí. Y ahora tenemos un campo para ingresar nuestro código corto. Entonces volveré a nuestro formulario por el otro. En esta otra pestaña, haré clic en este código corto de carpa dentada. Vuelve aquí, y yo lo pegaré aquí. Entonces publicaré la página. El post está en vivo. Vamos a prever. Ahí lo tenemos. Segundo método sobre cómo mostrar por si acaso estás usando Elementor Es tu creador de páginas. Entonces así es como mostrar el formulario en el front-end. Y por ahora estoy bastante seguro de que te estás preguntando, ¿y si quiero cambiar los colores? ¿ Y si no quiero esta frontera en los campos de entrada? ¿ Y si quiero cambiar el nombre de esta página uno, página dos, página tres. ¿ Cómo hago eso? En la siguiente lección, veremos cómo cambiar la apariencia o la forma para adaptarse a los colores de tu marca. Entonces nos vemos a la brevedad. 9. Personalizar la paginación de la forma: Entonces estamos de vuelta dentro de nuestro tablero de instrumentos. Ahora queremos cambiar la apariencia de nuestra forma. Y para ello, tenemos que ir dentro de la pestaña Apariencia. Y te darás cuenta al desplazarse, es el siguiente paso después de sumar todos los campos que necesitamos. Por lo que podemos hacer clic en ese o en este botón aquí, y iremos a la pestaña Apariencia. Pero antes de hacer eso, quiero cambiar estos títulos aquí para leer algo diferente, como el paso dos o cualquier cosa que quieras que digan en lugar de la página uno, página dos, página tres. Entonces cambiamos eso yendo dentro de la paginación aquí. Por lo que haga clic en eso. Y cuando abramos este pop-up, lo primero que notarás son los cuatro pasos en nuestro foro. Para que podamos cambiar estos dos pasos. Paso uno, paso dos, paso tres. Y luego completa o cualquier otra cosa que quisieras ahorrar. Veamos cómo se ve eso. Aplicar. Y vamos a prever los cambios. Ahora se ha cambiado a paso uno, paso dos, paso tres y completo. Vamos a cerrar eso. Veamos qué más podemos hacer con nuestra forma. Ir dentro de los ajustes. Podemos cambiarlo de pasos a una barra de progreso. Entonces eso significa que no tendremos paso uno, paso dos, paso tres o cuatro, seleccionando barra de progreso, solo seguirá llenándose hasta el final. Apliquemos eso y veamos cómo se ve. Al hacer clic en Vista previa. Ahora así es como se ve y sigue llenándose a ninguna parte al veinticinco por ciento. Si vamos al siguiente paso, estamos en el 5075, 100%. Volviendo ahí dentro. Veamos qué más tenemos en el pie de página. Podemos cambiar lo que dicen los botones en los pasos de nuestros formularios. Por lo que en este momento tenemos Siguiente en la página uno, tenemos el botón Siguiente. En la página dos, tenemos el botón Anterior y Siguiente, página tres, Previous y Next. En la página cuatro, sólo tenemos el botón anterior porque no tenemos un botón siguiente, sólo tenemos el botón PayPal. Puedes cambiar lo que quieras que esto diga. Voy a cerrar eso, terminar actualizado el formulario porque lo hemos actualizado. Vamos al front-end y refrescamos la página. Así que voy a golpear Control R o simplemente recargado. Ahora nuestro formulario ha sido actualizado. Muy bien, así es como editar los pasos en el formulario. A continuación, veamos cómo editar el aspecto real del formulario, cómo cambiar los colores de las diferentes entradas y estas barra de progreso aquí mismo y los botones Nos vemos en el siguiente lección. 10. Personaliza la apariencia de la forma: Aire, bienvenido. Ahora es el momento de trabajar en la aparición de los foros. Entonces vamos a incitar directamente a la apariencia. Voy a hacer clic en eso. Y como pueden ver, estamos dentro de la apariencia. El primer cambio que puedes hacer aquí es el estilo de diseño. Y tenemos algunos estilos de diseño aquí para elegir. El defecto tiene frontera. Entonces tenemos piso que no tiene frontera. Esta es la que me gusta. Pero veamos la junta de los demás y luego ninguno. Por lo que seleccionas estos si quieres usar CSS personalizado. Entonces, si sabes codificar tus propios estilos de formulario, solo puedes habilitar esto y ahora empezar a peinarlo tú mismo. Pero porque quiero suponer que no todo el mundo tomando esta clase y sabe trabajar con ver cómo escribir código CSS no irá por esta dirección. Volveremos a piso porque me gusta sin ese cuarto. Y luego la siguiente parte son los colores. Por lo que en este momento estamos usando los colores predeterminados, pero podemos cambiar a colores de disfraces. Y es aquí donde podemos editar cada aspecto de nuestra forma. entrar aquí, tenemos colores de borde, tenemos los colores de los botones. Ir a anterior, anterior. Vamos allí. Notarás que tenemos el formulario contenedor. Este es el contenedor que sostiene la forma misma. Ahora mismo es invisible, pero no necesitamos tocar eso. Ahora mismo. Me gustaría centrarme en las partes que realmente necesitamos. Por ejemplo, el botón Siguiente, el botón Siguiente, este botón justo aquí. Así que sigamos adelante y seleccionemos un nuevo color para ello. Digamos, por ejemplo, algún color aqua o digamos verde. Digamos que un color verde al hover. Queremos hacerlo. Yo diría, digamos que la naranja. Vamos a copiar eso. Porque desenfocado, también queremos que sea ese color. Por lo general, los colores de desplazamiento y enfoque suelen ser los mismos así. Ahora si actualizamos eso y vamos a nuestro formulario y actualizamos la página. Ahora tiene un verde y en el hover, es esa naranja. A continuación, queremos editar el botón Atrás. En otras palabras, los botones anteriores. Entonces si vamos a la siguiente página, por lo que ahora queremos editar el botón anterior. Por lo que sólo podemos copiar estos estos valores. Copia eso, ve dentro del botón Atrás, haz clic en eso, pegarlo ahí. Se derrumbó que amplían eso. Voltea aquí la caja de color. Copia eso. Permítanme desplazarse aquí. Y pasar el cursor. Quería ser esa naranja y desenfocada. También queremos que sea esa naranja. Actualice eso. Ahora si actualizamos esta página, selecciona y luego pasa a la siguiente página. Ahora ambos son consistentes. Entonces si estos son los colores de tu marca, ahora tus botones de formulario coinciden con los colores de tu marca. Entonces, ¿cómo cambiamos este color de barras de progreso? Volviendo aquí, colapsemos el botón Atrás y el botón siguiente. Entonces tenemos una barra de progreso. Veamos página nación barra de progreso. Aquí podemos cambiar el color. Digamos que el verde. Quiero volver aquí y guardar botón a continuación. Haga clic en eso. Vamos a copiar eso. Entonces vamos a arrastrarnos a la barra de paginación. Pega ahí dentro. Entrar. Vamos a actualizar eso. Vamos a refrescar eso. Ahora, nuestra barra de progreso está emparejando nuestro color verde de la marca de nuestra página web. No, blog personal. Siguiente. Siguiente. Siguiente. No podemos editar el color del botón PayPal porque viene directamente del papel, no desde cuatro minutos. Volvamos aquí y colapsemos esa fecha. Ya lo hemos actualizado, pero no hay problema, sólo vamos a actualizar eso. Veamos qué más necesitamos cambiar? Vamos al paso anterior. Por ahora. Esas son las partes que necesitábamos para cambiar en nuestra forma. Pero por supuesto, como puedes ver, tenemos diferentes partes del formulario que puedes personalizar hasta que estés satisfecho con tu formulario. Dejaré estas manchas. ¿ Juegas por ahí con todas estas partes? Cambia aquí una configuración, luego ve a la primera página y actualiza la página para ver qué parte se ha visto afectada. Pero tengo mucha curiosidad por ver qué vas a poder llegar. Se trata de lo creativo que serás con todas estas partes. También puedes editar las fuentes en las diferentes partes de tu formulario habilitando la edición personalizada en tus fuentes. Y por supuesto, abre cada campo o elemento al que quieras cambiar los textos. Pero no vamos a hacer eso porque ya nos gusta la fuente que estamos utilizando porque el formulario actualmente está heredando la fuente que se establece en la página web. Así es como personalizar la apariencia de nuestro formulario. 11. Establecer el comportamiento de la forma: Bienvenido de nuevo Con nuestra apariencia de formularios ahora actualizada para que coincida con los colores de nuestra marca. Ya es hora de mirar el comportamiento después de que se envíe el formulario. Para que podamos hacer clic aquí en este comportamiento o desplazarse hasta abajo hasta abajo aquí. Cualquiera de ellos puede hacerlo déjame simplemente hacer clic en eso. Y por supuesto notarás que se ha ido automáticamente a esta pestaña. Y ahora el comportamiento de envío configura lo que debería suceder cuando un usuario envía este formulario. Después de la presentación, podemos seleccionar cualquier comportamiento que queramos que tenga el formulario aquí mismo. Entonces si abro ésta que viene por defecto, notarás que tenemos tres opciones aquí. Comportamiento podemos tener un mensaje en línea que viene justo debajo o por encima del formulario después el usuario haya enviado correctamente el formulario. Y te mostraré cómo se ve. También podemos redirigirlos a una URL en su lugar. Entonces https, una vez que hagan clic en Enviar y el formulario se envíe con éxito, serán redirigidos a Google. También podemos ocultar el formulario inmediatamente después de que lo hayan enviado y mostrarles un mensaje, justo donde estaba el formulario. Así que volvamos a Mensaje Inline. Y aquí mismo tenemos una etiqueta. Esta etiqueta solo es visible para nosotros aquí mismo en el tablero de instrumentos para permitirnos identificar el comportamiento específico. Porque podría tener configuraciones diferentes de un comportamiento diferente. Entonces digamos por ejemplo, foro de diseño de sitios web. Y apliquemos eso. Y el mensaje se cerrará automáticamente después de cinco segundos. Recuerda que hemos seleccionado Mensaje en línea. Gracias por contactarnos, será el mensaje en línea que aparecerá arriba, debajo de nuestro formulario. Y esta es la etiqueta que vamos a, lo estaremos identificando por. Permítanme aplicar eso. Y ahora ves que está justo aquí. Sólo nosotros, como los admins podemos ver que se llama firma de diseño de sitios web. Así que volviendo dentro de nuestro campo por un momento, quiero quitar el PayPal. Quiero quitar las entradas de papel para que nos quedemos con un botón de enviar mensaje. Para que puedas ver cómo se ve ese mensaje de formulario en línea. Entonces lo hemos actualizado. Vamos al front-end y refrescamos la página. Recargar. Ahora vamos a seleccionar ese blog personal. No. Papel. Comentar ahí, max. Por lo que tenemos este botón enviar mensaje. Si también agregamos un nombre en gmail.com y estamos pagando $66. Entonces si enviamos un mensaje, este es el comportamiento que hemos seleccionado aquí mismo en nuestro comportamiento. Si abrimos eso, gracias por contactarnos, nos pondremos en contacto con usted breve. Ese es el mismo mensaje. Desapareció después de cinco segundos porque eso es lo que tenemos aquí. Porque se trata de una venta, pero este es un formulario de ventas. Podemos tener algo como gracias por su compra y aplicar eso. Actualicemos el formulario. Vamos vamos a ir al frente. Actualiza la página. Ahora si selecciono estos aquí. Siguiente. A continuación, Mike com y enviar mensaje. Ahora es gracias por tu compra. Y podemos cambiar este color de fondo de la respuesta yendo dentro de la pestaña Apariencia. Éxito de respuesta. Cámbialo a tal vez estas naranjas que rima con nuestra página web o tal vez digamos estos colores verdosos aquí. Entonces vamos a actualizar eso. Ahora si volvemos aquí y actualizamos la página, recargarla. Siguiente. Si necesitas un nombre. Como se puede ver, el fondo del mensaje ha cambiado. El mensaje ha desaparecido después de cinco segundos. Básicamente, volvamos al interior del comportamiento. Y hay más configuraciones aquí como método, ¿queremos usar adjuncts para enviar este formulario sin recargar la página o utilizar el método más tradicional de recargar la página. Ahora, no voy a profundizar en todos estos ajustes aquí, pero te recomiendo que vayas a ver el canal oficial de YouTube del equipo de formuladores. Se llama WPA MU Dev. Aquí está el enlace al canal. Échales un vistazo y aprende lo más posible sobre las diferentes formas con las que puedes trabajar formulados. Esto fue sólo para mostrarte cómo crear esa forma y convertirla en una forma de pasos múltiples. Entonces no podemos entrar en todos estos detalles porque eso significaría que esta clase se vuelve demasiado larga y eso no es lo que queremos. Entonces básicamente así es como construir un formulario. Déjame ir al front-end. Entonces así es como se ve la forma. Lo que hemos hecho es entender cómo crear los diferentes campos y cómo crear múltiples pasos que dejen al usuario seleccionar diferentes opciones dependiendo de lo que quiera hacer. Después, por fin, hacer su compra. Por supuesto, esto es solo el comienzo del viaje. Para obtener más información, es necesario interactuar con este plugin más. Y necesitas ver tantos videos como puedas sobre los otros ajustes que no hemos investigado. Al menos has aprendido a crear un formulario de pasos múltiples usando el formulario formulador. Y como pueden ver, aquí tenemos más opciones que no hemos explorado. Y la razón es que no queremos desviarnos del objetivo principal de la clase. Una vez que hayas aprendido a crear este formulario, debes entender cómo colocar el formulario en una página web bellamente diseñada. Y tengo varias clases aquí mismo en Skillshare mostrándote cómo diseñar hermosas landing pages usando Elementor. que puedas usar esas habilidades para diseñar hermosas páginas web y luego usar las habilidades que has aprendido en esta clase para agregar estos formularios de pasos múltiples directamente en esa página. Por lo que te recomiendo consultar mi perfil y ver las diferentes clases que tenía ahí y ver si puedes aprender algo sobre Elementor y si tienes alguna pregunta o comentario, por favor escribe justo debajo este video en la pestaña de discusiones. Y me aseguraré de responderte en cuanto pueda separarme. Espero con interés escuchar de usted hasta la próxima vez. Paz. 12. Outro: Y eso es todo de mi parte hoy. Eso es todo lo que tengo para ti en esta clase. Espero que hayas aprendido a construir un formulario de varios pasos para tu sitio web de WordPress. Y sobre todo, espero que hayas aprendido a aplicarlos a tu actual sitio web. Y como mencioné antes, puedes seguir adelante y echa un vistazo a todas las clases que se publican antes aquí mismo en Skillshare, abre mi perfil y ve en qué clase te interesa. Te enseñaré cómo construir páginas de aterrizaje impresionantes y un sitio web totalmente funcionando usando WordPress y Elementor. De lo contrario, por ahora, tengo que despedirme y te veo en la siguiente pieza.