Title: [Plugin: WP Opt-in] CSS classes PLEASE!!!
Last modified: August 19, 2016

---

# [Plugin: WP Opt-in] CSS classes PLEASE!!!

 *  [plinth](https://wordpress.org/support/users/plinth/)
 * (@plinth)
 * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/)
 * Hi, this is a really useful little plugin, but could I request a couple of things
   please:
    - add css classes to all the elements so we can style them as we need, like 
      giving the `<form>` tag an id for example
    - please also remove the wrapping `<p>` tags around the form elements and replace
      with a correctly id’d `<label>`
    - the `<input>` submit button would be more helpful if it were a `<button>`,
      but failing that, just giving it an id would be great
    - finally, in an ideal world, you’d give the option for the submit button to
      be an image submit button!
 *  That last one’s a long shot I know, but surely giving everything an id should
   be high up on the list in these modern, semantic times?!
 *  Thanks
 * [http://wordpress.org/extend/plugins/wp-opt-in/](http://wordpress.org/extend/plugins/wp-opt-in/)

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

 *  [begetolo](https://wordpress.org/support/users/begetolo/)
 * (@begetolo)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892784)
 * I’m not really a CSS expert, but you can style the individual elements. The whole
   plugin is wrapped in a div with an ID (WPOI). Just be more specific.
 * For the form for instance you then can use
    #WPOI FORM {margin:10px} or the button#
   WPOI INPUT[TYPE=SUBMIT] {border:none; background-image:url(images/button.jpg)}
   etc.
 * Hope this helps.
 *  Plugin Author [petter](https://wordpress.org/support/users/petter/)
 * (@petter)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892806)
 * plinth: I tried to improve the CSS-issue for first-time users by changing the
   default options for form header. This should be included in version 1.4.
 * begetolo: Thanks for helping!
 *  Thread Starter [plinth](https://wordpress.org/support/users/plinth/)
 * (@plinth)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892807)
 * [@begetolo](https://wordpress.org/support/users/begetolo/) – good idea, but INPUT[
   TYPE=SUBMIT] is a css3 pseudo class, so it wouldn’t work for everyone.
 * [@petter](https://wordpress.org/support/users/petter/) – thanks for taking this
   onboard!
 *  Thread Starter [plinth](https://wordpress.org/support/users/plinth/)
 * (@plinth)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892810)
 * Still not ideal. I’ve done the following to get it to look how I want. Hacking
   the core plugin is not something I like doing, but in the absence of usable css
   classes I’ve had to:
 *     ```
       function wpoi_show_form()
       {
       	echo '<form class="form" action="" method="post">' . "\n";
       	echo '' . wpoi_get_option('wpoi_form_email');
       	echo ' <input type="text" onfocus="this.value = (this.value==\'Sign up for our emailers...\')? \'\' : this.value;" value="Sign up for our emailers..." class="formentry" name="wpoi_email" id="wpoi_email" />' . "\n";
       	echo '<input type="image" class="submit" src="/wp-content/themes/x/images/submit.png" value="' . wpoi_get_option('wpoi_form_send');
       	echo '" />' . "\n</form>\n";
       }
       ```
   
 *  [begetolo](https://wordpress.org/support/users/begetolo/)
 * (@begetolo)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892811)
 * Doesn’t look bad.
 * If you do need classes, why not use jQuery to add them? This doesn’t need ‘messing’
   with the core code, so een upgrade would still be possible.
 * [addClass](http://api.jquery.com/addClass/)
 *  Thread Starter [plinth](https://wordpress.org/support/users/plinth/)
 * (@plinth)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892853)
 * [@begetolo](https://wordpress.org/support/users/begetolo/): Why should I be forced
   to add more jquery script to my site when I shouldn’t have to? Adding css classes
   is a pretty basic part of forming a good plugin.
 * [@petter](https://wordpress.org/support/users/petter/): Couple of things, firstly
   I still think this is a good, lightweight plugin that just needs a few small 
   tweaks to make it great.
 * The changes you’ve made to the latest version, specifically “Modified default
   options for form header for better CSS” are not enough to make it suitably usable
   with css. I tried adding a class to the error messages so that they would display
   like this:
 * `<p class="msg">Bad e-mail address.</p>`
 * But when I did that it ‘broke’ the admin panel. Here’s a screengrab to what I
   see now: [http://awesomescreenshot.com/008hwqqe0](http://awesomescreenshot.com/008hwqqe0)
 * Surely it wouldn’t be a big job to change your core code to have these display
   with a paragraph class by default? Also, I often need to style the input fields
   differently, and if you haven’t added a class then I can’t separate them.
 *  Plugin Author [petter](https://wordpress.org/support/users/petter/)
 * (@petter)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892854)
 * plinth: Thanks for sticking around and all the patience! I would appreciate your
   help. Do you think something like this would be better?
 *     ```
       <div class="widget" id="wpoi_div">Receive information here
        <form action="" method="post" id="wpoi_form">
         <label for="wpoi_email">E-mail:</label>
         <input type="text" class="wpoi_input" id="wpoi_email" />
         <br />
         <input type="submit" value="Submit" id="wpoi_submit" />
        </form>
        <p id="wpoi_msg"><b>Failed sending to e-mail address.</b></p>
       </div>
       ```
   
 *  Thread Starter [plinth](https://wordpress.org/support/users/plinth/)
 * (@plinth)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892855)
 * [@petter](https://wordpress.org/support/users/petter/): yes that’s much better,
   although I would advise dropping the `<br />` from the middle, as the layout 
   here is better controlled via css than hardcoded into the background.
 *  [caps](https://wordpress.org/support/users/caps/)
 * (@caps)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892865)
 * Unfortunately this plugin allows multiple entries of the same email address.

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

The topic ‘[Plugin: WP Opt-in] CSS classes PLEASE!!!’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-opt-in.svg)
 * [WP Opt-in](https://wordpress.org/plugins/wp-opt-in/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-opt-in/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-opt-in/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-opt-in/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-opt-in/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-opt-in/reviews/)

 * 9 replies
 * 4 participants
 * Last reply from: [caps](https://wordpress.org/support/users/caps/)
 * Last activity: [14 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-opt-in-css-classes-please/#post-1892865)
 * Status: not resolved