Contact Form Styling

[tatyana_kozh]

Hello

I would like the contact form that is named Father & Son Packages on this page:

Effortless Bespoke Tailoring To Impress

to have the following look:

• Font in White and the style as throughout the website
• The contact form to be centered inside the column
• The button to be exactly the same style orange button as the one that says ‘Book Your appointment at the Studio’ on the same page lower.

[basanta]

Hi There,

Thanks for writing in and the details!
You need custom CSS for this, which usually we don’t recommend as this is something out of our theme support scope.
I am giving you following CSS let us know if that helps.
Please add this CSS to your Theme Option -> CSS and let us know if that works.

.wpforms-container {
max-width: 500px;
margin: auto;
padding: 20px;
}
.wpforms-field-medium, .wpforms-field-required {
max-width: 100% !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  color: #fff !important;
  font-weight: 200;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
border: none !important;
line-height: 1 !important;
text-shadow: none;
color: #fff !important;
font-weight: 200;
background: #ea5910 !important;
padding: 10px 25px !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.