Cómo crear un formulario de registro de usuario personalizado en WordPress

Si está ejecutando un sitio de membresía de WordPress u otro sitio web que permite el registro de usuarios, entonces una experiencia de registro sin problemas es muy importante. Sin embargo, el formulario de registro de usuarios de WordPress por defecto es un poco básico.

Como este formulario por defecto no tiene opciones de personalización y muestra la imagen de marca de WordPress, puede desentonar con el diseño de su sitio web.

En WPBeginner somos conscientes de la importancia de mantener una imagen de marca coherente en todos los puntos de contacto, incluido el registro de usuarios.

Al añadir un formulario de registro personalizado, puede mejorar la experiencia del usuario para los nuevos visitantes, garantizar una identidad de marca cohesiva e incluso aumentar los registros de usuarios en su sitio web de WordPress.

Este artículo le guiará a través del proceso de creación de formularios de registro front-end personalizados en WordPress.

¿Por qué añadir un formulario de registro de usuario personalizado en WordPress?

La página de registro de usuarios de WordPress muestra por defecto la imagen de marca / logotipo de WordPress, que no coincide con el resto del diseño de su sitio web de WordPress.

La creación de un nuevo formulario de registro de usuario le permite añadir el formulario de registro en cualquier página del sitio y le ayuda a ofrecer una experiencia de usuario más coherente durante el proceso de registro.

Con un formulario de registro, puede recopilar información específica de sus usuarios que puede ser exclusiva de su blog o negocio de WordPress.

Puede incluir datos de contacto adicionales, preferencias o cualquier otra información relevante para el funcionamiento de su sitio.

Por ejemplo, si está organizando un evento, un formulario de inscripción le ayudará a recopilar datos esenciales de los asistentes, como restricciones dietéticas, preferencias de sesiones o requisitos especiales.

Un formulario de registro de usuario personalizado también le permite redirigir a los usuarios en el momento del registro. Incluso puede mostrar campos de perfil de usuario adicionales, combinarlos con un formulario de acceso front-end personalizado y conectarlo con su servicio de marketing por correo electrónico.

Dicho esto, veamos cómo crear un formulario de registro de usuario personalizado en WordPress, paso a paso.

Cómo crear un formulario de registro de usuario personalizado en WordPress

La forma más fácil de crear un formulario de registro de usuario personalizado es utilizando WPForms. Es el mejor plugin de WordPress para formularios de contacto que permite crear todo tipo de formularios nuevos en WordPress.

WPForms es muy fácil de usar y ofrece un maquetador de formularios de arrastrar y soltar, para que puedas personalizar tu formulario de registro como quieras. El plugin también se integra con servicios populares de marketing por correo electrónico y servicios de pago como PayPal.

Primero, necesita instalar y activar el plugin WPForms. Para obtener instrucciones más detalladas, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, diríjase a la página WPForms ” Ajustes desde la barra lateral del administrador de WordPress para introducir su clave de licencia.

Puede obtener esta clave desde su cuenta en el sitio web de WPForms.

Una vez verificada la clave, debe visitar la página WPForms ” Extensiones desde el escritorio de WordPress.

Desde aquí, localice la extensión “Registro de usuarios” y haga clic en el botón “Instalar extensión” situado debajo.

WPForms instalará y activará la extensión de registro de usuarios en su sitio WordPress. Verá que el estado cambia a ‘Activo’ cuando la extensión esté instalada.

Ya está listo para crear su formulario de registro de usuario personalizado.

Para ello, visite la página WPForms ” Añadir nuevo desde la barra lateral del administrador.

Esto le dirigirá a la página “Seleccionar una plantilla”, donde puede empezar escribiendo un nombre para el formulario que está acerca de crear.

Una vez hecho esto, localice la plantilla “Formulario de registro de usuario” y haga clic en el botón “Utilizar plantilla” situado debajo de ella.

Esto iniciará el maquetador de formularios WPForms en su pantalla. Aquí notará las opciones de campo en la columna derecha y una vista previa del formulario en la esquina izquierda de la pantalla.

Ahora, el formulario de registro por defecto ya tendrá añadidos los campos de nombre, nombre de usuario, contraseña, correo electrónico y breve biografía.

Sin embargo, puede añadir fácilmente más campos al formulario desde el panel izquierdo y también arrastrar los campos para reorganizar su pedido / orden.

El plugin también te permite editar cada campo del formulario. Para ello, simplemente haga clic en cualquier campo de formulario, y verá ‘Opciones de campo’ aparecen en la columna de la izquierda.

Desde aquí, puede cambiar la etiqueta del campo, editar su formato, añadir una descripción, establecer un formato condicional, cambiar el campo a obligatorio, etc.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar” para guardar tus ajustes.

Nota: Si desea enviar avisos por correo electrónico a los usuarios registrados, puede consultar nuestro tutorial sobre cómo enviar correos electrónicos de confirmación tras el envío de un formulario de WordPress.

Añadir campos personalizados en su formulario de registro de usuario personalizado

WPForms también le permite conectar campos de perfil de usuario personalizados a su formulario de registro de usuario.

Para ello, tendrá que añadir campos de perfil de usuario adicionales a su sitio de WordPress, y la forma más sencilla de hacerlo es utilizando un plugin de WordPress.

En este tutorial, estamos usando el plugin Advanced Custom Fields. Sin embargo, la característica de asignación de campos de WPForms funcionará con cualquier plugin que utilice campos personalizados estándar de WordPress para añadir y almacenar metadatos de usuario.

En primer lugar, debe instalar y activar el plugin Advanced Custom Fields. Para más detalles, puede consultar nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, diríjase a la página ACF “ Grupos de campos desde la barra lateral del administrador de WordPress. Aquí, haz clic en el botón “+ Añadir grupo de campos”.

Esto le dirigirá a la página “Añadir nuevo grupo de campos”, donde puede empezar escribiendo un título para el grupo de campos.

En este tutorial, crearemos un campo personalizado para los detalles de la cuenta de medios sociales.

A continuación, desplácese hasta el menú desplegable “Tipo de campo” y elija un tipo para el campo personalizado. Puede seleccionar texto, números, imágenes, archivos, casillas de verificación, URL, contraseñas y mucho más.

Una vez hecho esto, introduzca una Etiqueta de campo que aparecerá en la página del perfil.

Por ejemplo, si desea añadir un campo personalizado para recopilar perfiles de Facebook, puede asignar al campo la etiqueta “Facebook”.

Observará que el Nombre del campo se generará automáticamente al introducir una etiqueta de campo, pero puede editarlo.

A continuación, cambie a la pestaña “Validación” de la sección “Etiqueta”. Aquí puede conmutar el interruptor “Obligatorio” para que sea obligatorio que los usuarios rellenen este campo personalizado antes de enviar el formulario.

Desde aquí puede incluso establecer un límite de caracteres para el campo.

Una vez hecho esto, cambia a la pestaña “Presentación” de la parte superior.

Ahora puede añadir instrucciones para los autores, texto de marcador de posición para el campo, atributos de envoltura, etc.

Después, también puede añadir lógica condicional al campo personalizado que está creando cambiando a la pestaña “Lógica condicional” de la parte superior.

Una vez realizados los cambios, desplácese hasta la sección “Reglas de ubicación”. A partir de aquí, debe establecer un conjunto de reglas para determinar qué pantallas utilizarán estos campos personalizados.

Como queremos que este campo aparezca para todos los perfiles de usuario, tendremos que seleccionar la opción “Rol de usuario” del menú desplegable de la izquierda.

A continuación, deje el menú desplegable del centro como está y elija la opción “Todos” en el menú desplegable de la derecha.

Ahora, el grupo de campos personalizados que estamos creando se mostrará para todos los perfiles de usuario.

A continuación, cambia a la pestaña “Ajustes de grupo” de la parte superior.

Una vez allí, asegúrese de que el grupo de campos está activo deslizando el conmutador de No a Sí.

Una vez hecho esto, también puede añadir otros campos personalizados al grupo de campos haciendo clic en el botón “Añadir campo” situado en la parte superior de la página.

Por ejemplo, si desea crear varios campos de medios sociales, puede hacer clic en el botón “Añadir campo” y empezar a personalizar el campo para otras plataformas de medios sociales.

Tenga en cuenta que todos los campos que cree formarán parte del mismo grupo de campos.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar cambios” de la parte superior para guardar tus ajustes.

Ha publicado correctamente su grupo de campos.

Ahora, para ver el campo personalizado que ha creado, diríjase a la página Usuario ” Perfil desde el área de administrador.

Aquí verá sus campos personalizados añadidos en la parte inferior de la página de perfil.

Ahora que ha creado un campo de perfil de usuario personalizado, tendrá que añadirlo al formulario de registro de usuario personalizado en WPForms.

Después, también tendrás que asegurarte de asignar el campo del formulario al campo personalizado para que los datos se almacenen correctamente.

Para hacer esto, visite la página WPForms ” Todos los Formularios desde el escritorio de WordPress. A continuación, enlaza el enlace “Editar” bajo el formulario de registro de usuario que acabas de crear y guardar anteriormente.

Esto abrirá su formulario en el maquetador de formularios WPForms. Una vez allí, simplemente arrastre un campo desde el panel izquierdo para añadirlo a su formulario.

En este ejemplo, estamos añadiendo un campo ‘Sitio web/URL’ a nuestro formulario.

Al añadir el campo Sitio web/URL, haga clic en él para abrir las propiedades del campo en la columna de la izquierda.

A continuación, cambie la etiqueta del campo Sitio web/URL por el nombre del grupo de campos que ha creado.

Si lo desea, también puede añadir una descripción para el campo.

Después, no olvides hacer clic en el botón “Guardar” para guardar el formulario.

A continuación, debe hacer clic en el botón “Ajustes” situado en la esquina derecha para acceder a los ajustes avanzados del formulario y a la asignación de campos. En la página de ajustes, haga clic en la pestaña “Registro de usuarios”.

WPForms mostrará ahora sus campos de formulario y un menú desplegable debajo de ellos para seleccionar el campo de registro de WordPress con el que asignarlo.

Usted notará que WPForms asignará automáticamente sus campos por defecto como Nombre, correo electrónico, contraseña y más.

Desde aquí, elija su opción de nombre de grupo de campos en el menú desplegable bajo la opción “Sitio web”.

A continuación, desplácese hasta la sección “Meta de usuario personalizada”.

Puede introducir el nombre del grupo de campos que creó anteriormente en la opción de metatecla personalizada y, a continuación, seleccionar el campo de formulario personalizado con el que desea asignarlo en el menú desplegable.

Nota: Si desea enviar avisos por correo electrónico a los usuarios registrados, puede consultar nuestro tutorial sobre cómo enviar correos electrónicos de confirmación tras el envío de formularios de WordPress.

Por último, haga clic en el botón “Guardar” de la esquina superior derecha de la pantalla para guardar los ajustes.

Añadir su formulario de registro de usuario personalizado en WordPress

WPForms hace que sea muy sencillo añadir formularios a tus entradas, páginas y widgets de la barra lateral de WordPress.

En primer lugar, debe abrir una entrada/página existente o nueva en la que desee añadir el formulario de registro personalizado.

Una vez allí, haz clic en el botón “Añadir bloque” (+) de la esquina superior izquierda para abrir el menú de bloques.

Desde aquí, localice y añada el bloque WPForms a la página/entrada.

A continuación, puede seleccionar su formulario de registro personalizado en el menú desplegable del propio bloque.

Ahora verá la vista previa de su formulario de registro en el editor de WordPress. Siga adelante y publique su entrada o página para ver el formulario de registro personalizado en acción.

Añadir el formulario de registro de usuario personalizado a la barra lateral

WPForms también le permite añadir su formulario de registro de usuario personalizado en su barra lateral. Simplemente visita la página Apariencia ” Widgets desde el área de administrador y haz clic en el botón ‘Añadir Bloque’ (+).

Esto abrirá el menú de bloques desde donde podrá añadir el bloque WPForms a la pestaña de la barra lateral en la página ‘Widgets’.

Después, sólo tiene que seleccionar el formulario de registro de usuario en el menú desplegable del bloque WPForms.

Cuando hayas terminado, no olvides hacer clic en el botón “Actualizar” para guardar tus ajustes.

Ahora puede visitar su sitio web para ver el formulario de registro de usuario en la barra lateral del sitio web.

Añadir el Formulario de Registro de Usuario Personalizado en el Editor de Sitio Completo

Si estás usando un tema de WordPress basado en bloques, entonces no tendrás la página de widgets. Para añadir el formulario de registro en la barra lateral con el Full Site Editor (FSE), dirígete a la página Apariencia ” Editor desde la barra lateral del administrador.

Una vez allí, haga clic en el botón “Añadir bloque” (+) de la esquina superior izquierda para abrir el menú de bloques.

A partir de aquí, debe encontrar y añadir el bloque WPForms al lugar que prefiera de su sitio web.

A continuación, seleccione el formulario de registro en el menú desplegable del propio bloque.

Por último, haz clic en el botón “Guardar” para establecer los ajustes.

Ahora visite su sitio web para ver el formulario de registro de usuario personalizado en acción.

Bonificación: Cree una página de acceso personalizada con su formulario de registro

Cuando añada su formulario de registro a una página de su sitio web, WordPress utilizará por defecto la disposición / plantilla / diseño / estilo de su tema.

Sin embargo, puede crear una impresionante página de registro desde cero utilizando un maquetador de páginas de destino de WordPress.

SeedProd es el mejor maquetador de páginas para WordPress. Es fácil de usar y ofrece un maquetador de arrastrar y soltar que te ayuda a crear todo tipo de páginas de destino. El plugin también ofrece plantillas prediseñadas y un montón de características de personalización.

En primer lugar, debe instalar y activar el plugin SeedProd en su sitio. Para obtener instrucciones detalladas, puede consultar nuestro tutorial sobre cómo instalar un plugin de WordPress.

Tras la activación, visite la página SeedProd ” Ajustes para introducir la clave de licencia del plugin. Puede encontrar esta información en su cuenta en el sitio web de SeedProd.

Después de verificar su clave, ya está listo para crear una página de acceso con su formulario de registro.

Para empezar, diríjase a la pantalla SeedProd ” Páginas de destino desde la barra lateral del administrador y haga clic en el botón “Establecer una página de acceso”.

Esto le llevará a la pantalla “Elegir una nueva plantilla de página”, donde podrá seleccionar una plantilla prefabricada para la página de acceso que está a punto de crear.

Tras seleccionar una plantilla, aparecerá una ventana emergente.

Ahora debe introducir un nombre para su página de destino y una URL. Una vez hecho esto, siga adelante y haga clic en el botón “Guardar y empezar a editar la página”.

A continuación, puede editar su página de acceso utilizando el editor de arrastrar y soltar de página de destino de SeedProd.

Para ello, seleccione un bloque del menú de la izquierda y arrástrelo hasta el lugar de la página de acceso donde desee añadirlo.

Por ejemplo, puede añadir un titular, una imagen, un vídeo o un bloque para compartir en redes sociales a su página de destino.

Una vez hecho esto, dirígete a la sección Bloques avanzados de la columna de la izquierda.

Desde aquí, seleccione el bloque “Formulario de contacto” y colóquelo en su página de acceso.

Le sugerimos que borre el bloque existente de nombre de usuario y contraseña de la plantilla para que los usuarios no tengan que introducir las credenciales de acceso / acceso dos veces.

A continuación, haga clic en el bloque WPForms de su página de acceso para establecer sus ajustes en la columna de la izquierda.

Ahora verá la opción “Seleccionar un formulario” en el menú.

A continuación, seleccione su formulario de inscripción en el menú desplegable.

Ahora debería ver una vista previa de su formulario de registro en el maquetador de páginas de destino.

Por último, no olvides hacer clic en el botón “Guardar” para guardar los cambios.

Después, puede dirigirse a la pestaña “Conectar” e integrar diferentes servicios de marketing por correo electrónico con su formulario de registro.

SeedProd se integra fácilmente con los servicios populares de marketing por correo electrónico como Drip, Constant Contact, AWeber, y más, que pueden ayudar a mejorar su lista de correo electrónico.

A continuación, puede ir a la pestaña “Ajustes de página” y cambiar el estado de la página a “Publicar” en “Ajustes generales”.

Incluso puede editar el título y la URL de la página y activar el enlace SeedProd desde esta pestaña.

Si desea optimizar su página para los motores de búsqueda, vaya a la pestaña SEO.

Desde aquí, puede establecer los ajustes introduciendo un título SEO, una descripción, una miniatura de medios sociales, etc.

SeedProd también le permite añadir fragmentos de código en los ajustes de Scripts. Una vez que esté satisfecho con los ajustes, simplemente haga clic en el botón “Guardar” en la parte superior y cierre el maquetador de páginas.

A continuación, diríjase a la pantalla SeedProd ” Páginas de destino y active el conmutador situado bajo la página de acceso para que su página quede “Activa”.

Ahora puede visitar su página de acceso para ver el formulario de registro en acción.

Esperamos que este artículo te haya ayudado a aprender cómo añadir fácilmente un formulario de registro de usuario personalizado en WordPress. También puedes consultar nuestra guía definitiva sobre el uso de formularios en WordPress o nuestra selección de los mejores plugins de registro de usuarios para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.