You will have to use specific CSS Styling targeted at the label and input fields.
You can float the input fields to the left:
‘input {
float:left;
}
label {
float:right;
}’
I would like to know where you put that bit of CSS code? Is it in the file called contact-form-7/styles.css under the plugin edit tab for Contact Form 7? Or should it be put in the overall theme style sheet?
(If it’s the former then my file contact-form-7/styles.css say it is inactive, how do I activate it?)
I would be very grateful for some help.
Try adding it to the bottom of your theme’s stylesheet.
Actually it has! Thanks a lot much appreciated.
Hi,
Is there a way to set up a large contact form up in two columns instead of one (the way its set up) otherwise it would be scrolling too far down the page.
For example, have name: email: on the same line with the boxes below them
I’d be grateful for some help.
Thanks
<div style=”float: left; width: 50%;”>
<p>Your Name [text* your-name] </p>
</div>
<div style=”float: right; width: 50%;”>
<p>Your Email [email* your-email] </p>
</div>
Worked for me
I have 3 check boxes I’d like on a single row instead of listed underneath each other.
Can someone please explain how to do that?
Thank you.
I read this page http://contactform7.com/2009/11/21/custom-layout-for-checkboxes-and-radio-buttons/
The default style on mine is in a list format, yet it doesn’t say so in the code: <p>Text Printing[checkbox Text-Printing “Colour Print” “B&W” “Colour & B&W”]</p>
Hi,
The two columns worked really well.
How do you get 3 or 4 columns?
I’ve tried different things; e.g.
<div style=”float: left; width: 100%;”> <p>Your Name [text* your-name]Your Email [email* your-email] Your Name [text* your-name]Your Email [email* your-email]</p>
</div>
and other formats like left 25% and right 25%
Help would be appreciated.
thanks
I haven’t tried this so not sure if it works, but I came across this and it sounds like what your are looking for:
http://www.wipeout44.com/brain_food/css_staying_afloat.asp
Especially this part:
Extra tips for CSS Floating
Float: center; does not exist
Don’t ask me why this has never been added to the CSS library but it is easily fixed, if you want to center a div within a float tag simply create a div without the use of the float attribute and use the following margin settings:
<div style=”float: left; width: 600px;”>
<div style=”width: 300px; margin-left: auto; margin-right: auto;”></div>
</div>
Margin auto does not work in IE?: Yes another IE related bug but heres the fix, for Internet Explorer you will also need to add the following to your CSS for this centering to work.
html, body {
text-align: center;
Thank you so much James, I’ll give it a shot.
Cheers
