Checkbox form – option box on separate line from option Text
-
I want my boxes and text to be on the same line, but I don’t want all the options oriented vertically, b/c I will have about 10. Ideally, I would have the boxes lined up and have 2-3 in a row.
Is this possible with Contact Form 7 without lots of CSS, which I don’t know how to do.
Thanks.
-
Instead of getting confused with word that mean one thing to the person writing them and another to the person reading them, take a look at one of forms on one of my sites: <http://lcoc-moaa.org/scholarships/> and tell me which lines (if any) are what you want and I’ll tell you what I did to get the appropriate formatting.
Hi
I’m in the same boat.
I want to have my dropdowns on the same line:
{one here} and {one here}But they automatically go onto a seperate line.
The square brackets make it a new para?press-ppm,
After reading the docs, my understanding is that in a dropdown, each item needs to be on a separate line.
davejampole
I would like to be able to do what you have for the City, State, Zip, followed or preceded by your address or email example. essentially, a line that breaks, not just b/c it ran out of space, but b/c that is where it looks or works best to break it.
wholistic_health,
Here is the code segment that should do what you want.
<fieldset> <div><label>E-mail address [text* Email class:text class:email]</label> <label>Address [text* Address 35/ class:txt class:Address]</label></div> <div class="onerow"> <div><label>City [text* City 27/ class:text class:City] </label></div> <div><label>St. [text* State 2/ class:text class:State]</label></div> <div><label>ZIP [text* Zip 12/12 class:text class:Zip]</label></div> </div> <div class="cleared"> </div> </fieldset>
The second to last line clears what was previously entered after the form is submitted. I use this so that if a second goes to use the form, the data the previous student enters does not display. If that doesn’t apply to what you are doing, simply remove that line.
The
<fieldset> </fieldset>
tag pair put a frame around the content. Again, if you don’t need/want it, delete those tags.Hope this does what you want.
davejampole
Wow! that was very generous of you to be so specific. I will show you how it generates on my site: http://www.visaliasynergychiropractic.com/?page_id=193
You can see the list of check boxes I made above the info. you gave me.
This is the code in my Text are of Contact Form 7:
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>I am interested (optional)<br /> [checkbox Iaminterestedinlearningmoreabout "Back Pain Relief" "Neck Pain Relief" "Headache Relief" "Arm or Leg Pain Relief" "Wellness Info" "Allergy Relief" "Nutrition " "ADHD/Autism/Dyslexia" "Intestinal Relief" "Detoxification" "Weight/Fat Loss" "Comfortable Pregnancy"] </p> <fieldset> <div><label>E-mail address [text* Email class:text class:email]</label> <label>Address [text* Address 35/ class:txt class:Address]</label></div> <div class="onerow"> <div><label>City [text* City 27/ class:text class:City] </label></div> <div><label>St. [text* State 2/ class:text class:State]</label></div> <div><label>ZIP [text* Zip 12/12 class:text class:Zip]</label></div> </div> <div class="cleared"> </div> </fieldset> <p>Subject<br /> [text your-subject] </p> <p>Your Message<br /> [textarea your-message] </p> <p>[submit "Send"]</p>
Glad it worked for you. Sometimes, my years as a college Computer Science Professor comes out without me realizing it.
You do not need the
<p> </p>
tags. They do no harm, but they serve no purpose, at least in this context. Also, the apostrophy (*) makes the field required, so adding (required) doesn’t, in and of itself, do anything. If someone fills out the form without entering something in a required field, they will get an error message next to each field that is empty and the form will not be submitted.On your
'[checkbox]
line, I would suggest that you shorten “Iaminterestedinlearningmoreabout” to something like “interest”. They are merely the name of the field. You could just as easily use “field1”, “field2”, etc., except that “interest” is much more meaningful.I’m sorry, I’m a bit slow when it comes to this css stuff. I’m still not sure how to combine what you gave me with what I have. I need the check boxes to have a line break after having a few on one line.
Oh, here is something that seems to work, at least for my skill set. Take a look at this:
It’s not ideal. To be most pleasing for the viewer, I would like to have each box line up in 3 columns, but it’s livable.
This is the code:
<p> I am interested (optional)<br /> [checkbox interestedinLine1 "Back Pain Relief" "Neck Pain Relief" "Headache Relief"] [checkbox interestedinLine2 "Arm or Leg Pain Relief" "Wellness Info" "Allergy Relief"] <br /> [checkbox interestedinLine3 "Nutrition" "ADHD/Autism/Dyslexia" "Intestinal Relief"]<br /> [checkbox interestedinLine4 "Detoxification" "Weight/Fat Loss" "Comfortable Pregnancy"] </p>
Let’s try this:
is the code for a non-breaking space. The problem is that regardless of how many consecutive times you tap the space bar, you’ll only see one space. To get around we use the
to force an extra space so if you want three spaces between two words (apple pie), you could insert three
OR tape the space bar once, type
and tap the space bar again. That will give you three spaces. How does that apply to what you want? Using the tried-and-try theory of try, edit and try again, tap the space bar, type
and type the space bar again. Save what you are working, check what you’ve done in your browser and adjust as needed. Get the first line set like you want, then work on t he next line and repeat as needed.There are other ways to achieve what you want, but given your comfort level with css coding, what I’ve suggested is the least mysterious option.
Let me know how this works for you.
I screwed up! Inserting
the way I showed it doesn’t work, it kills that line from displaying. However, the following will work.This is from one of my forms –
[checkbox* register-with "Contact 1 " "Contact 2"].
Note that the non-breaking spaces are inside the quotes where your options are. What this does is add spaces between the last letter of the option and the closing “.Good luck
Okay, I think I’ve got it. Thank you all.
I applied the ” ” Hopefully you see the & a n b s p ; in that sentence. That worked, AFTER I noticed that I left out the semicolon — details do matter.
This is the code: `<p> I am interested (optional)<br />
[checkbox interestedinLine1 “Pain or Numbness Relief – Head, Neck, Arm, or Hand” ]
[checkbox interestedinLine2 “Pain or Numbness Relief – Back, Hip, Leg, or Foot”]
[checkbox interestedinLine3 “Nutrition ” “Wellness Info ” “Intestinal Relief” “Detoxification” “Weight/Fat Loss”]
[checkbox interestedinLine4 “Allergy Relief ” “ADHD/Autism/Dyslexia” “Comfortable Pregnancy”] </p>`And you thought you knew nothing about writing code!
Thanks Dave,
You are a great teacher…not too much, not too little.
may God bless you.
I’ll take all I can get and from wherever I can get it.
your trick of entering the forced space code within the quotes is genuis, you just fixed many of my problems – thank you!
- The topic ‘Checkbox form – option box on separate line from option Text’ is closed to new replies.