WordPress.org

Ready to get started?Download WordPress

Forums

Grunion Contact Form
Styling rules can break other forms on pages (7 posts)

  1. Samuel Wood (Otto)
    Tech Ninja
    Posted 3 years 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
    Plugin Author

    Posted 3 years ago #

    Agreed, we'll definitely update those.

  3. Lorangeo
    Member
    Posted 3 years ago #

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

    Thank you for the solution :-)

  4. Peter Wilson
    Member
    Posted 3 years 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
    Plugin Author

    Posted 3 years ago #

    @peterwilsoncc just disable the Grunion plugin.

  6. Peter Wilson
    Member
    Posted 3 years 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 3 years 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.

About this Plugin

About this Topic