Buy WPHelpful

Custom CSS for styling

While we don’t offer support for your custom CSS, here are the classes for our form that you could further style to meet your needs and branding:

.wph-wrapper {} The DIV which wraps the form.
.wph-inner {} The inner DIV which gives space to the form.
.wph-form {} The FORM element.
.wph-h3 { font-size: #CUSTOM; } The HEADING element.
.wph-p { font-size: #CUSTOM; } The SUB-HEADING element.
.wph-textarea { border: #CUSTOM; } The FEEDBACK text area.
.wph-button { background: #COLOR; } The button to submit feedback.

.svg-emoji, .svg-stars { fill: #COLOR; } Change the color of the default state of the emojis or stars.
.wph-emoji input:checked + svg.svg-emoji { fill: #COLOR; } Change the color of the selected state for emojis or stars.

.wph-simple input:hover + label { border-color: #COLOR; color: #COLOR; } Change the text and border color of the default state for yes/no.
.wph-simple input:checked + label { border-color: #COLOR; color: #COLOR; } Change the text and border color for the selected state for yes/no.

You can take this much further with your own CSS in your functions file, or have your developer help out to further match your theme.

Happy coding!

← Return to support