I 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>
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;
}
Added to Child Theme style.css
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.
Thread Starter
U1SC
(@u1sc)
I copied the HTML and CSS both exactly and i dont think it worked. The Phone and Mobile fields aren’t the same size/length as the Message field like in the Salient demo.
The ‘Message’ text also disappeared and now the message field is very close to the Phone and Mobile fields. I tried using the
tag but it didn’t do anything.
Also, when i placed the css code i got an error that states “float can’t be used with display: inline-block”.
Here is what it looks like currently
http://u1sc.ca/contact/
Thread Starter
U1SC
(@u1sc)
Here is what my code in the contact form looks like. I tried looking at the Styling Contact Form page but that confused me further because im not that familiar with CSS. I don’t want to have a custom background colour or anything, i just want to have the fields on one line like on the theme website and make the form look like the one on the theme website.
<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>
[textarea Message id:Message]
[submit]
Two quick changes should fix this: close the ol and add a margin.
CF7 markup:
<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>
[textarea Message id:Message]
[submit]
CSS:
.wpcf7-form .singleline ol {
list-style: none;
margin: 0 0 10px; /* added bottom margin to ordered list */
}
.wpcf7-form .singleline li{
display: inline-block;
margin-right: 10px;
padding-right: 10px;
}
Thread Starter
U1SC
(@u1sc)
I made the two changes. It fixed the spacing between the fields but now the Name, Email and Subject fields are pushed to the right and they aren’t equally spaced like in the Salient demo (see 2nd link below). It also looks like they were able to increase the size of the font on the contact form on the Salient demo.
Also, how i do i make the Name and Email fields required fields again?
My Website: http://u1sc.ca/contact/
Salient Demo: http://themenectar.com/demo/salient-ascend/contact/
Thread Starter
U1SC
(@u1sc)
CF7 Mark Up
<ol class="singleline">
<li> <label for="cf7-name">Name *</label> [text cf7-name 15/]</li>
<li> <label for="cf7-email">Email *</label> [text cf7-email 15/]</li>
<li> <label for="cf7-subject">Subject</label> [text cf7-subject 15/]</li>
</ol>
<p>Message[textarea Message id:Message]</p>
[submit]
CSS
.wpcf7-form .singleline ol {
list-style: none;
margin: 0 0 10px; /* added bottom margin to ordered list */
}
.wpcf7-form .singleline li{
display: inline-block;
margin-right: 10px;
padding-right: 10px;
}
WordPress 3.9.1
Salient WordPress Theme 4.5.1
I’m looking for the same help, and having the same problem.
In my case I am trying to get the Name and Email fields to fill in the space above subject. I’m unable to create this unless I put in width values that are not responsive when viewed on other devices such as tablets.
http://www.markandgary.com/contact-us/
Code I’m currently using:
<p>
<ol7 class=”singleline”>
<li7>[text your-name placeholder "Your Name: (optional)" ]</li7>
<li7>[email* your-email placeholder “Your Email Address”]</li7>
</ol7>
</p>
<p>[text* your-subject placeholder “Subject”] </p>
<p>[textarea* your-message placeholder “Please tell us what’s on your mind..”] </p>
<p>
<ol7 class=”singleline”>
<li7>[captchac captcha-690 bg:#81d742 size:l]</li7>
<li7>[captchar captcha-690 placeholder “Enter Code From Green Box Here”]</li7>
<li7>[submit class:button id:form-submit “Send Message”]</li7>
</ol7>
</p>
CSS:
.wpcf7-form .singleline ol7 {
list-style: none;
margin: 0 0 10px; /* added bottom margin to ordered list */
}
.wpcf7-form .singleline li7{
display: inline-table;
padding-right: 10px;
}
Thread Starter
U1SC
(@u1sc)
Does anyone have a solution / know how to fix the form?
