Nuestro Blog

Manuel Piquer Estudio

¿Crear un formulario en WordPress sin utilizar plugins?

Desarrollar un formulario en vez de usar un plugin

Hay muchos plugins para crear formularios, pero si lo único que necesitas es crear un par de formularios concretos puedes ofrecer una solución más personalizada y  ahorrar en la carga de otros plugins que redundaran en la velocidad del sitio.
Este es un buen ejercicio para alguien que esté aprendiendo a desarrollar en WordPress.

¿cuál es el mejor sitio para mi código de formulario?

En WordPress hay dos sitios diferenciados para desarrollar tu código:

  1. En el tema hijo, usando el archivo functions.php: recomendable, con un poco código propio, algo de HTML, algo de CSS, quizás JS, poco PHP. podras usar esos cambios en varias plantillas.
  2. En un plugin: si vas a necesitar algo más de lógica, tienes que escribir bastante PHP y no es tanto una cuestión de estética o presentación como de mecánica o comportamiento, la cosa está pidiendo un plugin a gritos. Además un plugin lo vas a poder usar independientemente del tema que tengas activo.

En esta caso, estás desarrollando un formulario y lo creamos en funtions.php y en un plugin después, de este modo conocerás las diferencias.

Código en functions.php

vamos a trabajar de un modo sencillo, crearemos el formulario en HTML al que le podemos añadir clases CSS para darle algo de estilo y con un poco de PHP para que podamos hacer las funciones de envió.

Un HTML sencillo haria nuestro formulario

<form method="post" name="Contacto" action="" >
	<label for="name">Nombre:</label>
	<input type="text" name="name" id="name" required>

	<br>
	<label for="email">Correo:</label>
	<input type="email" name="email" id="email" required>

	<br>
	<label for="message">Mensaje:</label>
	<textarea name="message" id="message" cols="30" rows="10" required></textarea>

	<br>
	<p><input type="checkbox" id="terms" name="terms" required> Acepto los <a href="#">Términos y Condiciones</a></p>

	<br>
	<input type="hidden" name="action" value="process_form">
	<input type="submit" name="submit" value="Enviar">
</form>

El PHP lo usamos para recibir los datos del formulario

<?php

if ( isset($_GET['sent']) ){
	if ( $_GET['sent'] == '1'){
		echo "<p> ✔ Formulario enviado correctamente</p><br>";
	}
	else {
		echo "<p> Hubo un error al enviar</p><br>";
	}
}
?>

vamos a ir explicando poco a poco como crear el formulario, cómo se insertará en nuestra web y cómo recogeremos los datos dando las gracias, no tengas prisa por copiar el codigo y sigue el tutorial par entenderlo bien y poder crear tus propios contenidos y formularios.

crearemos un shortcode o código corto que insertáremos en la página:  [mostrar_formulario]

add_shortcode('mostrar_formulario', 'mi_formulario');

Y una función para que se muestre cuando lo llamemos, para ello pondremos dentro de la función nuestro código HTML del formulario que escribimos antes.

function mi_formulario() {ob_start();
?>
<form method="post" id="contact" class="cuestionario" name="Contacto" action="<?php get_the_permalink(); ?>">
	<label for="name">Nombre:</label>
	<input type="text" name="name" id="name" required>

	<br>
	<label for="email">Correo:</label>
	<input type="email" name="email" id="email" required>

	<br>
	<label for="message">Mensaje:</label>
	<textarea name="message" id="message" cols="30" rows="10" required></textarea>

	<br>
	<p><input type="checkbox" id="terms" name="terms" required> Acepto los <a href="#">Términos y Condiciones</a></p>

	<br>
	<input type="hidden" name="action" value="process_form">
	<input type="submit" name="submit" value="Enviar">
</form>
<? return ob_get_clean(); }

Y una segunda función para verificar y enviar los datos por email.

function envia_formulario() {
 //verificamos que se trata de nuestro formulario
 $form_name = $record->get_form_settings( 'form_name' );
  if ( $form_name != 'Contacto' ) {
   return;
  }
        $name = sanitize_text_field($_POST['name']);
	$email = sanitize_email($_POST['email']);
	$message = sanitize_textarea_field($_POST['message']);

	$adminmail = "contacto@dominiodestino.com"; //email destino 
        $subject = 'Formulario de contacto'; //asunto
	$headers = "Reply-to: " . $name . " <" . $email . ">";

	//Cuerpo del mensaje
	$msg = "Nombre: " . $name . "\n";
	$msg .= "E-mail: " . $email . "\n\n";
	$msg .= "Mensaje: \n\n" . $message . "\n";

	$sendmail = wp_mail( $adminmail, $subject, $msg, $headers);
	wp_redirect( home_url("/gracias/")."?sent=".$name ); // crearemos una pagina llamada gracias y mandaremos el ultimo parámetro
}
add_action( 'admin_post_process_form', 'respuesta_formulario' );

y por último crearemos un shortcode que insertáremos en la página Gracias:  [respuesta_formulario]

add_shortcode('respuesta-formulario', 'resp_formulario');
function resp_formulario() {  
 if ( isset($_GET['sent']) ){ 
 echo '<h4 class="gracias" style=" text-align: center; ">Hola '. $sent. ', tu consulta será atendida lo más pronto posible.</h4> <br>'; 
 }
 else{
  echo'<p class="gracias" style=" text-align: center; ">Gracias.</p> <br>';
 } 
}

Esta ultima función mostrará un mensaje de gracias personalizado en la pagina Gracias

Y Creación del plugin

Ya vimos en este otro post como Crear un plugin  y es tan sencillo como crear un directorio nuevo en la carpeta de plugins y en su interior un archivo con el mismo nombre que la carpeta y la extensión .php
El nombre de carpeta y archivo debe ser descriptivo pero corto, usando guiones en lugar de espacios, y para evitar colisiones con otros plugins usa un nombre corto: tu alias, tu marca, etc.
En mi caso la carpeta será My-formulario y el archivo principal mi-form.php. Pero te animo a poner tu propio nombre.  No olvides la etiqueta inicial <?php   y para que WordPress lo considere un plugin, colocar las etiquetas iniciales.

<?php
/*
Plugin Name: Formulario personalizado
Plugin URI: https://www.ManuelPiquer.es/
Description: Como crear un formulario personalizado.
Version: 1.0
Author: Manuel Piquer.
Author URI: https://www.ManuelPiquer.es/
License: GPL
License URI: https://www.gnu.org/
*/

Añade después de las etiquetas, todo el código que  hemos creado en funtion.php y guarda el fichero mi-form.php en la carpeta de tu plugin. Crea un ZIP para subirlo a WordPress, instala el Plugin y aparecerá en  el listado de plugin.
Importante: Recuerda usar un unico metodo o funtions.php o Plugin para no crear errores de lectura y funciones duplicadas, borra el codigo del metodo que no utilices..

Otros Articulos