PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Adding 3 checkboxes onto each checkbox choice? Please help.

  1. kk
    Member

    I have just installed Gravity Form. But I need to get this one form up and running today, I will read up on the documentations, but can someone help with this one thing?

    I have a list of checkboxes, but I need to add another 3 choices for each check box. The checkboxes are for each day of the week, and the additional 3 choices per each checkbox is for morning, afternoon, and night for each day of the week. How can I do that? Or can someone point me to the part of the documentation that will help me?

    I have not yet studied the coding part of this, hopefully this can be done for now and I will go and study some more!

    Posted 12 years ago on Sunday July 24, 2011 | Permalink
  2. Please post how you are using this.

    Can people check off all 28 boxes (morning, afternoon, evening, for each of 7 days)?

    Or, if they check a box for a day, do you then need to know if it's morning, afternoon or evening? Can all three times of day be chosen for any selected day?

    So, it would be something like:
    [] Sunday [] morning [] afternoon [] evening
    [] Monday [] morning [] afternoon [] evening
    [] Tuesday [] morning [] afternoon [] evening
    [] Wednesday [] morning [] afternoon [] evening
    [] Thursday [] morning [] afternoon [] evening
    [] Friday [] morning [] afternoon [] evening
    [] Saturday [] morning [] afternoon [] evening

    All visible, all the time?

    You could make it so that once a box is checked, the options for morning, afternoon and evening show for that particular day using conditional logic. But I'd like to know how you're using it to know the best way to approach it.

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  3. kk
    Member

    Thanks for your reply!
    Yes, it's for a job application, so theoretically, people can check all 7 days, and all three options of morning, afternoon, and night. It is a good idea to only show the morning/afternoon/evening when they have checked a day they are available.

    How do you line up the boxes like you have presented? Mine is in a long list ...

    I know these may be questions that I can find answers in the documentation once I have learnt more, but my boss need this one form doing for tomorrow :( and I am anxious to just get something going. I can tweak it later.

    Thanks again.

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  4. So, it's basically "what shifts are you available for?" and then you list days of the week, and if they are available on a day, you want to know what times they are available on those days?

    If that's accurate, I will work something up for you right now. Thanks for your attention.

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  5. kk
    Member

    Yes, in essence, that's the info I need.
    However, the breif that I was given says that I need to use the following wording:
    "Day and Hours of availability" - as the heading of this section of the form.
    Then, a list of all the days in the week. I can make the "hours" (which in the real form should be "Day", "Evening", and "Overnight" conditional - i.e. only appearing when an applicant has ticked that he is available for a certain day.)

    Thank you again for you help, really appreciate it.

    I have another minor question - at the moment, when the form is displayed on a page, all the items has a bulleted list "dot" at the beginning. I looked up the documentation, and realized that all form items are using the unordered list (ul) as it's CSS format. Can I get rid of the "dot" easily? i.e. can I edit the CSS for the form quickly without disturbing other formatting and not having to create an entire stylesheet for the form? I may do that later, but for now, just want to get rid of the ul "dot". Thanks again!

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  6. Something like this?
    http://gravity.chrishajer.com/job-application/

    For the relevant parts, I created a group of check boxes for the days of the week. The days of the week are available on a check box field if you click the "Bulk Add / Predefined Choices" button below the three default check boxes. Just scroll down to "Days of the Week". If you want the list to start on a day other than Sunday, just do a little cut and paste in the right panel where the days are listed. Click the "Update choices" button once you are done with that.

    That takes care of 7 check boxes for the days of the week.

    Next I added 7 *required* fields, each with 3 check box choices. I made one field of 3 check boxes for each of the 7 days. So, for field labels I have:

    Sunday availability
    Monday availability
    Tuesday availability
    Wednesday availability
    Thursday availability
    Friday availability
    Saturday availability

    For the choices, in each one I have:
    morning
    afternoon
    evening

    Check the box that says "required".

    Click the Advanced tab, and enter this for CSS Class Name:
    gf_list_3col

    That's a special CSS Ready Class included in Gravity Forms to create a 3 column layout of check boxes. You can read more about CSS Ready Classes here. That will put all three "time of day" choices on the same horizontal line, instead of stacked vertically.

    Also on the Advanced tab, click "Enable Conditional Logic". This is how you hide the availability for a day UNLESS the day was checked as something they were interested in, in the previous step (the check boxes for days of the week.)

    For each of the 7 groups of availabilities (morning, afternoon, evening) you will need to configure the conditional logic to [Show] this field if [All] the following match:

    In the first select box on the next line, find your "Days of the week" field, select that, leave the center select as [is] then in the last drop down you should have the days of the week choices you entered in the previous step when you created the 7 check boxes for days of the week.

    So, for Sunday, my "Sunday Availability" field looks like this:

    [Show] this field if [All] of the following match:
    [What days are you available?] [is] [Sunday]

    Repeat that for each of the 7 days for the availability check boxes.

    It took longer to write up the explanation that it did to create the form. Once you get into it it makes sense. If you have any questions, please let me know.

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  7. I posted my "how to" before seeing your last response.

    To add a section header of "Day and Hours of availability" you can add a "Section Break" field type, and put that wording in it. (I just added it to this example form.)

    Day, Evening and Overnight can easily be substituted for the morning, afternoon, evening I used. Just do that for each of the 7 availability fields.

    Regarding the dot/bullet, I cannot see your site or form, but it's most certainly coming from your theme's CSS. To override, add this to your theme's custom.css or style.css as appropriate.

    [css]
    body .gform_wrapper form .gform_body ul,
    body .gform_wrapper form .gform_body ul li {
    	list-style-type:none!important;
    	list-style-image:none!important;
    	list-style:none!important;
    	background-image:none!important;
    	background:none!important;
    	padding:0!important;
    	margin:0!important
    }

    That goes in the stylesheet for your THEME, not Gravity Forms, so when you update Gravity Forms, you don't lose the modification. The rules are specific enough to apply only to Gravity Forms list items though, so it's safe to use there.

    The code is in the FAQ: (search Formatting/Styling in the page)
    http://www.gravityhelp.com/frequently-asked-questions/

    Here's where and why to place the CSS in your theme's stylesheet:
    http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  8. kk
    Member

    Thank you very much for your help! I have completed the form ... and now moving on to reading the documentations so I can figure more things out myself next time!

    Posted 12 years ago on Monday July 25, 2011 | Permalink
  9. Glad you got that working. Good luck and if you need more help, please post another topic.

    Posted 12 years ago on Monday July 25, 2011 | Permalink

This topic has been resolved and has been closed to new replies.