Los artículos de la categoría Manual del desarrollador abordan temas que requieren conocimiento técnico. Ten cuidado y utiliza las técnicas descritas a continuación bajo tu propia responsabilidad. Si no tienes experiencia en desarrollo, y necesitas ayuda, te recomendamos solicitar el apoyo de un profesional.
Cada instancia de un formulario de contacto que se muestra en la parte pública 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ón de las interacciones del usuario.
Estados predefinidos y su significado
init— Estado inicial.invalid— El envío del formulario se ha interrumpido porque algunos de los datos introducidos por el usuario no son válidos.unaccepted— El envío del formulario se ha interrumpido porque el usuario no ha aceptado alguna de las condiciones.spam— El envío del formulario se ha interrumpido porque se ha detectado actividad de spam.aborted— El envío del formulario se ha interrumpido.sent— El envío del formulario se ha completado y el correo electrónico se ha enviado correctamente.failed— El envío del formulario se ha completado, pero no se ha podido enviar el correo electrónico.submitting— El envío del formulario está en curso.resetting— El restablecimiento del formulario está en curso.validating— La validación del formulario en la parte pública del sitio está en curso.payment-required— El envío del formulario se ha completado parcialmente y ahora el usuario debe realizar un pago.
Clase CSS según el estado
El elemento form 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ífico. A continuación, puedes ver algunos ejemplos de estas reglas de estilo, extraídos de la hoja de estilos de la parte pública de Contact Form 7:
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; /* Azul */
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Verde */
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Rojo */
}
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Naranja */
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; /* Amarillo */
}
Evento DOM al cambiar de estado
Cuando cambia el estado de un formulario de contacto, Contact Form 7 dispara el evento DOM personalizado wpcf7statuschanged. Además de las propiedades básicas, el objeto de evento de wpcf7statuschanged incluye las propiedades detail.status y detail.prevStatus, que representan, respectivamente, el estado actual y el estado anterior. A continuación, puedes ver un ejemplo de código:
document.addEventListener( 'wpcf7statuschanged', function( event ) {
console.log( `El estado ha cambiado de ${ event.detail.prevStatus } a ${ event.detail.status }.` );
}, false );
Las clases inert-on-(status)
Contact Form 7 admite la funcionalidad de las clases HTML inert-on-(status). La parte (status) es una variable cuyo valor corresponde al nombre de un estado. Cuando cambia el estado y se dispara el evento DOM wpcf7statuschanged, el script de Contact Form 7 en la parte pública del sitio establece el atributo inert en los elementos que tengan la clase inert-on-(nuevo estado). Por ejemplo, cuando el estado del formulario cambia a sent, los elementos con la clase inert-on-sent pasan a ser inertes.