How to style contact form?

[Donna Green]

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.

[Sushil Adhikari]

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

[Donna Green]

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.

[Donna Green]

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

[Sushil Adhikari]

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

[Donna Green]

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

[Binaya D]

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

[Donna Green]

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 🙂

[Sushil Adhikari]

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

[Donna Green]

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.

[Sushil Adhikari]

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

[Donna Green]

Brilliant, that works!

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

[Binaya D]

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

[Tawanna Sanders]

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

[Binaya D]

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

[Author]

Posts