How to style contact form?

Home Forums WordPress Themes – Premium Pure & Simple How to style contact form?

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #17035
    Donna Green
    Participant

    Hi there, I’m sorry to bother you yet again, but please could I have some more advice?

    I’m trying to create a contact form using just Jetpack – I don’t have any contact form WordPress plugins.

    I’ve created a basic form, but the styling looks horrible! (See screenshot attached.) The “submit” button stretches right across the page, and the tickbox is massive.

    Please could you tell me how to make my contact form look like the one on the Pure & Simple “Contact us” demo page? And how I would make the tickbox look the normal size?

    Thank you very much 🙂
    Donna
    ContactForm.jpg

    Attachments:
    You must be logged in to view attached files.
    #22392
    Sushil Adhikari
    Moderator

    Hi there,

    You can solve this by providing width of submit form . Here is the example for the same.

    input.pushbutton-wide.btn {
        width: 10%;
    }

    Same things applied for checkbox, given some width to checkbox also

    input.checkbox {
    width: 10%
    }

    You can see this forum for the reference: if you change your mind to use contact form 7 plugin: https://www.styledthemes.com/forum/search?query=contact%20form&childforums=1

    Please use child theme style.css file to add custom css , so your changes will not on theme update.

    Thanks

    #22397
    Donna Green
    Participant

    Hi Sushil

    Thank you very much for your reply, and your advice.

    Unfortunately the CSS code you gave me didn’t work – it didn’t do anything at all. 🙁

    I am now using the Contact Form 7 plugin and I’ve managed to style the “submit” button to make it look like yours on the Pure & Simple demo contact page with this custom CSS:

    /*---------------- CONTACT FORM -------------------*/
      
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea {
    color:#556633;
    }
    
    .wpcf7 input[type="checkbox"]
    {
      width:10%;
    }
    
    .wpcf7 input[type="submit"],
    .wpcf7 input[type="button"] { 
    background-color:#E3E3E3;
    width:95px;
    height:29px;
    }
    

    However, the checkbox is still massive, and I’m not quite sure what to put in the CSS to make it look “normal”.

    If you could help please, that would be brilliant!

    Many thanks
    Donna
    ContactFormWonky.jpg

    Attachments:
    You must be logged in to view attached files.
    #22398
    Donna Green
    Participant

    Also, please could you tell me why you prefer Contact Form 7 to the Jetpack contact form? I’d be interested to know!

    Many thanks
    Donna

    #22400
    Sushil Adhikari
    Moderator

    Hi there,

    Could you please provide us a site URL, so we can provide you appropriate solution. And using contact form 7 we can add class or if for form field ,which intern makes easy for styling.

    Thanks

    #22401
    Donna Green
    Participant

    Hi Sushil, it’s http://www.donnagreenphoto.com (still in development, so it’s a mess!!)

    #22402
    Binaya D
    Participant

    Hi Donna,

    You can follow this tutorial to fix your issue, if not then please let us know we are happy to provide solution asap. We hope you understand.

    Thanks

    #22403
    Donna Green
    Participant

    Hi Sushil, I watched the video (thank you), but it didn’t help at all, unfortunately. I understand how to create and embed a contact form, that’s not a problem, but what I don’t understand is how to make the checkbox in my form look small like yours and all other form checkboxes on the web. For some strange reason, when I use the Pure& Simple theme on my website, the checkbox on my form is massive.

    I suspect it must be some CSS within Pure & Simple which is making my checkbox huge, but I can’t figure out what to change!

    If you could let me know which bit of CSS controls the checkbox appearance, and what I should change it to so that it looks “normal”, I’d really appreciate it, thank you 🙂

    #22405
    Sushil Adhikari
    Moderator

    Hi Donna Green,

    Sorry for the inconvenience caused, replaced the css given on previous reply with this css, this may help you.

    .wpcf7 input[type=”checkbox”] {
    width: auto;
    height: auto;
    }

    Let us know how it will goes.

    Thanks

    #22406
    Donna Green
    Participant

    Sushil, that’s brilliant, thank you, it worked!! 😆 😆

    Just ONE final question though, I hope you don’t mind …

    My checkbox is the right size now ( 😆 ) but the checkbox and its label are on different rows – the text is on the line below the box.

    I’ve been looking in the documentation for Contact Form 7 but all their checkboxes and labels are displayed on the same row. Could you possibly tell me how I can get my checkbox and label on the same row, please?

    I promise to stop bothering you then!

    Thank you so much for all your help.
    Donna
    alignment.jpg

    Attachments:
    You must be logged in to view attached files.
    #22408
    Sushil Adhikari
    Moderator

    Wow, that’s great. Please replace the code given on previous reply with this css:

    .wpcf7 input[type="checkbox"] {
        width: auto;
        height: auto;
        display: inline;
    }

    Hope this works for you.

    Thanks

    #22409
    Donna Green
    Participant

    Brilliant, that works!

    Thank you SO much for your help Sushil, I really appreciate it 🙂 🙂 🙂

    #22410
    Binaya D
    Participant

    Hi Donna,

    You are welcome 🙂 We are really happy to provide solution asap, if you face any problem in further, then please let us know.

    Thanks

    #22483
    Tawanna Sanders
    Participant

    Binaya,

    I submitted a ticket request and I am having the same issue with the submit bar. It stretches across the entire page. My site is in development and is not live. You instructed me to ad the following to css to fix the issue:

    form p {
    width: 10%
    }

    However, per Donna, that does not work. Where do I add this in the child theme? I dont know which section to add it to?

    Thanks,

    Tawanna Sanders

    #22484
    Binaya D
    Participant

    Hi Tawanna,

    Please use the child theme style.css to keep the css or you can follow the following steps:

    Go to Dashboard => Appearance => Editor => And keep the css code => Then update file.

    We hope this will be helpful to you, if not then please let us know.
    We look forward to your respond.

    Thanks

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.