{"id":1445,"date":"2018-10-19T10:35:51","date_gmt":"2018-10-19T14:35:51","guid":{"rendered":"https:\/\/tecnojupiter.net\/?p=1445"},"modified":"2023-04-24T16:55:37","modified_gmt":"2023-04-24T20:55:37","slug":"inserta-captcha-matematico-cf7","status":"publish","type":"post","link":"https:\/\/tecnojupiter.test\/inserta-captcha-matematico-cf7\/","title":{"rendered":"C\u00f3mo insertar un captcha matem\u00e1tico en Contact Form 7"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"1280\" height=\"720\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2018\/10\/captcha-matematico-cf7.png\" alt=\"\" class=\"wp-image-1453\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2018\/10\/captcha-matematico-cf7.png 1280w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2018\/10\/captcha-matematico-cf7-800x450.png 800w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2018\/10\/captcha-matematico-cf7-384x216.png 384w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/figure><\/div>\n\n\n<p>Una de las maneras de combatir el spam en los formularios de contacto es insertar un desaf\u00edo captcha que los usuarios deben resolver antes de presionar el bot\u00f3n enviar.<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">&Iacute;ndice de contenido<\/p><ul class=\"toc_list\"><li><a href=\"#que_es_un_captchanbsp\">\u00bfQu\u00e9 es un CAPTCHA?&nbsp;<\/a><\/li><li><a href=\"#por_que_insertar_un_captcha_matematico_en_los_formularios_web\">\u00bfPor qu\u00e9 insertar un captcha matem\u00e1tico en los formularios web?<\/a><\/li><li><a href=\"#insertar_un_captcha_matematico_en_cf7\">Insertar un captcha matem\u00e1tico en CF7<\/a><\/li><li><a href=\"#conclusion\">Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"que_es_un_captchanbsp\"><strong>\u00bfQu\u00e9 es un CAPTCHA?&nbsp;<\/strong><\/span><\/h2>\n\n\n\n<div class=\"wp-block-easyblock-note-quote\">Son las siglas de\u00a0Completely Automated Public\u00a0Turing test\u00a0to tell Computers and Humans Apart\u00a0(prueba de Turing\u00a0completamente autom\u00e1tica y p\u00fablica para diferenciar ordenadores de humanos).\u00a0Se trata de una prueba desaf\u00edo-respuesta utilizada en computaci\u00f3n para determinar cu\u00e1ndo el usuario es o no humano. <strong><a href=\"https:\/\/es.wikipedia.org\/wiki\/Captcha\" target=\"_blank\" aria-label=\"Wikipedia (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Wikipedia<\/a><\/strong><\/div>\n\n\n\n<p>La prueba consiste en que al usuario se le mostrara un conjunto de caracteres ya sea una imagen distorsionada, la pieza que encaja o una operaci\u00f3n matem\u00e1tica sencilla que debe resolver.<\/p>\n\n\n\n<p>Se \u00absupone\u00bb que una m\u00e1quina no es capaz de comprender e introducir este tipo de secuencias correctamente, por lo que solamente el humano podr\u00eda hacerlo (salvo error en algunos casos).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"por_que_insertar_un_captcha_matematico_en_los_formularios_web\">\u00bfPor qu\u00e9 insertar un captcha matem\u00e1tico en los formularios web?<\/span><\/h2>\n\n\n\n<p>La respuesta es sencilla, <b>para evitar que los robots o spambots como tambi\u00e9n&nbsp;se les conoce usen los formularios para enviar informaci\u00f3n&nbsp;comercial no deseable lo que se conoce como SPAM<\/b>, correos basura de publicidad que recibimos en nuestra bandeja de entrada de correo electr\u00f3nico.<\/p>\n\n\n\n<p>T\u00edpicamente muchas personas usan o recurren a el famoso <strong>reCAPTCHA de Google<\/strong>, pero seamos honestos no a todos les gusta el reCAPTCHA de Google, porque a veces da errores.<\/p>\n\n\n\n<p>Como por ejemplo hay casos donde te indica que selecciones las im\u00e1genes donde aparezcan autom\u00f3viles y luego de hacerlo la imagen se desvanece y vuelve aparecer y as\u00ed sucesivamente.<\/p>\n\n\n<div class=\"wp-block-image \"wp-caption-text\" wp-image-1454\">\n<figure class=\"aligncenter &quot;wp-caption-text&quot;\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"352\" height=\"505\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Error-reCAPTCHA_owic8p-1.gif\" alt=\"error captcha\" class=\"wp-image-1454\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Error-reCAPTCHA_owic8p-1.gif 352w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Error-reCAPTCHA_owic8p-1-209x300.gif 209w\" sizes=\"(max-width: 352px) 100vw, 352px\" \/><figcaption class=\"wp-element-caption\"><strong>T\u00edpico captcha, error: figura se desvanece.<\/strong><\/figcaption><\/figure><\/div>\n\n\n<p>Es molesto y puedes pasar hasta 5 minutos intentando resolver el captcha, usar este captcha es arriesgarse a perder un futuro cliente.<\/p>\n\n\n\n<p>Es un error que se presenta sobre todo en computadores de escritorios y tiene que ver al parecer porque tienes tu cuenta de Google abierta en el navegador que est\u00e9s usando, por lo que si quieres lograr solucionar el captcha debes cerrar la sesi\u00f3n de tu cuenta de Google, borrar las cookies del navegador y volver a intentarlo.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#eeeeee\"><strong><em>Lee&nbsp;tambi\u00e9n<\/em>: <a href=\"https:\/\/tecnojupiter.test\/dominio-aspectos-importantes\/\" class=\"ek-link\"><em>Que deben ofrecerte al registrar un dominio web<\/em><\/a><\/strong><\/p>\n\n\n\n<p>Pues bien, hacer todo eso para un usuario com\u00fan que solo necesita comunicarse contigo, es molesto tambi\u00e9n, en este peque\u00f1o tutorial enfocado solamente a <a rel=\"noopener noreferrer\" href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\">Contact Form 7<\/a> <strong>(CF7)<\/strong> el plugin m\u00e1s popular en este campo, aprender\u00e1s como insertar un captcha matem\u00e1tico en su formulario de contacto de su sitio web.<\/p>\n\n\n\n<p class=\"has-text-align-center bg_label_green_text\" style=\"font-size:17px\"><span style=\"background-color:#64b044\" class=\"has-inline-background\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-theme-palette-9-color\"><strong>Actualizaci\u00f3n<\/strong><\/mark><\/span><\/p>\n\n\n\n<p>Quiero informarte que a finales del mes de octubre, espec\u00edficamente el\u00a029 de octubre de 2018 Google\u00a0actualizo la API de reCAPTCHA a v3 esta nueva versi\u00f3n es una incre\u00edble mejora si la comparamos con la v2.<\/p>\n\n\n\n<p><strong>Las caracter\u00edsticas principales de reCAPTCHA v3:<\/strong><\/p>\n\n\n\n<ul>\n<li>Funciona en segundo plano. Por lo que los usuarios no necesitan ver una imagen o leer un texto borroso o incluso tener que marcar la casilla de verificaci\u00f3n \u00abNo soy un robot\u00bb para enviar el formulario.<\/li>\n\n\n\n<li>Puedes ejecutar reCAPTCHA tantas veces como desees con diferentes acciones en la misma p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n<p>Google ha entendido que la v2 a pesar de estar disponible a\u00fan, interrump\u00eda a los usuarios por lo que esta API v3 ya no afecta la conversi\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-easyblock-note-info\">Las claves API para reCAPTCHA v3 son diferentes de las de v2; Las claves para v2 no funcionan con la API v3. Si planeas utilizar reCAPTCHA v3 debes volver a registrar sus sitios web para obtener nuevas claves para v3.<\/div>\n\n\n\n<p>Mi conclusi\u00f3n de esta actualizaci\u00f3n, creo que reCAPTCHA V3 no es perfecto, pero solo el tiempo lo dir\u00e1.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-default\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"insertar_un_captcha_matematico_en_cf7\">Insertar un captcha matem\u00e1tico en CF7<\/span><\/h2>\n\n\n\n<p>Bien ahora pasando a lo importante, insertar un captcha matem\u00e1tico es muy sencillo de lo que parece, solo siga lo siguientes pasos a continuaci\u00f3n:<\/p>\n\n\n\n<p>Primero ub\u00edquese en su <strong>Panel de administraci\u00f3n WordPress,<\/strong> clic en <strong>Contacto &gt; Formularios de Contacto <\/strong>si tiene varios formularios haga clic en el&nbsp;que desea donde aparezca el captcha para editarlo.<\/p>\n\n\n\n<p>Con el cursor ubique y haga clic donde quiere que aparezca la pregunta de desaf\u00edo, lo ideal es que aparezca antes del bot\u00f3n \u00ab<b>Enviar<\/b>\u00bb pero usted puede colocarla donde crea que es mejor.<\/p>\n\n\n\n<p>Luego haga <strong>clic en el bot\u00f3n cuestionario<\/strong> como se muestra en la imagen siguiente:<\/p>\n\n\n<div class=\"wp-block-image \"wp-caption-text\" wp-image-1455 size-full\">\n<figure class=\"aligncenter &quot;wp-caption-text&quot;\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"413\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Editar-formulario-de-contacto_gnnowp-1.png\" alt=\"editar formulario cf7 captcha matematico\" class=\"wp-image-1455\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Editar-formulario-de-contacto_gnnowp-1.png 600w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Editar-formulario-de-contacto_gnnowp-1-300x207.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">Para este ejemplo he usado el formulario por defecto de CF7.<\/figcaption><\/figure><\/div>\n\n\n<p>En la&nbsp;&nbsp;ventana emergente que se abre tienes varios campos:<\/p>\n\n\n<div class=\"wp-block-image \"wp-caption-text\" wp-image-1456\">\n<figure class=\"aligncenter &quot;wp-caption-text&quot;\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"589\" height=\"502\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Editar-formulario-cf7-captcha-matematico_vkgrm7-1.png\" alt=\"pop-up-cf7-captcha\" class=\"wp-image-1456\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Editar-formulario-cf7-captcha-matematico_vkgrm7-1.png 589w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Editar-formulario-cf7-captcha-matematico_vkgrm7-1-300x256.png 300w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><figcaption class=\"wp-element-caption\">CF7 usa el sistema de etiquetas para generar lo formularios.<\/figcaption><\/figure><\/div>\n\n\n<p>En el campo <strong>Nombre<\/strong> puede dejar el predeterminado o simplemente cambiarlo por otro. Esto es para fines de identificaci\u00f3n no se mostrara en el frontend.<\/p>\n\n\n\n<p><strong>Preguntas y Respuestas<\/strong>. Puedes realizar tanto preguntas como operaciones matem\u00e1ticas.<br>\nEn este ejemplo he usado solo las operaciones matem\u00e1ticas siguiendo el formato adecuado del plugin.<\/p>\n\n\n\n<p class=\"has-text-align-center bg_label_blue_text\"><span style=\"background-color:#3366ff\" class=\"has-inline-background\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-theme-palette-8-color\">Operaci\u00f3n | Respuesta<\/mark><\/strong><\/span><\/p>\n\n\n\n<p><strong>uno + 2 =|3<\/strong><br>\n<strong>5 + dos =|7<\/strong><br>\n<strong>2 x cinco =|10<\/strong><\/p>\n\n\n\n<p>Como te muestro en el siguiente gif:<\/p>\n\n\n<div class=\"wp-block-image \"wp-caption-text\" wp-image-1457\">\n<figure class=\"aligncenter &quot;wp-caption-text&quot;\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"664\" height=\"457\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/CF7-captcha-matematico_kabivf-1.gif\" alt=\"captcha-etiquetas-cf7\" class=\"wp-image-1457\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/CF7-captcha-matematico_kabivf-1.gif 664w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/CF7-captcha-matematico_kabivf-1-600x413.gif 600w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/CF7-captcha-matematico_kabivf-1-300x206.gif 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><figcaption class=\"wp-element-caption\">Opcional si desea agregar un Atributo ID o clase, el plugin te lo permite.<\/figcaption><\/figure><\/div>\n\n\n<p>Insertado el desaf\u00edo<strong>&nbsp;Guardas el formulario y actualizas la p\u00e1gina donde lo est\u00e9s implementando<\/strong>, pru\u00e9belo y ver\u00e1 que funciona bien.<\/p>\n\n\n\n<p>Si deseas agregar otra etiqueta algo como un mensaje antes del desaf\u00edo tambi\u00e9n puedes hacerlo.<\/p>\n\n\n\n<p>Por ejemplo algo como; \u00ab<em>Antes de presionar el bot\u00f3n&nbsp;enviar resuelve la siguiente operaci\u00f3n&nbsp;<\/em><i>matem\u00e1tica<\/i>\u00ab.<\/p>\n\n\n\n<p>Siempre hay uno que otro plugin en el repertorio de WordPress que puede hacer eso agregar un desaf\u00edo captcha matem\u00e1tico en los formularios del sitio web.<\/p>\n\n\n\n<p>El plugin de seguridad&nbsp;<strong><a href=\"https:\/\/wordpress.org\/plugins\/all-in-one-wp-security-and-firewall\/\" target=\"_blank\" rel=\"noopener noreferrer\">All In One WP Security <\/a><\/strong>te permite insertar un campo captcha en los formularios de comentarios lo cual es bueno.<\/p>\n\n\n\n<p><a href=\"https:\/\/es.wordpress.org\/plugins\/wp-math-captcha\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Math Captcha<\/strong><\/a>&nbsp;es otro plugin que se encuentra tambi\u00e9n el repertorio de WP.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"300\" height=\"284\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/math-captcha-options_a0u2tx-1-300x284.png\" alt=\"math-captcha-matematico\" class=\"wp-image-1460\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/math-captcha-options_a0u2tx-1-300x284.png 300w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/math-captcha-options_a0u2tx-1.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n<p>Te permite escoger entre varias opciones en que secci\u00f3n quieres que se muestre el captcha matem\u00e1tico; formularios de registro, formularios de comentarios, formularios de login y en los formularios que hayas creados con el plugin Contact Form 7.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"conclusion\">Conclusi\u00f3n<\/span><\/h2>\n\n\n\n<p>Y eso es todo, muy f\u00e1cil de implementar un captcha matem\u00e1tico en CF7 te ahorras la carga del script de reCAPTCHA de Google, y el porcentaje de efectividad contra el spam esta entre un 90 y 95% aproximadamente.<\/p>\n\n\n\n<p>No coloques operaciones de solamente n\u00fameros 1+1 porque hay bots muy inteligentes que las resuelven f\u00e1cilmente y te llegara mucho correo spam.<\/p>\n\n\n\n<p>Coloca operaciones que contengan n\u00fameros y letras como en el ejemplo mostrado y tendr\u00e1s buenos resultados.<\/p>\n\n\n\n<p>Y como siempre, si tienes alguna duda no dudes en dejarla en los comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprende a insertar un captcha matem\u00e1tico en el plugin Contact Form 7, evita que el spam llegue a tu bandeja de entrada de correo electr\u00f3nico.<\/p>\n","protected":false},"author":1,"featured_media":1453,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[5],"tags":[29,28,30,18],"_links":{"self":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts\/1445"}],"collection":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/comments?post=1445"}],"version-history":[{"count":2,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts\/1445\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts\/1445\/revisions\/2867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/media\/1453"}],"wp:attachment":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/media?parent=1445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/categories?post=1445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/tags?post=1445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}