What you meant by responsive here ? Both forms looks and works almost same.
Use Ordered List elements to display multiple fields on single line.
HTML:
<ol class="singleline">
<li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
<li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>
</ol>
Added to Form section of CF7 interface. Labels are added for improved accessability.
CSS:
.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}
.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}
Add your CSS via Child Theme or use custom CSS plugin.
Also see Styling Contact Form for a general explanation of styling CF7 forms using CSS.
Ok, where I put this CSS CODE? In wich section of my WP? I don’t understand.
Thanks
Go to Apperance > Editor, put this code there and save.
Hello, in this order?
I pasted the code on this way and anything changes
/*———————————————————————————–*/
/* CONTACT FORM 7
/*———————————————————————————–*/
div.wpcf7 {
padding-top: 20px;
}
div.wpcf7 .wpcf7-not-valid {
border: 2px solid #b54d4d
}
span.wpcf7-not-valid-tip {
display: none !important
}
div.wpcf7-validation-errors {
margin: 0;
padding: 10px;
background-color: #fcf8e3;
color: #c09853;
border: 2px solid #faebcc;
}
div.wpcf7-mail-sent-ok {
margin: 0;
padding: 10px;
border: 2px solid #d6e9c6;
background-color: #dff0d8;
color: #468847;
}
div.wpcf7 textarea {
height: 110px;
}
.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}
.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}
And I have to add also the HTML code and where?
On the forums make sure you include code within the code tag, and only use the tag for short snippets only, as you can cause some formatting issues.
Sorry, now the code correctly posted
/*-----------------------------------------------------------------------------------*/
/* CONTACT FORM 7
/*-----------------------------------------------------------------------------------*/
div.wpcf7 {
padding-top: 20px;
}
div.wpcf7 .wpcf7-not-valid {
border: 2px solid #b54d4d
}
span.wpcf7-not-valid-tip {
display: none !important
}
div.wpcf7-validation-errors {
margin: 0;
padding: 10px;
background-color: #fcf8e3;
color: #c09853;
border: 2px solid #faebcc;
}
div.wpcf7-mail-sent-ok {
margin: 0;
padding: 10px;
border: 2px solid #d6e9c6;
background-color: #dff0d8;
color: #468847;
}
div.wpcf7 textarea {
height: 110px;
}
.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}
.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}
@adonaicb In my reply above, I provided a link to plugins which allow you to add and make CSS changes to your wordpress site.
I have also provided you with a link that teaches you how to use a child theme to make changes to your wordpress site. You may read from those links for guidance on how to make CSS changes to your site.
I’ve applied this with Custom CSS plugin and now dissappear some fields: http://maria-candela.com/index.php/contact/contact/
And it looks the same, doesn’t appear multiple fields in a single line
@adonaicb You could consider using Contact Form 7 Skins to style your Contact Form 7 Forms.
You can now use the add-on CF7 Skins Ready to put form fields together on the same line.
