{"id":90598,"date":"2023-12-17T04:39:00","date_gmt":"2023-12-16T19:39:00","guid":{"rendered":"https:\/\/contactform7.com\/?p=90598"},"modified":"2026-10-13T23:44:57","modified_gmt":"2026-10-13T14:44:57","slug":"form-status","status":"publish","type":"post","link":"https:\/\/contactform7.com\/es\/2023\/12\/17\/form-status\/","title":{"rendered":"Estado del formulario"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Cada instancia de un formulario de contacto que se muestra en la parte p\u00fablica del sitio tiene un estado. Este debe ser uno de los estados predefinidos o un estado personalizado definido por el usuario cuyo nombre comience con el prefijo <code>custom-<\/code>. El estado cambia de uno a otro en funci\u00f3n de las interacciones del usuario.<\/p>\n\n\n\n<!--more-->\n\n\n\n\n\n\n<h4 class=\"wp-block-heading\" id=\"predefined-statuses\">Estados predefinidos y su significado<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>init<\/code> \u2014 Estado inicial.<\/li>\n\n\n\n<li><code>invalid<\/code> \u2014 El env\u00edo del formulario se ha interrumpido porque algunos de los datos introducidos por el usuario no son v\u00e1lidos.<\/li>\n\n\n\n<li><code>unaccepted<\/code> \u2014 El env\u00edo del formulario se ha interrumpido porque el usuario no ha aceptado alguna de las condiciones.<\/li>\n\n\n\n<li><code>spam<\/code> \u2014 El env\u00edo del formulario se ha interrumpido porque se ha detectado actividad de spam.<\/li>\n\n\n\n<li><code>aborted<\/code> \u2014 El env\u00edo del formulario se ha interrumpido.<\/li>\n\n\n\n<li><code>sent<\/code> \u2014 El env\u00edo del formulario se ha completado y el correo electr\u00f3nico se ha enviado correctamente.<\/li>\n\n\n\n<li><code>failed<\/code> \u2014 El env\u00edo del formulario se ha completado, pero no se ha podido enviar el correo electr\u00f3nico.<\/li>\n\n\n\n<li><code>submitting<\/code> \u2014 El env\u00edo del formulario est\u00e1 en curso.<\/li>\n\n\n\n<li><code>resetting<\/code> \u2014 El restablecimiento del formulario est\u00e1 en curso.<\/li>\n\n\n\n<li><code>validating<\/code> \u2014 La validaci\u00f3n del formulario en la parte p\u00fablica del sitio est\u00e1 en curso.<\/li>\n\n\n\n<li><code>payment-required<\/code> \u2014 El env\u00edo del formulario se ha completado parcialmente y ahora el usuario debe realizar un pago.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"class-for-status\">Clase CSS seg\u00fan el estado<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">El elemento <code>form<\/code> tiene una clase HTML que representa su estado actual. Puedes utilizar esta clase en un selector CSS para crear una regla de estilo que solo se aplique cuando el formulario se encuentre en un estado espec\u00edfico. A continuaci\u00f3n, puedes ver algunos ejemplos de estas reglas de estilo, extra\u00eddos de la hoja de estilos de la parte p\u00fablica de Contact Form 7:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.wpcf7 form .wpcf7-response-output {\n\tmargin: 2em 0.5em 1em;\n\tpadding: 0.2em 1em;\n\tborder: 2px solid #00a0d2; \/* Azul *\/\n}\n\n.wpcf7 form.init .wpcf7-response-output,\n.wpcf7 form.resetting .wpcf7-response-output,\n.wpcf7 form.submitting .wpcf7-response-output {\n\tdisplay: none;\n}\n\n.wpcf7 form.sent .wpcf7-response-output {\n\tborder-color: #46b450; \/* Verde *\/\n}\n\n.wpcf7 form.failed .wpcf7-response-output,\n.wpcf7 form.aborted .wpcf7-response-output {\n\tborder-color: #dc3232; \/* Rojo *\/\n}\n\n.wpcf7 form.spam .wpcf7-response-output {\n\tborder-color: #f56e28; \/* Naranja *\/\n}\n\n.wpcf7 form.invalid .wpcf7-response-output,\n.wpcf7 form.unaccepted .wpcf7-response-output,\n.wpcf7 form.payment-required .wpcf7-response-output {\n\tborder-color: #ffb900; \/* Amarillo *\/\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"dom-event-on-status-change\">Evento DOM al cambiar de estado<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando cambia el estado de un formulario de contacto, Contact Form 7 dispara el <a href=\"https:\/\/contactform7.com\/dom-events\/\" data-type=\"page\" data-id=\"21911\">evento DOM<\/a> personalizado <code>wpcf7statuschanged<\/code>. Adem\u00e1s de las <a href=\"https:\/\/contactform7.com\/dom-events\/#coding-event-handler\" data-type=\"link\" data-id=\"https:\/\/contactform7.com\/dom-events\/#coding-event-handler\">propiedades b\u00e1sicas<\/a>, el objeto de evento de <code>wpcf7statuschanged<\/code> incluye las propiedades <code>detail.status<\/code> y <code>detail.prevStatus<\/code>, que representan, respectivamente, el estado actual y el estado anterior. A continuaci\u00f3n, puedes ver un ejemplo de c\u00f3digo:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndocument.addEventListener( &#039;wpcf7statuschanged&#039;, function( event ) {\n\tconsole.log( `El estado ha cambiado de ${ event.detail.prevStatus } a ${ event.detail.status }.` );\n}, false );\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"inert-on-status\">Las clases inert-on-(status)<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Contact Form 7 admite la funcionalidad de las clases HTML <code>inert-on-<em>(status)<\/em><\/code>. La parte <code><em>(status)<\/em><\/code> es una variable cuyo valor corresponde al nombre de un estado. Cuando cambia el estado y se dispara el evento DOM <code>wpcf7statuschanged<\/code>, el script de Contact Form 7 en la parte p\u00fablica del sitio establece el atributo <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/inert\" data-type=\"link\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/inert\">inert<\/a><\/code> en los elementos que tengan la clase <code>inert-on-<em>(nuevo estado)<\/em><\/code>. Por ejemplo, cuando el estado del formulario cambia a <code>sent<\/code>, los elementos con la clase <code>inert-on-sent<\/code> pasan a ser inertes.<\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Cada instancia de un formulario de contacto que se muestra en la parte p\u00fablica del sitio tiene un estado. Este debe ser uno de los estados predefinidos o un estado personalizado definido por el usuario cuyo nombre comience con el prefijo custom-. El estado cambia de uno a otro en funci\u00f3n de las interacciones del &hellip; <a href=\"https:\/\/contactform7.com\/es\/2023\/12\/17\/form-status\/\" class=\"more-link\">Seguir leyendo <span class=\"screen-reader-text\">Estado del formulario<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_locale":"es_ES","_original_post":"https:\/\/contactform7.com\/?p=49831","footnotes":"","jetpack_post_was_ever_published":false},"categories":[19],"tags":[],"class_list":["post-90598","post","type-post","status-publish","format-standard","hentry","category-cookbook","es-ES"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts\/90598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/comments?post=90598"}],"version-history":[{"count":0,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts\/90598\/revisions"}],"wp:attachment":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/media?parent=90598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/categories?post=90598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/tags?post=90598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}