WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form Clean and Simple
[resolved] Remove Headers and field resize (14 posts)

  1. mpruim
    Member
    Posted 1 year ago #

    Hi, I have 2 questions.

    How can I remove the headers above each field ("Name:" "Email Address:" and "Message:")? I'd rather just have the form fields that have the text in them already. But also, it looks like the text in the fields are different sizes...can that be adjusted?

    Next, how can I make the name field the same width as the email field?

    Please check out the page in question here: http://michaelpruim.com/contact/

    https://wordpress.org/plugins/clean-and-simple-contact-form-by-meg-nicholas/

  2. megnicholas
    Member
    Plugin Author

    Posted 1 year ago #

    Hi mpruim,

    It looks as if you have managed to remove the labels.
    You can make the message text smaller by commenting out line 409 of your theme's style.css file:

    /*font-size: 13px;*/

    Meg

  3. mpruim
    Member
    Posted 1 year ago #

    Yes, I did figure out how to remove the labels. Thanks for the font fix, that worked.

    Can you help me figure out how to make the Name and Email fields the same width?

    Thanks for your help!

  4. mpruim
    Member
    Posted 1 year ago #

    Oh and I thought of one last question: is there a way to get the submit button to look the same on mobile as it does on the desktop? For some reason it isn't using the theme styles.

  5. Leah
    Member
    Posted 1 year ago #

    Can you share how you removed the labels. Also, does anyone know how to center my form on my page? I don't know code but if you give me easy directions I'll figure it out.

  6. megnicholas
    Member
    Plugin Author

    Posted 1 year ago #

    mprium, why not try using the default style sheet that comes with the plugin? All the boxes will then take up 100% of space. You can then reduce the size. This post will help you:

    http://www.megnicholas.co.uk/articles/version-4-1-9-supports-bootstrap-3/

    Meg

  7. mpruim
    Member
    Posted 1 year ago #

    Thanks for your response, Meg. I tried using the default style sheet which helped make the Name field the same width as the Message field, but the Email field is still a different length. I also tried the <div> tag approach to no avail.

    Any suggestions?

  8. megnicholas
    Member
    Plugin Author

    Posted 1 year ago #

    It's better to use css to remove the labels rather than hack the plugin:

    #cscf label {
         display:none;
     }
  9. megnicholas
    Member
    Plugin Author

    Posted 1 year ago #

    Add this to the end of your style.css to set the widths:

    #cscf .input-xlarge {
    	width:400px;
    }
  10. mpruim
    Member
    Posted 1 year ago #

    Thanks Meg, this works great on desktop!

    My only concern is that the field widths don't work the same way on mobile (when the screen width gets smaller than about 480 pixels wide). Thoughts on that?

  11. megnicholas
    Member
    Plugin Author

    Posted 1 year ago #

    @media (max-width: 767px) {
    #cscf .input-xlarge {
    	width:100%!important;
    }
    }
  12. jefmcclimans
    Member
    Posted 11 months ago #

    Great plugin. I am having trouble removing the labels:

    #cscf label {
    display:none;
    }

    did not work for me. also I really want a way to move the "send message" button to the right of the recaptcha. for some reason none of my css besides the box sizing is working. Any thoughts?

    URL: http://opmaword.opmaservices.com/ (it is at the bottom)

  13. megnicholas
    Member
    Plugin Author

    Posted 10 months ago #

    Hi there, sorry just noticed your post to this thread.
    Please can you start another thread if this is still an issue for you.

    Thanks, Meg

  14. Justin Dye
    Member
    Posted 2 months ago #

    Hi Meg,
    Not sure if you're still checking in on this thread. But I'm also trying to remove the headers above each of the form fields. I'd also love to edit the text inside each field and perhaps the "submit" button. Unfortunately, I can't figure out how to do this, and I didn't see the answer above.

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.