-
-
Is there any way of making the contact page look better please? I found out by accident that you need Contact Form 7 for your theme – I think! I’ve installed Contact Form 7 but the form itself looks pretty basic and not very stylish when compared to the rest of the theme. Other themes I’ve used have produced a nice looking contact form option.
Do you have any recommendations on how to improve the look of my contact form please?
-
Sorry to be a nuisance but yes, I could do with some help with css to make the form look better and more like the theme.
-
Hello,
Can you be more specific on the changes you want to make? So i can help you. Please send me some screenshots of the resulting form and your site’s url.
Best regards!
-
I’d like to make the following changes to what I have at the moment:
1. Each of the first 4 fields to be reduced in size to 3/4 of the size of the Comments / Questions box. At the moment they are all the same size.
2. The form elements are surrounded by a grey background. The right hand edge of this background is too close to the right hand column (where the address etc. is located). Can this gap be made larger – perhaps twice the current gap or maybe a bit more?
3. I would like the ‘SEND’ button to have a background colour of #b02b2c and the word ‘SEND’ to be in white text.
4. At the top of the form there is a title called ‘Contact Form’. This title is too close to the ‘Name (required)’ field. They currently look squashed together. Can the gap between them be made larger please?
My site can be found at: https://www.eliminatetherisks.co.uk/new-site/contact/
Thanks.
-
-
Hello,
1- please add these lines into your ‘Contact’ page custom css box:
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required { width: 75%; }
2- Do you want to distance right column further from the left column? If so, add these lines:
.vc_col-sm-4.wpb_column.column_container { padding-left: 75px; }
3-For the “Send” background and font color, add these:
input.wpcf7-form-control.wpcf7-submit.btn-bt.default { background: #b02b2c; } input.wpcf7-form-control.wpcf7-submit.btn-bt.default { color: rgb(253, 253, 252); }
4- Add these lines:
.header { padding-bottom: 30px; }
You can edit all values to your need. The result should be like this: screenshot.
Best regards!
-
That’s excellent. Thank you very much for your help.
-
You must be logged in to reply to this topic.