# Customise Contact Form 7

**URL:** <https://colorlibsupport.com/t/customise-contact-form-7/17487>\
**Category:** Illdy\
**Created:** [August 9, 2017, 10:51am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487 "2017-08-09T10:51:33Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 9, 2017, 10:51am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/1 "2017-08-09T10:51:33Z")

</div>

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](http://www.stroberofknaresborough.org.uk) if you would like to look.

Many thanks

James

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [August 9, 2017, 11:02am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/2 "2017-08-09T11:02:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 9, 2017, 11:04am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/3 "2017-08-09T11:04:53Z")

</div>

Sorry - my mistake.  
The website is [www.strobertofknaresborough.org.uk](http://www.strobertofknaresborough.org.uk)  
Thanks

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 9, 2017, 11:06am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/4 "2017-08-09T11:06:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [August 9, 2017, 1:03pm UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/5 "2017-08-09T13:03:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 10, 2017, 7:56am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/6 "2017-08-10T07:56:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 11, 2017, 9:38am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/7 "2017-08-11T09:38:45Z")

</div>

Hi Support,

Does anyone have an update on this issue please.

Kind regards

James

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [August 11, 2017, 12:23pm UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/8 "2017-08-11T12:23:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 11, 2017, 1:10pm UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/9 "2017-08-11T13:10:30Z")

</div>

Hi Support,

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

Thanks

James

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [August 11, 2017, 1:19pm UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/10 "2017-08-11T13:19:19Z")

</div>

Hello there,

Nice work removing that code.

Please add the following CSS code:

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

```

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 11, 2017, 1:24pm UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/11 "2017-08-11T13:24:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmw894](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/8edcca/32.png) [@jmw894](https://colorlibsupport.com/u/jmw894)\
**Post date:** [August 14, 2017, 11:18am UTC](https://colorlibsupport.com/t/customise-contact-form-7/17487/12 "2017-08-14T11:18:02Z")

</div>

Hi Support,

Do you have an update on the above please.

Thanks  
James
