Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
formulario personalizado

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.

Puede que también te interese

Cómo redireccionar a una página al usuario cuando se registra
Cómo redireccionar a una página al usuario cuando se registra
Es probable que si en tu sitio tienes abierto el registro de usuarios, quieras redirigir al usuario a una página concreta una vez finalice el…
Cómo hacer tu tema de WordPress compatible con WooCommerce
Cómo hacer tu tema de WordPress compatible con WooCommerce
WooCommerce se ha convertido en una de las principales plataformas de eCommerce del mercado. Tanto es así que portales como BuiltWith arrojan cifras como estas:…
WordPress transients, opciones que expiran en el tiempo
WordPress transients, opciones que expiran en el tiempo
En la entrada anterior vimos cómo trabajar con la API de opciones de WordPress. En ésta vamos a ver qué son los transients. Los transients…
Cómo añadir un enlace para los ajustes en el listado de plugins
Cómo añadir un enlace para los ajustes en el listado de plugins
Si estas desarrollando un plugin o vas a desarrollarlo, puede resultarte de utilidad saber cómo añadir un enlace para los ajustes de tu plugin en el…




  • 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.

  • Aleison

    Muy bueno, lo implementé pero no se como agregarlo a la pagina contacto que cree en wordpress, lo agrego pero me aparece muy pequeño los campos y como todos pegados entre si, ayuda

    • Con la poca información que das imagino que el problema es que no tienen estilo. Tendrás que agregar clases y dotarlas de estilo para que encaje perfectamente con tu tema

      Saludos

  • Robin Navarro

    Muchas gracias por el aporte, al tener el fomato completo y enviar me carga a la página www.”midominio”.com/uncategorized/contacto/#contact-form y se pierden los estilos de mi pagina, como puedo hacer que cargue www.”midominio”.com/#contact-form? muchas gracias de nuevo

    • Si en el “action” del formulario llamas a get_permalink, es decir: action=”#contact-form” se cargará la URL de la página en la que estás actualmente

      Saludos

  • me sirvio de mucho el formato, pero al introducirle recaptcha no termina de ejecutar y me lanza error