¿Cómo crear un formulario en WordPress?

Vamos a crear primero nuestro formulario.

<section>
    <div class="container">
        <div class="row">
            <form method="post" action="<?php echo admin_url('admin-post.php') ?>" >
                <div class="col-12 float-left">
                    <input type="text" name="nombre" placeholder="Nombre completo">
                </div>
                <div class="spacer-t-2"></div>
                <div class="col-12 col-lg-6 float-left">
                    <input type="text" name="correo" placeholder="Correo electrónico">
                </div>
                <div class="col-12 col-lg-6 float-left">
                    <input type="text" name="telefono" placeholder="Número de teléfono">
                </div>
                <div class="spacer-t-2"></div>
                <div class="col-12 float-left">
                    <textarea name="mensaje" rows="8" placeholder="Comentarios"></textarea>
                </div>
                <div class="col-12 float-left">
                    <input type="hidden" name="action" value="marcode_form">
                    <button class="btn btn-success" type="submit">Enviar</button>
                </div>
            </form>
        </div>
    </div>
</section>

Datos que debes conocer :

Con esto obtendremos la URL de admin.

echo admin_url('admin-post.php');

Este input estará oculto pero, contiene el nombre de la función que ejecutaremos en nuestro functions.php

<input type="hidden" name="action" value="marcode_form">

Archivo Functions

En nuestro archivo functions peguemos esta primera parte y agregaremos o simplemente remplazaremos los datos que se necesiten para adaptarlo a tu proyecto.

// Hooks admin-post
 
add_action( 'admin_post_nopriv_marcode_form', 'marcode_send_mail_data' );
//autentificados 
add_action( 'admin_post_marcode_form', 'marcode_send_mail_data' );//no autentificados

// Funcion callback
function marcode_send_mail_data(){

     //Recibimos los datos y los sanitizamos 
     $nombre = sanitize_text_field($_POST['nombre']);
     $correo = sanitize_email($_POST['correo']);
     $telefono = sanitize_textarea_field($_POST['telefono']);
     $mensaje = sanitize_textarea_field($_POST['mensaje']);

     $adminmail = '[Aquí el correo destino]; //email destino
     $subject = '[Asunto]'; //asunto
     $headers = "Reply-to: " . $nombre . " <" . $correo . ">";

     //Cuerpo del mensaje
     $msg = "Nombre: " . $nombre . "\n";
     $msg .= "E-mail: " . $correo . "\n\n";
     $msg .= "Teléfono: " . $telefono . "\n\n";
     $msg .= "Mensaje: \n\n" . $mensaje . "\n";

        
     //Nos regresara (true or false)
     $sendmail = wp_mail( $adminmail, $subject, $msg, $headers);

     wp_redirect( home_url("/contacto/")."?sent=".$sendmail ); //asumiendo que existe esta url
 [contacto]
}

Agregar alerta de envió

Agregamos nuestra alert de bootstrap para notificar de envió exitoso o fallido.

if (isset($_GET['sent'])){
     if($_GET['sent'] == '1'){
          echo '<div class="row">
               <div class="col-12 float-left">
                         <div class="alert alert-success alert-dismissible fade show" role="alert">
                              <p> <strong>✔ Enhorabuena!</strong> Los datos se han enviado correctamente.</p>
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                              <span aria-hidden="true">×</span>
                              </button>
                         </div>
                    <br>
                    </div>
               </div>
          ';
     }
     else {
          echo '<div class="row">
               <div class="col-12 float-left">
                         <div class="alert alert-danger alert-dismissible fade show" role="alert">
                              <p><strong>Ups!</strong> Hubo un error al intentar enviar los datos. Intenta nuevamente.</p>
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                              <span aria-hidden="true">×</span>
                              </button>
                         </div>
                    </div>
               </div>
          ';
     }
}

Código completo

<section>
    <div class="container">
        <div class="row">
            <?php 
if (isset($_GET['sent'])){
     if($_GET['sent'] == '1'){
          echo '<div class="row">
               <div class="col-12 float-left">
                         <div class="alert alert-success alert-dismissible fade show" role="alert">
                              <p> <strong>✔ Enhorabuena!</strong> Los datos se han enviado correctamente.</p>
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                              <span aria-hidden="true">×</span>
                              </button>
                         </div>
                    <br>
                    </div>
               </div>
          ';
     }
     else {
          echo '<div class="row">
               <div class="col-12 float-left">
                         <div class="alert alert-danger alert-dismissible fade show" role="alert">
                              <p><strong>Ups!</strong> Hubo un error al intentar enviar los datos. Intenta nuevamente.</p>
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                              <span aria-hidden="true">×</span>
                              </button>
                         </div>
                    </div>
               </div>
          ';
     }
}
            ?>
        </div>
        <div class="row">
            <form method="post" action="<?php echo admin_url('admin-post.php') ?>" >
                <div class="col-12 float-left">
                    <input type="text" name="nombre" placeholder="Nombre completo">
                </div>
                <div class="spacer-t-2"></div>
                <div class="col-12 col-lg-6 float-left">
                    <input type="text" name="correo" placeholder="Correo electrónico">
                </div>
                <div class="col-12 col-lg-6 float-left">
                    <input type="text" name="telefono" placeholder="Número de teléfono">
                </div>
                <div class="spacer-t-2"></div>
                <div class="col-12 float-left">
                    <textarea name="mensaje" rows="8" placeholder="Comentarios"></textarea>
                </div>
                <div class="col-12 float-left">
                    <input type="hidden" name="action" value="marcode_form">
                    <button class="btn btn-success" type="submit">Enviar</button>
                </div>
            </form>
        </div>
    </div>
</section>

Deja un comentario

Share This