Style success message

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>

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{…}

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

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}

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.

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>

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?

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>”]

You, sir, are a genius. Such a simple fix. Thank you so much!