Change the form settings

See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

If you find you need more detailed advice, after reading and working through the above links, please include a link to your Contact Form 7 form, so others here can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements and provide you with a possible solution.

Thanx for the answer
here is my contact form
https://eyefeelit1.azurewebsites.net/brands-manufacture/
i think i understand how to change color using CSS
but i dont know how to set it to look like this one
https://www.taboola.com/contact
meaning text fields next to each other

but i dont know how to set it to look like this one https://www.taboola.com/contact

I can see you are using Contact Form 7 Skins to style your Contact Form 7 Forms.

You can now use the add-on CF7 Skins Ready to make a 2 column contact form, plus they offer excellent support.

Is there a way to use the free version and have 2 columns next to each other?
i know to change the BG i need to change the CSS file

Anyone can help how to set two columns next to each other with out messing with CSS files?

Yes you can achieve the same style by placing your text in div’s. And then you can style it as per your need. For this purpose go to your contact form and apply div on them and then in your style sheet; do styling

Can you explain a little more
this what i have now
<p>Your Name (required)

[text* your-name] </p>

<p>Your Email (required)
[email* your-email] </p>

Remove p tags from this form. And write them like this.
<label>Your Name</label> [text* your-name]
<label>Your Email</label> [email* your-email]
Then in style sheet; give them a width and use float left and right property for displaying them in a line.

Where is the style sheet for the form?
and what is it mean float left and right
i dont have lots of experience in HTML
thanx

You want the same form like this?
https://www.taboola.com/contact
If yes; then give me an hour. I’ll give you a complete form with stylesheet.

Thanx

Copy this code in your style.css file
#inner-content-left{
padding:62px 0px 0px 0px;
}
#contact-form{
padding:0px 40px 52px 0px;
}
.form p{
font-size:14px;
clear:both;
padding-bottom:54px !important;
}
.form p span{
display:block;
font-size:14px;
color:#4c4c4c;
width:73%;
float:right;
}
.form label{
font-size:14px;
color:#4c4c4c;
width:15%;
float:left;
font-weight: normal;
line-height:35px;
}
.form input[type=text],
.form input[type=email],
.form input[type=tel]{
border:1px solid #b6b6b6;
background:#f8f8f8;
padding:8px;
width:50%;
}
.form textarea{
border:1px solid #b6b6b6;
background:#f8f8f8;
padding:8px;
margin-bottom:10px;
min-height:197px;
margin-bottom:23px;
resize: none;
height:197px;
width:100%;
}
.form input[type=submit]{
background:#004681;
font-size:16px;
color:#ffffff;
display:block;
font-family:Verdana;
text-transform:uppercase;
width:17%;
padding:8px 0px;
text-align:center;
border:none;
border-radius:4px;
margin-left:27%;
}
.form{
padding:37px 0px 0px 0px;
====================================================================
Then in your php file where you are calling your contact form. Use this code.(replace the form name with your form name)
<div class=”container”>
<?php echo do_shortcode(‘[contact-form-7 id=”170″ title=”Contact form 1″]’);?>
</div>
===================================================================
In contact form 7; paste this code.
<div class=”col-lg-4 col-md-4 col-sm-4 col-xs-12″ id=”inner-content-left”>
<div id=”contact-form” class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>
<div class=”form”>
<label>Your Name:*</label> [text* text-545]
<label>Your Email:*</label>[email* email-25]
<label>City:*</label>[text* text-776]
</div>
</div>
</div>
<div class=”col-lg-4 col-md-4 col-sm-4 col-xs-12″ id=”inner-content-left”>
<div id=”contact-form” class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>
<div class=”form”>
<label>Country:*</label>[text* Country]
<label>Subject:*</label>[text* Subject]
<label>Message*</label>[textarea textarea-397]
<p>[submit “send”]</p>
</div>
</div>
</div>
==============================================================
Hopefully you will get your desired result…..

Thanx for all the help ill try and use it
now i have couple style files which one to change?
one is in the contact form 7 folder/includes/css name styles.css
another in contact form7/admin/css
by the way im using form 7 and contact 7 skins
thanx again

Sorry for late reply; but you should go to your theme folder and in your theme folder there is a folder name “css”; in that folder open a file “style.css” and paste that code at the bottom of the file.