Estilismo del cuadro de mensaje de confirmación

¿Te gustaría que el mensaje de confirmación de tu formulario coincida con la apariencia de tu marca? Por defecto, WPForms muestra los envíos correctos en un cuadro verde, pero puedes modificar fácilmente este estilo o eliminarlo por completo con un simple código CSS.

Esta guía te mostrará cómo personalizar el estilo de tu mensaje de confirmación para crear una experiencia de formulario más coherente.

Entendiendo el estilo predeterminado

WPForms envuelve automáticamente los mensajes de envío correcto del formulario en un cuadro verde con relleno y bordes específicos. Si bien esto funciona bien para muchos sitios, es posible que desees:

• Eliminar el estilo por completo para una apariencia más limpia
• Cambiar los colores para que coincidan con tu marca
• Modificar elementos específicos como el relleno o los bordes
• Aplicar estilos personalizados solo a formularios específicos

Personalizar el mensaje de confirmación

Exploremos diferentes formas de modificar el estilo de tu mensaje de confirmación. Si necesitas ayuda para añadir CSS personalizado a tu sitio, consulta nuestra guía sobre cómo añadir código personalizado a WordPress.

Eliminar el estilo de fondo para todos los formularios

Para eliminar por completo el estilo verde predeterminado de todos los mensajes de confirmación del formulario, añade este CSS:

.wpforms-confirmation-container-full {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Con el CSS que se muestra arriba, se elimina el color de fondo y el borde del mensaje de confirmación.

Personalización para formularios específicos

Para modificar el mensaje de confirmación de un solo formulario, utiliza este CSS (reemplaza 1000 con el ID de tu formulario):

div#wpforms-confirmation-1000 {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Si necesitas ayuda para encontrar el ID de tu formulario, consulta nuestro tutorial sobre cómo encontrar los IDs de los formularios.

Cambiar los colores de fondo

Para cambiar el color de fondo del mensaje de confirmación para todos los formularios:

div.wpforms-confirmation-container-full {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

Este ejemplo crea un fondo oscuro con texto blanco. Ajusta los códigos de color (#333333 y #ffffff) para que coincidan con los colores deseados.

¡Y ahora has ajustado con éxito el estilo del mensaje de confirmación! A continuación, ¿te gustaría aprender a personalizar otros elementos del formulario? Consulta nuestra guía sobre cómo crear etiquetas inteligentes personalizadas para añadir contenido dinámico a tus formularios.