Si eres de los que les gusta crear sus propias funciones para usarlas en la web, leer este articulo sera un agregado mas para tus proyectos de programación. Como dice el titulo, crear un sencillo formulario para WordPress puede ser uno de tus proyectos a agregar a tu lista.
Ahora, por que crear un sencillo formulario para WordPress. Imagina que deseas adquirir información acerca de tus negocios o artículos en linea, o simplemente recibir propuestas de futuros clientes directo en tu email, pero lo quieres hacer tu mismo sin la ayuda de otros plugins de este tipo. O quizás quieres hacer un formulario en especifico sin tener que pagar una membresia en otros plugins. Pues sigue leyendo para que puedas ver, que tan fácil sera crear este formulario.
Indice
- Crear un prototipo de tu formulario.
- Crear el plugin para el formulario con la información básica.
- Crear el código para que tu formulario funcione.
- Hacer el correo del destinatario modificable.
- Darle un poco de estilo a tu email.
- Comprimir, subir y probar el plugin.
Crear un prototipo de tu formulario
Esta seccion es donde decides de que manera va a estar creado tu formulario. Solo tienes que definir, segun el contenido de tu sitio y la informacion que deseas recibir, y con esto podras dibujar una maqueta de como va a estar formado tu formulario final.
Como ejemplo para este articulo, vamos a crear un simple formulario de contacto. Pero recuerda que siempre podras modificar y agregar opciones al que desees crear. Para el nuestro solo vamos a solicitar el nombre, email, tema y contenido del formulario.
Ya que tenemos nuestro formulario, vamos al codigo en cuestion.
Crear el plugin para WordPress con la información básica
La creacion de un plugin para wordpress sera bien simple. Lo primero es crear las carpetas necesaria y los ficheros del plugin, y debido a que sera algo sencillo, solo crearemos algunos ficheros.
La carpeta principal se llamara, al menos para mi, «mi-simple-form», y mi fichero principal se llamara de la misma manera. Como estamos haciendo un plugin para WordPress, vamos a crear el fichero como php. Dentro de este fichero de php incluiremos lo siguiente:
<?php
/**
* Plugin Name: Mi Simple Form
* Plurin URI: https://example.com
* Description: Mi formulario de contacto simple y facil
* Version: 0.1
* Require PHP: 7.2
* Author: Example Name
* Author URI: https://example.com
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: mi-simple-form
*/
/*Comienza aqui*/
?>Con esto ya tenemos un plugin simple, cambia «example» por tu nombre y https://example/com por tu blog o negocio personal. Ahora pasaremos a la creacion del formulario.
Crear el código para que tu sencillo formulario funcione
Ahora crearemos el codigo que permitira crear el sencillo formulario para wordpress, el cual sera el corazon de nuestro plugin. La idea de este codigo es que podamos usarlo como un «shortcode«, asi que sigamos con el codigo.
Lo primero sera crear el formulario. Este formulario es el que el usuario o client va a llenar para comunicarse con el dueño del sitio, o administrador:
/*Continuacion del codigo*/
/**shortcode form */
function sc_html_form_code(){
?>
<form id="scfform" action="<?php esc_url( $_SERVER['REQUEST_URI'] ); ?>" method="post">
<p>
<label>Your Name (required) <br />
<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="<?php ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ); ?>" size="40" />
</label>
</p>
<p>
<label>Your Email (required) <br />
<input type="email" name="cf-email" value="<?php ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ); ?>" size="40" />
</label>
</p>
<p>
<label> Subject (required) <br />
<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="<?php ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ); ?>" size="40" />
</label>
</p>
<p>
<label>Your Message (required) <br />
<textarea rows="10" cols="35" name="cf-message"><?php ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ); ?></textarea>
</label>
</p>
<p>
<input type="submit" name="cf-submitted" value="Send"/>
</p>
</form>
<?php
}Una vez agregado el formulario, vamos a incluir la funcion que estara a cargo de enviar el correo al destinatario, asi como presentar una respuesta de agradesimiento.
Las condiciones dentro de esta function haran lo siguiente:
- La primera parte de esta funcion, chequeara si el boton submit a sido presionado, y de ser asi, limpiara el contenido del formulario para enviarlo como texto sin formato.
- La segunda condicional verificara si un direccion email ha sido incluida. De ser asi el email se enviara a dicho correo electronico, de lo contrario se usara el correo del administrador del sitio.
- La tercera condicion se presenta una vez el correo ha sido porcesado, presentando un agradecimiento al cliente.
/**function to deliver the email */
function sc_deliver_email($recieveremail){
if(isset($_POST['cf-submitted'])){
/** Sanitize */
$scname = sanitize_text_field($_POST["cf-name"]);
$scemail = sanitize_email($_POST["cf-email"]);
$scsubject = sanitize_text_field($_POST["cf-subject"]);
$scmessage = sanitize_textarea_field($_POST["cf-message"]);
$mailbody = '<div><h1>Hello</h1><p>'. $scmessage .'</p></div>';
/** Admin email */
if($recieveremail == ''){
$scto = get_option('admin_email');
} else{
$scto = $recieveremail;
}
$scheaders[] = 'Content-Type: text/html; charset=UTF-8';
$scheaders[] = "From: $scname <$scemail>" . "\r\n";
/** If email has been process for sending */
if(wp_mail($scto, $scsubject, $mailbody, $scheaders)){
echo '<div>';
echo '<p>Thanks for contacting me, expect a response very soon.</p>';
echo '</div>';
$_POST = '';
} else {
echo 'An unexpected error occurred';
}
}
}Debido a que presentaremos el correo en la pagina para que pueda ser usado por los clientes, usando la opcion de «shortcode», vamos a crear las funciones que se haran cargo de usar esta funcion en un pagina o articulo.
- La primera funcion, se hara cargo de generar el «shortcode» incluyendo los atributos a usar.
- La segunda funcion, crea el «shortcode» para poder usarlo.
Esta manera permite que puedan, en un futuro ampliar los formuarios, y luego en la funcion ssd_shortcode_init() agregar el shortcode para poder usarlo.
/**
* the shortcode magic
*/
function ss_contact_form_shortcode($atts = [], $tag=''){
ob_start();
$atts = array_change_key_case( (array) $atts, CASE_LOWER );
$sc_atts = shortcode_atts(array(
'sent-to' => 'youremail@email.com',
),$atts, $tag);
sc_deliver_email($sc_atts['sent-to']);
sc_html_form_code();
return ob_get_clean();
}
/**
* central location for all shortcode
*/
function ssf_shortcode_init(){
add_shortcode('simply_contact_form', 'ss_contact_form_shortcode');
}
add_action('init', 'ssf_shortcode_init');Lo ultimo es incluir la funcion que se hace cargo del javascript:
function sc_enqueue_scripts(){
wp_enqueue_script('jquery-ui-core');
}
add_action('admin_enqueue_scripts', 'sc_enqueue_scripts');Hacer el correo del destinatario modificable.
En esta parte, no tendremos que hacer nada debido a que ya lo hemos incluimos anteriormente. lo que si voy a enseñarle donde esta esta accion.
Para modificar el correo del destinatario, hemos incluido en la funcion «sc_deliver_email» una variable para que se haga cargo del correo del destinatario. «$recieveremail», se hara cargo del correo, ademas, hay una condicion que chequeara si existe un correo o de lo contrario usar el correo del admin por defecto.
...
/** Admin email */
if($recieveremail == ''){
$scto = get_option('admin_email');
} else{
$scto = $recieveremail;
}
...Luego la funcion «ss_contact_form_shortcode($atts = [], $tag=»)» se encargara de agregar el atributo «$atts» para usar un correo.
Darle un poco de estilo a tu email
Para darle un poco de estilo y el correo se vea menos plano agregamos un poco de codigo HTML antes del mensaje.
En la funcion «sc_deliver_email($recieveremail)«, la variable:
$mailbody = '<div><h1>Hello</h1><p>'. $scmessage .'</p></div>';se encarga de agregar y unir tanto el mensage del cliente con un poco de codigo HTML para mejorar el correo a recibir. Luego si chequean mas abajo, veran los headers:
$scheaders[] = 'Content-Type: text/html; charset=UTF-8';
$scheaders[] = "From: $scname <$scemail>" . "\r\n";Este header, no es mas que la cabecera del correo. El primer header se encargara de que el correo se vea como correo html en vez de text plano.
Comprimir, subir y probar el plugin
Con esto, ya tenemos un plugin simple que presentara un formulario que prodras usar en tu sitio. Solo queda que comprimas la carpeta, y la subas a tu WordPress. Luego, crea una pagina o un articulo nuevo, y agrega el «shortcode»: en este caso, seria «[simply_contact_form sent-to=»youremail@emial.com»]», cambiando youremail@email.com por tu email o el del administrador asignado a recibir los correos en tu sitio.
Y con esto terminamos con este articulo. Espero le haya sido util, y nos vemos en la proxima.