Cómo crear formularios personalizados de registro e inicio de sesión de WordPress

Publicado: 2022-04-16

Los formularios son una parte esencial de cualquier sitio web de WordPress. WordPress ofrece formularios de registro e inicio de sesión muy simples y sencillos. Muchos de ustedes quieren crear formularios personalizados para que se alineen con el diseño y el color de su marca. Algunos de ustedes quieren agregar más campos a los formularios. Sean cuales sean sus razones, necesita un complemento para crear un formulario personalizado.

Hay varios complementos gratuitos de WordPress disponibles, pero esos complementos generalmente ofrecen funciones limitadas. Necesitará un complemento dedicado como ProfilePress o WPForms para crear formularios de WordPress personalizados.

En este artículo, le mostraremos cómo crear formularios personalizados de registro e inicio de sesión para su sitio web de WordPress. Le mostraremos cómo agregar campos personalizados, hacer que los nuevos formularios sean formularios predeterminados de su sitio web de WordPress y crear formularios personalizados para las páginas de pago y mis cuentas.

Empecemos.

Cómo crear formularios de WordPress personalizados

Hay varios complementos que lo ayudarán a crear un formulario de registro para su sitio web de WordPress. Pero según la facilidad de uso y las funcionalidades, hemos encontrado que ProfilePress es el mejor complemento de formulario que existe.

ProfilePress ofrece hermosos formularios prediseñados que puede personalizar según sus necesidades mediante las funciones de arrastrar y soltar. Dicho esto, el complemento es mucho más que un generador de formularios. Usando ProfilePress puedes crear:

  • Hermosos perfiles de usuario
  • Directorios de miembros que se pueden buscar y filtrar
  • Restringir el acceso a publicaciones, páginas y páginas secundarias
  • Restrinja el acceso a categorías, etiquetas, tipos de publicaciones personalizadas y taxonomías

Además de todo esto, puede expandir la funcionalidad del complemento mediante el uso de complementos como Google reCAPTCHA, Polylang, autenticación de dos factores, etc. Puede obtener más información sobre las funciones del complemento en su página de lista de funciones.

ProfilePress es un complemento premium y, para usarlo, deberá comprar una licencia que cuesta $ 79 al año para un solo sitio. Si desea usarlo para más de un sitio web, suscríbase a planes superiores.

Usemos el complemento para crear formularios de WordPress personalizados.

Creación de un registro personalizado

Instale y active ProfilePress en su sitio web de WordPress.

Paso 1: para asegurarse de que puede usar campos personalizados en su formulario, debe habilitar los Campos personalizados yendo a ProfilePress> Complementos> Campos personalizados y activar el botón .

Paso 2: Ahora ve a ProfilePress > Formularios y perfiles > Agregar nuevo > Registro .

Paso 3: A continuación, tiene la opción de editar una plantilla preconstruida o crear el formulario desde cero.

Crear un formulario desde cero requiere conocimientos de codificación y muchos de los que leen este artículo probablemente no saben cómo codificar. En ese caso, elija Drag & Drop Builder .

Paso 4: en la página siguiente, deberá nombrar el formulario y elegir una plantilla . Luego procederá a diseñar el formulario utilizando el generador de arrastrar y soltar.

PerfilPrensa

Paso 5: cree el formulario utilizando los siguientes campos personalizados:

  • Nombre de usuario
  • Dirección de correo electrónico
  • Confirmar correo electrónico
  • Clave
  • confirmar Contraseña
  • seguridad de la contraseña
  • Sitio web
  • Apodo
  • Nombre para mostrar
  • Primer nombre
  • Apellido
  • Subir foto de perfil
  • Subir foto de portada
  • Biografía
  • Seleccionar rol
  • HTML personalizado
  • reCAPTCHA

Paso 6: haga clic en el botón Vista previa en vivo para obtener una vista previa del formulario antes de guardar los cambios.

Nuevo formulario de registro

Paso 7: A continuación, desplácese hacia abajo hasta Configuración de formulario . Aquí puede cambiar las etiquetas de los botones, el color, el título y la configuración de registro.

Configuración de formulario

Paso 8: cuando esté listo, presione el botón Guardar cambios . Eso es todo. Su nuevo formulario de registro ya está listo.

IMPORTANTE: ¿Desea agregar Google reCAPTCHA, inicios de sesión sociales o autenticación de dos factores a su formulario? El complemento le permite ampliar y personalizar la funcionalidad de su sitio web. Aprende más

A continuación, hay dos cosas que debe hacer:

  1. Deberá publicar el formulario en una nueva página o publicación.
  2. Luego haga que el nuevo formulario sea su formulario de registro predeterminado de WordPress

Estamos cubriendo ambos tutoriales en dos secciones diferentes a continuación. Pero primero, echemos un vistazo rápido a cómo crear un formulario de inicio de sesión de WordPress personalizado.

Creación de un formulario de inicio de sesión personalizado

Los pasos que debe seguir son idénticos a los del formulario de registro, excepto por dos cosas:

Vaya a ProfilePress > Formularios y perfiles > Agregar nuevo > Generador de arrastrar y soltar. Y en lugar de elegir Registro, elija Iniciar sesión .

Formulario de inicio de sesión

Luego, después de haber nombrado el formulario y elegido una plantilla , notará que los campos personalizados son limitados en comparación con el formulario de registro. De todos modos, no necesita tantos campos personalizados para un formulario de inicio de sesión.

Aquí hay una lista de los campos personalizados que puede usar en su formulario de inicio de sesión:

  • Inicio de sesión de usuario (nombre de usuario o correo electrónico)
  • Clave
  • Recordar Iniciar sesión
  • HTML personalizado
  • reCAPTCHA

Todo lo demás es exactamente igual que el formulario de registro.

Cuando su nuevo formulario de inicio de sesión esté listo, continúe con la siguiente sección donde aprenderá cómo publicar los nuevos formularios (registro e inicio de sesión) y cómo configurarlos como formularios predeterminados de WordPress.

Cómo publicar los nuevos formularios en su sitio

Esto es facil.

Vaya a ProfilePress > Formularios y perfiles y seleccione Iniciar sesión o Registrarse . En el lado derecho de los formularios, debería poder ver un código abreviado. Copie el código abreviado del formulario que acaba de crear.

Nuevo formulario de inicio de sesión de WordPress

Luego, cree una nueva página yendo a Páginas> Agregar nuevo y pegue el código abreviado. Asigne un nombre a la página y presione Publicar .

Su formulario ahora está activo en su sitio web.

Así es como se ve el formulario de registro en nuestro sitio de demostración:

Regístrate

Y así es como se ve el formulario de inicio de sesión:

Inicio de sesión de usuario

El siguiente paso es hacer que el nuevo formulario sea su formulario de inicio de sesión o registro predeterminado.

Cómo configurar los nuevos formularios como su formulario predeterminado de WordPress

Vaya a ProfilePress > Configuración > Global .

En la opción Página de inicio de sesión , hay un menú desplegable. En el menú desplegable, seleccione la nueva página donde ha publicado el formulario de inicio de sesión.

Y en la opción Página de Registro , selecciona la nueva página donde tienes publicado el formulario de registro.

Configuración de ProfilePress

Eso es todo. Cada vez que alguien intente registrarse o iniciar sesión en su sitio, encontrará nuevos formularios.

Cómo crear formularios personalizados para WooCommerce

Muchos de los que leen este artículo se preguntan si pueden reemplazar los formularios de su sitio web WooCommerce. Seguro que puede. Así es cómo:

Active e instale ProfilePress en su sitio web de WooCommerce. Como dijimos anteriormente, en nuestra experiencia personal, ProfilePress es el mejor complemento que puede usar para crear formularios porque es fácil de usar y ofrece muchas funcionalidades.

A continuación, debe habilitar la integración de WooCommerce yendo a ProfilePress> Complemento> WooCommerce y activando el botón .

WooCommerce activado

Creación de formularios de registro e inicio de sesión personalizados para WooCommerce

Ya hemos cubierto los pasos que debe seguir para crear un formulario de registro e inicio de sesión anteriormente en este artículo. Deberá seguir los pasos exactos para crear formularios en su sitio de WooCommerce.

Cuando los formularios estén listos, publíquelos en dos páginas separadas. También hemos cubierto eso en la sección "Cómo publicar los nuevos formularios en su sitio".

También le mostramos cómo configurar los nuevos formularios como el formulario de registro e inicio de sesión predeterminado en su sitio web. Deberá seguir los mismos pasos en su sitio de WooCommerce.

Agregar campos personalizados a los formularios de pago de WooCommerce

Hay dos tipos de formularios de pago: registro e inicio de sesión. En esta sección, aprenderá a crear formularios de inicio de sesión o registro de pago personalizados.

Formulario de inicio de sesión de pago personalizado

¿Desea reemplazar su formulario de inicio de sesión de pago predeterminado con un formulario de inicio de sesión de pago personalizado?

Primero, creemos un formulario de inicio de sesión de pago personalizado. Ya le hemos mostrado cómo hacerlo en una sección anterior. Siga los pasos de la sección "Creación de un formulario de inicio de sesión personalizado".

¿Hecho? Ahora, ve a ProfilePress > Configuración > General > WooCommerce .

Debería ver una opción llamada Formulario de inicio de sesión de pago . Viene con un menú desplegable. Seleccione el nuevo formulario del menú desplegable y guarde su configuración.

Sus clientes deberían poder usar el nuevo formulario para iniciar sesión durante el pago.

Inicie sesión en la página de su cuenta

Formulario de registro de pago

En cuanto al formulario de registro, ProfilePress le permite agregar campos personalizados al formulario de registro de pago de WooCommerce. No necesita crear un formulario de registro desde cero. Su sitio web utilizará su formulario de registro predeterminado como formulario de registro de pago, pero puede agregar campos personalizados al formulario.

Para agregar campos personalizados a su formulario de registro de pago, primero debe crear los campos personalizados.

Vaya a WooCommerce > Configuración > Cuentas y privacidad y habilite la opción " Permitir que los clientes creen una cuenta durante el pago ".

Creación de cuenta

Luego vaya a ProfilePress > Configuración > Campos personalizados > Agregar nuevo . En la página siguiente, ingrese la etiqueta, la clave, la descripción y el tipo de campo. Guarde su configuración.

Campos Personalizados

Cuando haya terminado de crear todos los campos personalizados, agréguelos al formulario de registro de pago.

Vaya a ProfilePress> Configuración> General> WooCommerce> Campos de registro de pago y los campos que acaba de crear deberían aparecer como un menú desplegable. Selecciónelos .

En la siguiente sección (es decir, Campos de registro obligatorios), puede insertar los campos personalizados que desea que sean obligatorios.

Campos de registro de pago

Formularios personalizados de registro e inicio de sesión de Mi cuenta

Con ProfilePress, tiene la opción de configurar un formulario de registro e inicio de sesión personalizado. Primero deberá crear los formularios en su sitio web de WordPress. Simplemente siga los pasos que hemos cubierto en "Cómo crear formularios de WordPress personalizados".

Luego vaya a ProfilePress > Configuración > General > WooCommerce > Formulario de inicio de sesión de mi cuenta y seleccione el nuevo formulario de inicio de sesión que acaba de crear.

Luego vaya a Formulario de registro de mi cuenta y seleccione el nuevo formulario de registro que acaba de crear.

Formulario de inicio de sesión de mi cuenta

A continuación se muestra una vista previa de cómo podría verse en la página Mi cuenta de WooCommerce.

Mi cuenta

Eso es todo, amigos. Con eso, hemos llegado al final de este tutorial.

Pensamientos finales

Crear un registro de WordPress personalizado y el formulario de inicio de sesión es una gran idea. Puede agregar campos personalizados, recopilar más datos de usuarios y diseñar el formulario de una manera que se vea adecuada para su marca.

Si bien existen muchos complementos que lo ayudarán a crear formularios en su sitio web de WordPress, descubrimos que ProfilePress es el mejor complemento de registro de usuario y formulario de inicio de sesión. Es muy fácil de usar y se integra con las tiendas WooCommerce.

  • ¿Fue útil?
  • Sí No