WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Checkbox form - option box on separate line from option Text (17 posts)

  1. wholistic_health@sbcglobal.net
    Member
    Posted 1 year ago #

    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.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. davejampole
    Member
    Posted 1 year ago #

    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.

  3. press_ppm
    Member
    Posted 1 year ago #

    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?

  4. davejampole
    Member
    Posted 1 year ago #

    press-ppm,

    After reading the docs, my understanding is that in a dropdown, each item needs to be on a separate line.

  5. wholistic_health@sbcglobal.net
    Member
    Posted 1 year ago #

    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.

  6. davejampole
    Member
    Posted 1 year ago #

    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.

  7. wholistic_health@sbcglobal.net
    Member
    Posted 1 year ago #

    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>
  8. davejampole
    Member
    Posted 1 year ago #

    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.

  9. wholistic_health@sbcglobal.net
    Member
    Posted 1 year ago #

  10. davejampole
    Member
    Posted 1 year ago #

    Let's try this: &nbsp; 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 &nbsp; to force an extra space so if you want three spaces between two words (apple pie), you could insert three &nbsp; OR tape the space bar once, type &nbsp; 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 &nbsp; 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.

  11. davejampole
    Member
    Posted 1 year ago #

    I screwed up! Inserting &nbsp; 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 &nbsp; &nbsp; &nbsp; " "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

  12. wholistic_health@sbcglobal.net
    Member
    Posted 1 year ago #

  13. davejampole
    Member
    Posted 1 year ago #

    And you thought you knew nothing about writing code!

  14. wholistic_health@sbcglobal.net
    Member
    Posted 1 year ago #

    Thanks Dave,

    You are a great teacher...not too much, not too little.

    may God bless you.

  15. davejampole
    Member
    Posted 1 year ago #

    I'll take all I can get and from wherever I can get it.

  16. AnnieMarie317
    Member
    Posted 10 months ago #

    your trick of entering the forced space code within the quotes is genuis, you just fixed many of my problems - thank you!

  17. davejampole
    Member
    Posted 10 months ago #

    Annie Marie,

    Glad it worked for you. Now, you need to do something nice for someone.

    Dave

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic