I’ve also noticed that the CSS for the confirmation message is not reflecting on the front end.
Hi there,
I also had that question and I did it with this code, I hope it helps you
/* Customizing WPForms */
#wpforms-129-field_2::placeholder, #wpforms-129-field_3::placeholder, #wpforms-129-field_4::placeholder, #wpforms-129-field_5::placeholder,
#wpforms-129-field_6, #wpforms-129-field_7::placeholder {
color: rgba(0, 0, 0, 0.7);
font-size: 16px;
font-weight: 400;
opacity: 1;
}
div.wpforms-container-full input[type=date]:focus, div.wpforms-container-full input[type=datetime]:focus, div.wpforms-container-full input[type=datetime-local]:focus, div.wpforms-container-full input[type=email]:focus, div.wpforms-container-full input[type=month]:focus, div.wpforms-container-full input[type=number]:focus, div.wpforms-container-full input[type=password]:focus, div.wpforms-container-full input[type=range]:focus, div.wpforms-container-full input[type=search]:focus, div.wpforms-container-full input[type=tel]:focus, div.wpforms-container-full input[type=text]:focus, div.wpforms-container-full input[type=time]:focus, div.wpforms-container-full input[type=url]:focus, div.wpforms-container-full input[type=week]:focus, div.wpforms-container-full select:focus, div.wpforms-container-full textarea:focus {
box-shadow: none !important;
}
div.wpforms-container-full input[type=submit]:focus:after, div.wpforms-container-full button[type=submit]:focus:after, div.wpforms-container-full .wpforms-page-button:focus:after {
border: none !important;
}
.wpforms-field-required ~ em, input.wpforms-error ~ em {
display: none !important;
}
.wpforms-field-required ~ em, input.wpforms-error ~ em {
display: none !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
background: none !important;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
}
Hi @aprilbabybelle,
Thanks for reaching out!
From your screenshot, it seems you’d like to add Material Design to your WPForms fields. For this, you can follow our guide on how to add Material Design using CSS.
And to adjust the visual of the confirmation message, you can check our guide here.
And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.
Hope this helps!
Thank you to you both! Solutions work perfectly. Much appreciated!
Hi @aprilbabybelle,
You’re most welcome, happy to help!
It looks like you’ve marked this post as resolved. If you’d like more help with using WPForms Lite, please feel free to reach out.
Thanks!
