Title: Style success message
Last modified: August 21, 2016

---

# Style success message

 *  Resolved [navyspitfire](https://wordpress.org/support/users/navyspitfire/)
 * (@navyspitfire)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/)
 * Is there a way I can solely style the success message? Since it’s not wrapped
   in div’s and within the same form id as the input/submit buttons, trying to target
   it also targets those.
 * [https://wordpress.org/plugins/constant-contact-widget/](https://wordpress.org/plugins/constant-contact-widget/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022572)
 * Hi navyspitfire! One way would just have your success message contain some html,
   and use a class or inline styling, for example:
 * <p style=”color:red”>Yay!</p>
 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022574)
 * Sorry about that, it won’t work because the message would be escaped by esc_attr.
 * The alternative is to style the box for the success message, then override the
   styles for the form by targeting
 * .constantcontactwidget_form p{…}
    .constantcontactwidget_form label{…} .constantcontactwidget_form
   input{…}
 *  Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/)
 * (@navyspitfire)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022781)
 * I’m not really quite sure what to style. This is the code before I submit:
 *     ```
       <form id="sf_widget_constantcontact_2_form" onsubmit="return sf_widget_constantcontact_2_submit(this);">
           <input type="hidden" name="grp" value="General Interest">
           <input type="text" name="eml" class="input" placeholder="Email">     <input type="submit" value="SUBSCRIBE">
           <input type="text" name="eml" class="input" placeholder="Email">
           <input type="submit" value="SUBSCRIBE">
       </form>
       ```
   
 * And after:
 * `<form id="sf_widget_constantcontact_2_form" onsubmit="return sf_widget_constantcontact_2_submit(
   this);">Added!</form>`
 * Anyway I try and target the ‘Added!’, even if overriding, targets the text I 
   have beforehand
 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022791)
 * Hi navyspitfire!
 * I am not sure exactly how you want to style the text, but for example if you 
   want the text to be black in the form inputs, but red for the success message,
   you could use:
 * #sf_widget_constantcontact_2_form {color:red}
    #sf_widget_constantcontact_2_form
   input{color:black}
 *  Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/)
 * (@navyspitfire)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022799)
 * I’m trying to give it some padding, but when I try and target it it also targets
   the button text (as defined in the widget); there’s no way to individually target
   one or the other- that’s my problem.
 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022801)
 * Hi navyspitfire!
 * OK I’ve modified the plugin (version 1.8.1) so you can use html for the success
   message, so now you can use this for the success message:
 * <p style=”padding:20px”>Added!</p>
 *  Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/)
 * (@navyspitfire)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022804)
 * Thanks for the change, I really appreciate you putting time into this.
 * However, it problem still persists. Since the “constantcontactwidget_form” class
   surrounds all the inputs before and after the user hits submit, it also surrounds
   the “Added!” text AFTER the user hits submit. So, try to style the ‘Added!’ button
   inadvertently styles the input type=”submit” button.
 * Is there anyway you can add a class to the “Added!” text AFTER the user has submitted
   their email address? Or is there a way to target the style after info has been
   submitted?
 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022806)
 * Hi navyspitfire!
 * What I am suggesting is eliminating all the css styles trying to target the success
   message, and instead inlining the style into the success message html itself.
   So if you are using the widget, the success message as you enter it in the widget
   is (including all the html tags):
 * <p style=”padding:20px”>Added!</p>
 * If you are using a shortcode you would use:
 * [constantcontactwidget grp=”…” btn=”add” msg=”<p style=’padding:20px’>Added!</
   p>”]
 *  Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/)
 * (@navyspitfire)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022810)
 * You, sir, are a genius. Such a simple fix. Thank you so much!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Style success message’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/constant-contact-widget.svg)
 * [Constant Contact Widget](https://wordpress.org/plugins/constant-contact-widget/)
 * [Support Threads](https://wordpress.org/support/plugin/constant-contact-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/constant-contact-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/constant-contact-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/constant-contact-widget/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [div](https://wordpress.org/support/topic-tag/div/)
 * [id](https://wordpress.org/support/topic-tag/id/)
 * [submit](https://wordpress.org/support/topic-tag/submit/)

 * 9 replies
 * 2 participants
 * Last reply from: [navyspitfire](https://wordpress.org/support/users/navyspitfire/)
 * Last activity: [11 years, 10 months ago](https://wordpress.org/support/topic/style-success-message/#post-5022810)
 * Status: resolved