WordPress.org

1. Otto
   Tech Ninja
   Posted 1 year ago #

   The Grunion Contact Form plugin adds this stylesheet inline with the form.
   

   <style>
   	input[type='text'] { width: 300px; }
   	input { margin-bottom: 0 !important; font-size: 12px !important; font-family: 'Lucida Grande',Verdana,Arial,'Bitstream Vera Sans',sans-serif; }
   	textarea { height: 200px; width: 400px; }
   	input[type='radio'] { float: left; }
   	label { margin-bottom: 3px; }
   	input{type='checkbox'] { display: inline-block; }
   </style>

   Ignoring the issue of adding inline stylesheets (we all do it, really), the rules are too broad. Any other form elements on the page not affected by their own styling will be impacted by these rules as well.

   Since the form does have a "contact-form" class on it, that class should be used in these rules to make them more specific to the contact form in general.

   As in:
   

   <style>
   	 .contact-form input[type='text'] { width: 300px; }
   	 .contact-form input { margin-bottom: 0 !important; font-size: 12px !important; font-family: 'Lucida Grande',Verdana,Arial,'Bitstream Vera Sans',sans-serif; }
   	 .contact-form textarea { height: 200px; width: 400px; }
   	 .contact-form input[type='radio'] { float: left; }
   	 .contact-form label { margin-bottom: 3px; }
   	 .contact-form input{type='checkbox'] { display: inline-block; }
   </style>

2. Joseph Scott
   Member
   Posted 1 year ago #

   Agreed, we'll definitely update those.

3. Lorangeo
   Member
   Posted 1 year ago #

   Yes, this was messing up all my templates! (!!!)

   Thank you for the solution :-)

4. Peter Wilson
   Member
   Posted 1 year ago #

   I'd also suggest:

   * remove !important from the rules above to allow the rules to be overridden in style.css
   * remove the inline styles, eg "<label style='font-weight: bold; display: block;'" and move them to the CSS block. Again to allow theme writers to override the styles.

   In the mean time, I'll remove the shortcode and replace it with my own.
   

   remove_shortcode ('contact-form');
   add_shortcode( 'contact-form', 'my_contact_form_shortcode' );

5. Joseph Scott
   Member
   Posted 1 year ago #

   @peterwilsoncc just disable the Grunion plugin.

6. Peter Wilson
   Member
   Posted 1 year ago #

   @Joseph Scott

   I still want to use the plugin.

   Like others, I just want to customise the HTML a bit and replacing the short code seems the most logical way.

   my_contact_form_shortcode would basically be a duplicate of the existing function with the style's commented out. Obviously, as plugin updates are released, the new code would need to be updated, making maintenance more difficult.

   P

7. werdplae
   Member
   Posted 1 year ago #

   Where do I find the style sheet to add the class? I can't seem to find it.

Topic Closed

This topic has been closed to new replies.