Customise Contact Form 7

Illdy
1

Hi Support,

Thanks for a lovely theme.
I have a couple of questions concerning the formatting of the Contact Us section:
Is it possible to have the Message text area over the full width of the form rather than just on the left as in the attached screenshot?
Is it possible to Have the backgrounds for the names the same colour as the rest of the boxes?
Is it possible to reduce the white space as show in the screenshot?

The website is at www.stroberofknaresborough.org.uk if you would like to look.

Many thanks

James

2

Hello there,

I hope you are doing well today.

I have tried to access your website but the page cannot be reached. Please check tell me if you are still able to access the website.

Best Regards,
Support

3

Sorry - my mistake.
The website is www.strobertofknaresborough.org.uk
Thanks

4

Hi,
I have managed to change the text box colours.
Thanks.

5

Hello there,

Thanks for the link.

Have you added any kind of code to the contact form? If so could you please provide the code here?

I await your response.

Best Regards,
Support

6

Hi Support,
The code I currently have for the contact form in custom css is:

/Contact Form Styling/
.cf7-style input[type=text] {
background-color: #ffffff;
}
#contact-us .section-content .wpcf7-form p .wpcf7-textarea:hover {
position: fixed;
}
I have also noticed that the tick box associated with the subscribe sentence does not line up.

Many Thanks
James

7

Hi Support,

Does anyone have an update on this issue please.

Kind regards

James

8

Hello there,

Thanks for that information.

Please remove the #contact-us .section-content .wpcf7-form p .wpcf7-textarea:hover { position: fixed; }

It makes the contact form behave inconsistently.

Best Regards,
Support

9

Hi Support,

Many thanks for the suggestion. However, I removed the code and it didn’t have any effect (see attached)

Thanks

James

10

Hello there,

Nice work removing that code.

Please add the following CSS code:

/*Full width comment field*/
#contact-us .section-content .wpcf7-form p:nth-of-type(5) {
    float: left;
    width: 100%;
}

Best Regards,
Support

11

Hi Support,

Many thanks - that has worked.
Can you also advise how I can get the tick box and wording for the signup to newsletter to line up.

Many thanks

12

Hi Support,

Do you have an update on the above please.

Thanks
James