WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Contact form field width (17 posts)

  1. TaylorP
    Member
    Posted 1 year ago #

    Everything looks great but the "comment" field.
    It's been bumped over and is quite narrow.
    How can I set the width so it spans the width of the page?
    Also, how do I make the text "comment (required)" rest on top of the field?
    Thanks!

    http://wordpress.org/extend/plugins/jetpack/

  2. calebcole
    Member
    Posted 1 year ago #

    I'm also having a problem--- since updating Jetpack to 2.0.4 the comment form's fields are aligned tight against each field's title. http://www.psduo.com/contact/
    Any way to correct this and get it to look like in previous versions?

  3. TaylorP
    Member
    Posted 1 year ago #

    For reference for the original post, the issue shown in calebcole's link looks exactly like my contact page.

  4. Alfred Crombez
    Member
    Posted 1 year ago #

    I had the same problem after upgrading Jetpack. Apparently the contact form is missing the styles for the form. I solved it by adding the styles to the Custom CSS:

    /*
    Welcome to Custom CSS!
    
    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.
    
    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don't need to copy all
    your theme's stylesheet content.
    */
    .contact-form .clear-form {
    	clear: both;
    }
    
    .contact-form input[type='text'], .contact-form input[type='email'] {
    	width: 300px;
    	margin-bottom: 13px;
    }
    
    .contact-form select {
    	margin-bottom: 13px;
    }
    
    .contact-form textarea {
    	height: 200px;
    	width: 80%;
    	float: none;
    	margin-bottom: 13px;
    }
    
    .contact-form input[type='radio'], .contact-form input[type='checkbox'] {
    	float: none;
    	margin-bottom: 13px;
    }
    
    .contact-form label {
    	margin-bottom: 3px;
    	float: none;
    	font-weight: bold;
    	display: block;
    }
    
    .contact-form label.checkbox, .contact-form label.radio {
    	margin-bottom: 3px;
    	float: none;
    	font-weight: bold;
    	display: inline-block;
    }
    
    .contact-form label span {
    	color: #AAA;
    	margin-left: 4px;
    	font-weight: normal;
    }
    
    .form-errors .form-error-message {
    	color: red;
    }

    You can see the result at http://goalfredportal.azurewebsites.net/contact/

  5. TaylorP
    Member
    Posted 1 year ago #

    Acrombez, you're a saint! Thank you so much for your help!

  6. BlogDeMicrobe
    Member
    Posted 1 year ago #

    @acrombez TY!

  7. boatgalley
    Member
    Posted 1 year ago #

    Thank you, thank you, thank you!! You really saved me a bunch of time!

    http://theboatgalley.com/contact/ now looks like it should!

  8. dorde
    Member
    Posted 1 year ago #

    Thank you acrombez so much!!!

  9. Wudman
    Member
    Posted 1 year ago #

    Update is working for me just fine. Thank you! + stars & "working"

  10. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Thanks for the reports.

    We have now fixed the issue:
    http://plugins.trac.wordpress.org/changeset/647091

    The fix will be available in the next Jetpack release.

  11. otfromtot
    Member
    Posted 1 year ago #

    what about the text area border? I have no border on mine and have tried adding
    .contact-form textarea {
    height: 200px;
    width: 80%;
    float: none;
    margin-bottom: 13px;
    border: 2px;
    and
    .contact-form textarea {
    height: 200px;
    width: 80%;
    float: none;
    margin-bottom: 13px;
    border: 2px #000;

    to the CSS file but it doesnt work

  12. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @otfromtot Could you post a link to your contact page, so I can have a look?

  13. angelfire4xx
    Member
    Posted 1 year ago #

    Hi, I'm using WP 3.5.1 and Jetpack 2.2.1. Just want to customize the size of the textarea for the contact form comments field. Tried [contact-field label='Comment' type='textarea' rows='4' cols='50' required='1'/] but that didn't work. Tried activating custom CSS and inserting Alfred's code as above but it wouldn't save:
    .contact-form textarea {
    height: 200px;
    width: 80%;
    float: none;
    margin-bottom: 13px;
    }
    I'm only a semi-competent amateur with coding, and don't know what else to try! Can anyone help?

  14. angelfire4xx
    Member
    Posted 1 year ago #

    Aha, realized plugins have their own css, found grunion.css and made the changes!

  15. auxillary
    Member
    Posted 1 year ago #

    Latest WP 3.5.1. with Jetpack version 2.2.5.

    I have added a form to a page. All very easy and great. However the layout is a bit pushed to the left margin and the input boxes aren't very wide. I have been looking for days now how to get the input boxes a bit wider, as with the text area. Tried changes in the css files but nothing changed a bit.

    So, ... I have failed. Can someone share some ideas how to achieve my goal?

  16. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @auxillary Could you please start your own thread, as per the Forum Welcome?
    http://wordpress.org/support/plugin/jetpack#postform

    Thank you!

  17. auxillary
    Member
    Posted 1 year ago #

    Sorry I thought it matched the subject. Will do.

    Eric

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.