Cómo realizar un formulario de contacto personalizado en WordPress sin Plugins

Para realizar un formulario de contacto personalizado en WordPress podemos utilizar los conocidos plugins contact form 7 o gravity forms.

Si no queremos recurrir al uso de plugins, podemos hacerlo manualmente utilizando algunas funciones y componentes que trae WordPress por defecto.

En esta entrada vamos a ver cómo crear una página con un sencillo formulario de contacto personalizado. Para ello crearemos un template llamado “Contacto”, y en él crearemos un formulario con los campos Nombre, E-mail, Teléfono y Mensaje.

formulario personalizado

Pondremos los campos Nombre, E-mail y Mensaje como obligatorios, lo comprobaremos mediante la etiqueta HTML5 “required”. También comprobaremos al enviar el formulario mediante funciones de WordPress y PHP que estos campos están rellenos y tienen el formato que esperamos de ellos, en el caso del e-mail, que lo que introduzca el usuario tenga formato de e-mail. Esto lo hacemos por los navegadores que no soportan HTML5.

formulario personalizado errores

En caso de encontrar algún error, no enviaremos el formulario y mostraremos un mensaje de error con la clase WP_Error. Y en el caso de que todo sea correcto, enviaremos un e-mail al destinatario que especifiquemos con la función wp_mail().

Lo primero de todo es crear un template. Para ello, en la raíz de nuestro tema crearemos un archivo page-contacto.php, y dentro de él ponemos el siguiente código. Dentro del código hemos comentado lo que hace cada línea para entender el proceso sobre la marcha:

Con esto ya tendríamos un formulario de contacto personalizado sin la necesidad de utilizar plugins. Siguiendo esta estructura puedes añadir o quitar campos según tus necesidades, o incluir una plantilla de e-mail con un formato o diseño corporativo, y rellenar los datos del formulario para enviar por mail.

Si te ha gustado, valora este artículo para mejorar la calidad del blog o compártelo en Redes Sociales…
1 Star2 Stars3 Stars4 Stars5 Stars (2 votos, valoración 4,50 sobre 5) Loading...

Web Hosting
  • orlando

    Quisiera saber si se puede validar todo lo referente al insertar una nueva entrada (titulo, descripcion….), porfa una ayudita

  • dors702.COM

    Genial me funcionó muy bien!

  • Wladimir De Araujo

    Hola, me parece excelente el aporte. Me gustaría saber cómo implementarlo para un formulario que se encuentra en la página principal del sitio. Gracias

    • El código lo puedes adaptar y poner en cualquier template de tu theme. La plantilla principal del sitio suele ser el index.php o home.php de tu tema

  • Federico

    Hola Pablo, te felicito por el tutorial, tengo un problema intente tomar la template y adaptarlo a un trabajo que estoy haciendo y no consigo que funcione, creo que el problema esta con los datos sanitizados:

    //Recogemos en variables los datos enviados en el formulario y los sanitizamos.
    //Si detectamos algún error, podremos más abajo rellenar los campos del formulario con los datos enviados para no tener que empezar el formulario de cero
    $f_name = sanitize_text_field($_POST[‘f_name’]);
    $f_email = sanitize_email($_POST[‘f_email’]);
    $f_phone = sanitize_text_field($_POST[‘f_phone’]);
    $f_type = sanitize_option($_POST[‘f_type’]);
    $f_presentation = sanitize_option($_POST[‘f_presentation’]);
    $f_color = sanitize_hex_color($_POST[‘f_color’]);
    $f_adress = sanitize_text_field($_POST[‘f_adress’]);
    $f_message = sanitize_text_field($_POST[‘f_message’]);

    Te adjunto unas imagenes para que veas el formulario y parte del codigo, al enviar el formulario no devuelve nada y la página queda en blanco

    • Hola Federico,

      Sin ver el código completo se me hace dificil, pero te aconsejaría que fueras depurando hasta dar con el error:

      – ¿El botón “ENVIAR” es de type=”submit”?
      – ¿El name de este botón es btn-submit?
      – Pon lo siguiente justo antes de if (isset( $_POST[‘btn-submit’] )) { y mira lo que te devuelve el form cuando lo envias
      echo “

      ”;
      – Mira la consola de errores para ver si tienes algun error de javascript que esté bloqueando

      Suerte

  • Amelia

    Gracias por el aporte.
    Me funcionó perfectamente, pero he intentado colocar el shortcode que da “Contact Form 7” y no se dónde colocarlo en la página personalizada. Para ello creé una plantilla.