{"id":40,"date":"2024-08-16T17:59:02","date_gmt":"2024-08-16T17:59:02","guid":{"rendered":"https:\/\/bitacora.lado.mx\/?p=40"},"modified":"2024-08-16T17:59:02","modified_gmt":"2024-08-16T17:59:02","slug":"la-evolucion-del-formulario-de-contacto-2","status":"publish","type":"post","link":"https:\/\/bitacora.lado.mx\/index.php\/2024\/08\/16\/la-evolucion-del-formulario-de-contacto-2\/","title":{"rendered":"La evoluci\u00f3n del Formulario de Contacto"},"content":{"rendered":"\n<p>En este art\u00edculo exploramos c\u00f3mo ha evolucionado el formulario de contacto a lo largo del tiempo, ofreciendo una visi\u00f3n personal de los cambios en el c\u00f3digo, desde un simple formulario HTML hasta las versiones m\u00e1s avanzadas.<\/p>\n\n\n\n<p>Con la llegada de HTML 2, se introdujo la capacidad de crear formularios para facilitar la comunicaci\u00f3n entre el usuario del navegador y el creador de la p\u00e1gina, ya sea a nivel personal o profesional. Este avance incluy\u00f3 la importante etiqueta INPUT para la captura de datos.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf9koWNS9gLOSxAeT2ZkGfL7sZGy4hfXaQxgaGeM4Rdyeo_tjIxF0fePN8ehlxH71Od3Re0D_ClJhzd-t2l63JxORlitaiBEbMYVv2KsTJo0pbDNm2V5G8Cno_QYs3J0gPD5XpejV_2pFPTcBrtg0cZReXs?key=SsOikbvU857u-FeMTz0eDA\" width=\"602\" height=\"453\"><\/p>\n\n\n\n<p>En este formulario env\u00eda los datos con ayuda de un script CGI al servidor para procesarlos. Usando el m\u00e9todo POST para que sea un env\u00edo \u201cseguro\u201d.<\/p>\n\n\n\n<p>Al paso del tiempo, cuando en las computadoras tiene un cliente de correo instalado, se puede usar este c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1046\" height=\"678\" src=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image.png\" alt=\"\" class=\"wp-image-42\" srcset=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image.png 1046w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-300x194.png 300w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1024x664.png 1024w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-768x498.png 768w\" sizes=\"auto, (max-width: 1046px) 100vw, 1046px\" \/><\/figure>\n\n\n\n<p>La diferencia es el destino del formulario, el cual ya se ocupa directamente a una direcci\u00f3n de correo electr\u00f3nico. Provocando que en esta computadora abra el cliente de correo y rellene previamente los datos de este formulario.<\/p>\n\n\n\n<p>Obviamente esto no siempre pasa as\u00ed, ya que si no se configur\u00f3 previamente el cliente de correo, no se dar\u00e1n los resultados deseados, al menos no de forma inmediata a comparaci\u00f3n del formulario que env\u00eda los datos a un servidor que tenga un script CGI.<\/p>\n\n\n\n<p>Aqu\u00ed ya se establece la necesidad de enviar un correo, dependiendo de recursos externos como un servidor web, en este caso ejecutando scripts en CGI para el env\u00edo de un correo.<\/p>\n\n\n\n<p>Al paso del tiempo se llegaron a validar los datos del formulario, en este caso podemos verlo con un formulario con m\u00e9todo POST a un archivo PHP.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1046\" height=\"678\" src=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image.png\" alt=\"\" class=\"wp-image-41\" srcset=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image.png 1046w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-300x194.png 300w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1024x664.png 1024w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-768x498.png 768w\" sizes=\"auto, (max-width: 1046px) 100vw, 1046px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1046\" height=\"1162\" src=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-2.png\" alt=\"\" class=\"wp-image-44\" srcset=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-2.png 1046w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-2-270x300.png 270w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-2-922x1024.png 922w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-2-768x853.png 768w\" sizes=\"auto, (max-width: 1046px) 100vw, 1046px\" \/><\/figure>\n\n\n\n<p>Este script de PHP valida cada campo que se captur\u00f3, que no est\u00e9 vac\u00edo, y al final se env\u00eda directamente por correo electr\u00f3nico a ese destinatario. Adem\u00e1s funciona con un servidor previamente instalado y de ah\u00ed ejecuta la funci\u00f3n mail() que funciona para el env\u00edo del correo.&nbsp;<\/p>\n\n\n\n<p>Al paso del tiempo se han perfeccionado este tipo de formularios, en el caso con HTML5 se presentaron validaciones a nivel navegador, no cambia mucho el funcionamiento, pero al validar a nivel navegador funciona muy bien para el usuario com\u00fan.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1046\" height=\"864\" src=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1.png\" alt=\"\" class=\"wp-image-43\" srcset=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1.png 1046w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1-300x248.png 300w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1-1024x846.png 1024w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-1-768x634.png 768w\" sizes=\"auto, (max-width: 1046px) 100vw, 1046px\" \/><\/figure>\n\n\n\n<p>Ahora al paso de los a\u00f1os, se realizan diferentes formas de crear formularios, en este caso usando JavaScript y llamando a un script en PHP:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"809\" height=\"1600\" src=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-3.png\" alt=\"\" class=\"wp-image-45\" srcset=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-3.png 809w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-3-152x300.png 152w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-3-518x1024.png 518w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-3-768x1519.png 768w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-3-777x1536.png 777w\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1276\" height=\"1562\" src=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-4.png\" alt=\"\" class=\"wp-image-46\" srcset=\"https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-4.png 1276w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-4-245x300.png 245w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-4-837x1024.png 837w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-4-768x940.png 768w, https:\/\/bitacora.lado.mx\/wp-content\/uploads\/2024\/08\/image-4-1255x1536.png 1255w\" sizes=\"auto, (max-width: 1276px) 100vw, 1276px\" \/><\/figure>\n\n\n\n<p>Al paso del tiempo este tipo de formularios se perfeccionan a necesidad del cliente, pero tambi\u00e9n a necesidad del navegador con el servidor. El prop\u00f3sito de esta publicaci\u00f3n es para ver que se pueden dar el mismo resultado con una diferente construcci\u00f3n del c\u00f3digo, y si, (al final) es el mismo formulario.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo exploramos c\u00f3mo ha evolucionado el formulario de contacto a lo largo del tiempo, ofreciendo una visi\u00f3n personal de los cambios en el c\u00f3digo, desde un simple formulario HTML hasta las versiones m\u00e1s avanzadas. Con la llegada de HTML 2, se introdujo la capacidad de crear formularios para facilitar la comunicaci\u00f3n entre el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":1,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/40\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}