{"id":930,"date":"2022-03-16T12:57:00","date_gmt":"2022-03-16T12:57:00","guid":{"rendered":"https:\/\/hugocalixto.es\/?p=930"},"modified":"2022-03-16T12:57:00","modified_gmt":"2022-03-16T12:57:00","slug":"crear-un-formulario-en-sin-plugin","status":"publish","type":"post","link":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/blog\/crear-un-formulario-en-sin-plugin\/","title":{"rendered":"C\u00f3mo crear un formulario en WordPress para la p\u00e1gina de contacto sin plugin"},"content":{"rendered":"\n

Si \u00abno\u00bb queremos recurrir al uso de plugins, podemos Crear el Formulario en WordPress manualmente utilizando algunas funciones y componentes est\u00e1ndar del cms.<\/p>\n\n\n\n

En este post veremos c\u00f3mo crear una p\u00e1gina<\/a> con un sencillo formulario de contacto personalizado. Para ello, crearemos una plantilla llamada \u00abContacto\u00bb <\/strong>y en ella crearemos un formulario con los campos Nombre, Correo electr\u00f3nico, Tel\u00e9fono y Mensaje.<\/p>\n\n\n\n

\u00a1Importante!<\/strong><\/p>\n\n\n\n

El html est\u00e1 preparado para bootstrap, si tu tema no est\u00e1 en bootstrap, tendr\u00e1s que hacer peque\u00f1os cambios en la p\u00e1gina<\/a> para adaptarla a tu tema, si hay duda(s) de c\u00f3mo hacerlo, deja un comentario que ser\u00e1 un placer ayudarte.<\/p>\n\n\n\n

Pondremos los campos \u00abNombre\u00bb<\/strong>, \u00abEmail\u00bb<\/strong> y \u00abMensaje\u00bb<\/strong> como obligatorios, marcandolos con la etiqueta HTML5 \u00abrequired\u00bb<\/strong>. Tambi\u00e9n comprobaremos, al enviar el formulario, mediante las funciones de WordPress y PHP, si esos campos se rellenan y tienen el formato que esperamos de ellos, en el caso del correo electr\u00f3nico, si lo que el usuario escribe est\u00e1 en formato de correo electr\u00f3nico. Lo hacemos para los navegadores que no soportan HTML5.<\/p>\n\n\n\n

En caso de encontrar alg\u00fan error, no enviaremos el formulario y mostraremos un mensaje de error con la clase WP_Error<\/strong>. Y en caso de que todo sea correcto, enviaremos un correo electr\u00f3nico al destinatario especificado con la funci\u00f3n wp_mail()<\/strong>.<\/p>\n\n\n\n

En primer lugar, cree un modelo de plantilla. Para ello, en la ra\u00edz de nuestro tema, crearemos un archivo con el nombre: page-contact.php y, dentro de \u00e9l, pondremos el siguiente c\u00f3digo:<\/p>\n\n\n\n

Ah! Dentro del c\u00f3digo, comento lo que hace cada l\u00ednea para que podamos entender el proceso r\u00e1pidamente:<\/p>\n\n\n\n

<?php\n\/*\n* Template Name: Contacto\n*\/\n\n\/\/  proteger el archivo. Obliga salir si alguien intenta acceder directamente el navegador escribiendo page-contato.php\ndefined( 'ABSPATH' ) or die( 'No script kiddies please!' );?>\n\n<?php get_header(); ?>\n\n<div class=\"container\">\n<?php if (have_posts()) :\nwhile (have_posts()) : the_post();?>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<article id=\"post-<?php the_ID();?>\" <?php post_class();?>>\n\n\n<!-- Imprimimos primero el t\u00edtulo y el contenido de la p\u00e1gina normalmente por se acaso quiera escrever adelante del formulario-->\n<h1><?php the_title();?><\/h1>\n\n<div class=\"entry-content\">\n<?php the_content();?>\n<\/div>\n\n<form id=\"contact-form\" name=\"contact-form\" action=\"<?php echo get_permalink();?>#contact-form\" method=\"post\">\n<?php \n<!-- Comprobamos que el formulario ha sido enviado-->\nif (isset( $_POST['btn-submit'] )) {\n\/\/Creamos una variable para almacenar los errores\nglobal $reg_errors;\n$reg_errors = new WP_Error;\n\n\/\/Recogimos en las variables los datos enviados en el formulario y los saneamos.\n\/\/Si detectamos un error, podemos rellenar los campos del formulario con los datos enviados, para no tener que empezar el formulario desde cero.\n$f_name = sanitize_text_field($_POST['f_name']);\n$f_email = sanitize_email($_POST['f_email']);\n$f_phone = sanitize_text_field($_POST['f_phone']);\n$f_message = sanitize_text_field($_POST['f_message']);\n\n\/\/El campo Nombre es obligatorio, comprobamos que no est\u00e9 vac\u00edo y si no, creamos un registro de error.\nif ( empty( $f_name ) ) {\n$reg_errors->add(\"empty-name\", \"El campo del nombre es obligatorio\");\n}\n\/\/El campo E-mail es obligatorio, comprobamos que no est\u00e9 vac\u00edo y si no, creamos un registro de errores\nif ( empty( $f_email ) ) {\n$reg_errors->add(\"empty-email\", \"El campo de correo electr\u00f3nico es obligatorio\");\n}\n\/\/Comprobamos si los datos est\u00e1n en formato de correo electr\u00f3nico con la funci\u00f3n de WordPress \"is_email\" y si no, creamos un registro de errores\nif ( !is_email( $f_email ) ) {\n$reg_errors->add( \"invalid-email\", \"El correo electr\u00f3nico no tiene un formato v\u00e1lido.\" );\n}\n\/\/El campo Mensaje es obligatorio, revisa que no est\u00e9 vac\u00edo, de lo contrario creamos un registro de errores\nif ( empty( $f_message ) ) {\n$reg_errors->add(\"empty-message\", \"El campo de mensaje es obligatorio\");\n}\n\n\/\/Se n\u00e3o houver erros, enviamos o formul\u00e1rio\nif (count($reg_errors->get_error_messages()) == 0) {\n\/\/Destinatario\n$recipient = \"destinatario@email.com\";\n\n\/\/Asunto del email\n$subject = 'Formulario de contacto ' . get_bloginfo( 'name' );\n\n\/\/La direcci\u00f3n de correo electr\u00f3nico es la de nuestro blog\/sitio web, por lo que al agregar este encabezado podemos responder al remitente original\n$headers = \"Reply-to: \" . $f_name . \" <\" . $f_email . \">\\r\\n\";\n\n\/\/Creamos el cuerpo de nuestro correo electr\u00f3nico\n$message = \"Nombre: \" . $f_name . \"<br>\";\n$message .= \"E-mail: \" . $f_email . \"<br>\";\n$message .= \"Tel\u00e9fono: \" . $f_phone . \"<br>\";\n$message .= \"Mensaje: \" . nl2br($f_message) . \"<br>\";\n   \n\/\/Filtro para indicar que el correo electr\u00f3nico debe enviarse en modo HTML\nadd_filter('wp_mail_content_type', create_function('', 'return \"text\/html\";'));\n\t\n\/\/Finalmente enviamos el correo\n$envio = wp_mail( $recipient, $subject, $message, $headers, $attachments);\n\n\/\/Si el correo electr\u00f3nico se env\u00eda correctamente, mostramos un mensaje y vaciamos las variables con datos. De lo contrario, mostramos un mensaje de error.\nif ($envio) {\nunset($f_name);\nunset($f_email);\nunset($f_phone);\nunset($f_message);?>\n<div class=\"alert alert-success alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;<\/button>\nEl formulario ha sido enviado correctamente.\n<\/div>\n<?php }else {?>\n<div class=\"alert alert-danger alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;<\/button>\nOcurri\u00f3 un error al enviar el formulario. Puede volver a intentarlo m\u00e1s tarde o ponerse en contacto con nosotros escribiendo un correo electr\u00f3nico a \"destinatario@email.com\"\n<\/div>\n<?php }\n}\n}?>\n\n<div class=\"form-group\">\n<label for=\"f_name\">Nombre <span class=\"asterisk\">*<\/span><\/label>\n<input type=\"text\" id=\"f_name\" name=\"f_name\" class=\"form-control\" value=\"<?php echo $f_name;?>\" placeholder=\"Escribe tu nombre completo\" required aria-required=\"true\">\n\n<?php \/\/Comprobamos si hay errores en la validaci\u00f3n del campo Nombre\nif ( is_wp_error( $reg_errors ) ) {\nif ($reg_errors->get_error_message(\"empty-name\")) {?>\n<br class=\"clearfix\" \/>\n<div class=\"alert alert-danger alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;<\/button>\n<p><?php echo $reg_errors->get_error_message(\"empty-name\");?><\/p>\n<\/div>\n<?php }\n}?>\n<\/div>\n\n<div class=\"form-group\">\n<label for=\"f_email\">E-mail <span class=\"asterisk\">*<\/span><\/label>\n<input type=\"email\" id=\"f_email\" name=\"f_email\" class=\"form-control\" value=\"<?php echo $f_email;?>\" placeholder=\"Escriba su correo electr\u00f3nico\" required aria-required=\"true\">\n\n<?php \/\/Comprobamos si hay errores en la validaci\u00f3n del campo E-mail\nif ( is_wp_error( $reg_errors ) ) {\nif ($reg_errors->get_error_message(\"empty-email\")) {?>\n<br class=\"clearfix\" \/>\n<div class=\"alert alert-danger alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;<\/button>\n<p><?php echo $reg_errors->get_error_message(\"empty-email\");?><\/p>\n<\/div>\n<?php }\n}\n\n\/\/Comprobamos si hay errores en el formato del campo E-mail\nif ( is_wp_error( $reg_errors ) ) {\nif ($reg_errors->get_error_message(\"invalid-email\")) {?>\n<br class=\"clearfix\" \/>\n<div class=\"alert alert-warning alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;<\/button>\n<p><?php echo $reg_errors->get_error_message(\"invalid-email\");?><\/p>\n<\/div>\n<?php }\n}?>\n<\/div>\n\n<div class=\"form-group\">\n<label for=\"f_phone\">Tel\u00e9fono<\/label>\n<input type=\"tel\" id=\"f_phone\" name=\"f_phone\" class=\"form-control\" value=\"<?php echo $f_phone;?>\" placeholder=\"Introduce tu tel\u00e9fono\">\n<\/div>\n\n<div class=\"form-group\">\n<label for=\"f_message\">Mensagem <span class=\"asterisk\">*<\/span><\/label>\n<textarea id=\"f_message\" name=\"f_message\" rows=\"7\" class=\"form-control\" placeholder=\"Escriba su mensaje aqu\u00ed\" required aria-required=\"true\"><?php echo $f_message;?><\/textarea>\n\n<?php \/\/Comprobamos si hay errores en la validaci\u00f3n del campo Mensaje\nif ( is_wp_error( $reg_errors ) ) {\nif ($reg_errors->get_error_message(\"empty-message\")) {?>\n<br class=\"clearfix\" \/>\n<div class=\"alert alert-danger alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;<\/button>\n<p><?php echo $reg_errors->get_error_message(\"empty-message\");?><\/p>\n<\/div>\n<?php }\n}?>\n<\/div>\n\n<button type=\"submit\" id=\"btn-submit\" name=\"btn-submit\" class=\"btn btn-default\">Enviar Mensaje<\/button>\n<\/form>\n<\/article>\n<\/div>\n<\/div>\n<?php endwhile;\nendif;?>\n<\/div>\n\n<?php get_footer();?><\/code><\/pre>\n\n\n\n
Con esto, ya tendr\u00edamos un formulario de contacto personalizado sin necesidad de utilizar plugins. Siguiendo esta estructura, puede a\u00f1adir o quitar campos seg\u00fan sus necesidades, o incluir una plantilla de correo electr\u00f3nico con un formato o dise\u00f1o corporativo y rellenar los datos del formulario para enviarlo por correo electr\u00f3nico.<\/p>\n\n\n\n
\u00bfTe sientes inseguro\/a o tienes dudas? Perm\u00edteme ayudarte. Aprovecha los 30 minutos gratuitos que ofrezco en mi servicio de Ayuda WordPress<\/strong><\/a> y juntos haremos lo que necesitas. \u00a1Cont\u00e1ctame ahora!  <\/p>\n\n\n\n
Hasta el pr\u00f3ximo post.<\/p>\n","protected":false},"excerpt":{"rendered":"
Si no queremos recurrir al uso de plugins, podemos crear el formulario en WordPress manualmente utilizando algunas funciones y componentes est\u00e1ndar del cms.<\/p>\n","protected":false},"author":1,"featured_media":932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articulos"],"_links":{"self":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts\/930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/comments?post=930"}],"version-history":[{"count":0,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts\/930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/media\/932"}],"wp:attachment":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/media?parent=930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/categories?post=930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/tags?post=930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}