registration form

Cómo crear un formulario de registro personalizado en WordPress

En entradas anteriores hemos visto cómo crear formularios de log-in / log-out personalizados, y cómo agregar campos personalizados al perfil de usuario de WordPress tanto en el front-end como en el back-end.

Para terminar esta serie de entradas vamos a ver ahora cómo crear un formulario de registro personalizado en el front-end. Para ello crearemos un form, donde además de solicitar el nombre de usuario e e-mail, pediremos los campos personalizados que vimos en ejemplos anteriores: población, provincia y teléfono. Una vez validado el formulario registraremos al usuario utilizando la función: wp_insert_user().

El html para pintar el formulario es el siguiente:

<form method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
  <div class="login-form">
    <div class="form-group">
      <label for="user">Usuario:</label><br />
      <input type="text" id="user" name="user" class="form-control" value="<?php echo isset($_POST['user']) ? $_POST['user'] : null;?>" placeholder="Usuario" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" class="form-control" value="<?php echo(isset($_POST['email']) ? $_POST['email'] : null); ?>" placeholder="Email" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="town">Población</label>
      <input type="text" id="town" name="town" class="form-control" value="<?php echo(isset($_POST['town']) ? $_POST['town'] : null); ?>" placeholder="Población" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="province">Provincia</label>
      <input type="text" id="province" name="province" class="form-control" value="<?php echo(isset($_POST['province']) ? $_POST['province'] : null); ?>" placeholder="Provincia" />
    </div>
    <div class="form-group">
      <label for="phone">Teléfono</label>
      <input type="text" id="phone" name="phone" class="form-control" value="<?php echo(isset($_POST['phone']) ? $_POST['phone'] : null); ?>" placeholder="Teléfono" />
    </div>
    <input type="submit" id="submit" name="submit" value="Enviar" />
  </div>
</form>

Lo siguiente que haremos es validar el formulario. Para ello preguntaremos si el formulario ha sido enviado, recogeremos y sanitizaremos (si se me permite el palabro) los datos enviados, y si no se cumplen nuestros requisitos mostraremos un mensaje de error usando la clase WP_Error.

Si todos los datos son correctos, lo siguiente es insertar el usuario con la función wp_insert_user():

Como parámetro acepta un array de datos de usuario, entre los que se encuentran: ID, user_pass, user_login, user_nicename, user_url, user_email, display_name, nickname, first_name, last_name, description, rich_editing, user_registered, role, jabber, aim y yim. Para nuestro ejemplo vamos a guardar los datos: user_login (usuario), user_email (email).

A continuación generaremos automáticamente una contraseña con la función wp_generate_password(), y los campos adicionales de población, provincia y teléfono los guardaremos con la función update_user_meta() si la creación del usuario ha sido correcta. La función wp_insert_user() devuelve el ID creado para el nuevo usuario, ese ID es el que pasaremos a la función update_user_meta() para los campos adicionales.

Por último queda notificar al usuario que se ha dado de alta y enviarle un correo para que pueda establecer una contraseña propia. Antes WordPress enviaba las contraseñas por mail, pero en las últimas versiones por seguridad ya no lo hace. En su lugar manda un correo con un enlace para que el usuario pueda crear su propia contraseña. Para eso usaremos la función wp_new_user_notification() a la que le pasaremos los parámetros “user_id” y “both”.

El código completo de la validación del formulario es el siguiente:

<?php

if (isset( $_POST['submit'] )) { //El formulario ha sido enviado
  global $reg_errors;
  $reg_errors = new WP_Error;

  $user = sanitize_text_field($_POST['user']);
  $email = sanitize_email($_POST['email']);
  $town= sanitize_text_field($_POST['town']);
  $province = sanitize_text_field($_POST['province']);
  $phone = sanitize_text_field($_POST['phone']);

  //Comprobamos que los campos obligatorios no están vacios
  if ( empty( $user ) ) {
    $reg_errors->add("empty-user", "El campo nombre es obligatorio");
  }
  if ( empty( $email ) ) {
    $reg_errors->add("empty-email", "El campo e-mail es obligatorio");
  }
  if ( empty( $town) ) {
    $reg_errors->add("empty-town", "El campo Población es obligatorio");
  }
  //Comprobamos que el email tenga un formato de email válido
  if ( !is_email( $email ) ) {
    $reg_errors->add( "invalid-email", "El e-mail no tiene un formato válido" );
  }

  if ( is_wp_error( $reg_errors ) ) {
    if (count($reg_errors->get_error_messages()) > 0) {
      foreach ( $reg_errors->get_error_messages() as $error ) {
        echo $error . "<br />";
      }
    }
  }

  if (count($reg_errors->get_error_messages()) == 0) {
    $password = wp_generate_password();

    $userdata = array(
      'user_login' => $user,
      'user_email' => $email,
      'user_pass' => $password
    );

    $user_id = wp_insert_user( $userdata );

    //Si todo ha ido bien, agregamos los campos adicionales
    if ( ! is_wp_error( $user_id ) ) {
      update_user_meta( $user_id, 'user_town', $town );
      update_user_meta( $user_id, 'user_province', $province );
      update_user_meta( $user_id, 'user_phone', $phone );

      wp_new_user_notification( $user_id, 'both' );
    }
  }
}

Con ésto ya tendríamos nuestro formulario de registro personalizado. Puedes añadir tantos campos adicionales como desees, y adaptar el desarrollo a la medida de tus necesidades.

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

7 comentarios en Cómo crear un formulario de registro personalizado en WordPress

  1. hola esta buenisimo pero si me gustaria personalizar el formulario es decir tengo un diseño en boostrap y quisiera implementarlo como tendria que hacer? es decir teniendo mi propio diseño y demas.

    1. Hola Jose

      Este ejemplo está hecho con un formulario básico de bootstrap. En cualquier caso, si tienes un diseño propio simplemente maqueta el formulario según tu diseño y ten en cuenta el name de tus inputs para recoger luego la información correctamente.

  2. Buen día, utilice tu codigo para un registro personalizado de usuarios,
    pero no logro que me arroje errores, al estar un usuario ya registrado
    no me duplica, pero no arroja nada y no envia correo de registro con el pasword.

    y como podrían los usuarios registrados editar sus datos personalizados?

    saludos

    1. Hola Emmanuel. En este ejemplo no se comprueba si el usuario existe o no. Para tu caso deberías comprobarlo, podrías hacerlo a través de las funciones username_exists (https://codex.wordpress.org/Function_Reference/username_exists) ó email_exists (https://codex.wordpress.org/Function_Reference/email_exists)

      Podrías notificar el password al usuario haciendo uso de la función wp_new_user_notification (https://developer.wordpress.org/reference/functions/wp_new_user_notification/), y tus usuarios podrían acceder a sus datos utilizando la URL de acceso al panel de administración (tudominio.com/wp-admin/)

      Saludos!

  3. Me parece genial, porque desde hace tiempo he querido hacerlo pero no se donde almacenar los datos para que el registro wordpress sea válido. Tengo un par de preguntas
    1- ¿Cómo es que puedo llamar funciones propias de WordPress en un formulario php independiente? (me refiero a update_user_meta, is_wp_error, etc.)

    2.- Si quiero que el usuario suba un avatar ¿debo actualizarlo en user_meta? Tiene algún nombre especial?

    1000 gracias por tu ayuda,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *:

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios