Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

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.

How to Create a User Registration Form

¿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.

Nota: WPForms también tiene una versión gratuita. Sin embargo, tendrá que actualizar al plan pro para desbloquear la extensión de registro de usuarios.

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.

Enter WPForms license key

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.

Install user registration and login forms addon

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.

Select the user registration form template

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.

Add more form fields in your user registration form

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.

Edit Field Options

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”.

Click the Add Field group button

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.

Add the field group name

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.

Choose field type and label

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.

Toggle the required switch and add character limit

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.

Configure the presentation settings

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.

Configure location rules

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í.

Toggle the active switch

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.

Save custom field group

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.

View your custom field

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.

Add a website field to your registration form

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.

Edit the label of website field

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”.

Choose custom field from the website dropdown menu

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.

Enter Custom User Meta details

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.

Add user registration form to the block editor

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.

User registration form preview

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.

Add user registration form as a widget

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.

Preview of user registration form in the sidebar

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.

Add user registration form in full site editor

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.

User registration form preview

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.

Nota: SeedProd también tiene una versión gratuita que puede utilizar. Sin embargo, vamos a utilizar el plan pro del plugin para este tutorial, ya que incluye una plantilla de página de acceso de usuario y características avanzadas 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.

Paste license key

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”.

Setup your login page

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”.

Enter a Name and URL for your login page

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.

Add blocks to your login page template

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.

Add the Contact Form block

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.

Select your registration form in SeedProd

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.

Preview of registration form in landing page builder

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.

Connect email marketing services

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.

Publish your login page from the page settings

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.

Make your login page active

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.

Registration form landing page preview

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 para principiantes sobre cómo elegir el mejor maquetador de sitios web 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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

9 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Faisal says

    How can I modify the confirmation email which is sent to the user after he submits the registration form? I don’t want to display certain info in the email such as the login link.

  3. Vikas Shukla says

    How can we disable the default fron New User Approve plugin? or how we can apply woocommerce template to this one?

    Thanks

  4. Waseem Safdar says

    Does it also fulfill the purpose of Theme My Login ?
    I mean if I install this I’d be able to cater to the mentioned plugin’s feature as well right?

  5. Bongo says

    Great plugin. Will this plugin allow me to add the form elements to my current default WooCommerce forms?

    Is having too many plugins safe for my WordPress site? Will it not slow down or be expose in terms of Security?

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.