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.

Creating a schedule of availability table

Gravity Support Forums » Plugin Support » Gravity Forms

  1. ljauss
    Member

    I am trying to create the following a form in Gravity to mimic a client's existing (and honestly, not functioning) job application.

    Specifically, I am trying to create the availability grid that exists here: http://www.beckyspetcare.com/jobs_application.html

    on the form I am creating here: http://www.plaidhousebuilding.com/beckyspetcaretest/employment-application/

    Using the fieldset that the previous maker used creates text boxes that are extremely long and don't line up with the grid. Any ideas on how to do this? Thanks in advance!

    LJ

    Posted 14 years ago on Wednesday October 6, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    You can't just add input fields in the HTML area to begin with, the form doesn't work that way, you'd have to create fields in the admin for each piece, then use the html blocks to wrap some content around it I suppose to create the grid.

    You could look at using the CSS display table properties on the container elements to build the grid. It would still take a bit of work to pull that part off in that format

    http://www.ehow.com/how_4623438_use-css-display-table-row-display-table-cell-properties.html

    Posted 14 years ago on Wednesday October 6, 2010 | Permalink

  3. Kevin Flahaut
    Administrator

    Okay, I was tinkering and ended up recreating your form and building the grid. I was working locally so it's not a live URL, but here's a couple of screenshots of the form in the admin and on the front end in Thesis 1.8.

    Admin Screenshot | Front End Screenshot

    You'll notice I used the inline HTML blocks to add additional HTML content around the fields to pull it off. I also dropped an inline style block in the first HTML field to add the extra CSS rules.

    Since it's easier to show than just tell, I exported the form so you can download it from the link below and see how it's all done. It's not really that difficult to do and once you've seen it, you'll get the idea.

    Download Sample Form (XML)

    Posted 14 years ago on Thursday October 7, 2010 | Permalink

  4. Edwin
    Member

    My question maybe related, but I'm trying to create a grid with multiple columns
    Example:
    | Name | Title | Email | Phone |
    | | | | |(+) (-) <--- user clicks (+) to add another row and so on.

    You already have this functionality with the User Registration Add-on when maping Buddypress with GF fields.
    Any way to create this?

    Thanks

    Posted 14 years ago on Saturday March 12, 2011 | Permalink

  5. Carl Hancock
    Administrator

    This isn't currently supported as a built in feature. It's specialized functionality and the data structure Gravity Forms uses to store entry data would make this difficult.

    We do plan on looking into how to add functionality like this to a future release. At the very least, via some sort of List Field. It's definitely a field type we plan on adding.

    Posted 14 years ago on Monday March 14, 2011 | Permalink

  6. shmula
    Member

    I'm looking to also build an availability grid. How can I build something like this?

    https://dl.dropbox.com/u/2523586/availability-grid.PNG

    Posted 12 years ago on Thursday November 15, 2012 | Permalink

  7. David Peralty

    There is not a built-in way to build a grid like that currently.

    Posted 12 years ago on Thursday November 15, 2012 | Permalink

  8. shmula
    Member

    Thanks, I figured that much. My question was on how could I build that with gravity forms. Any creative way to go about it? Tips? Advice?

    Posted 12 years ago on Friday November 16, 2012 | Permalink

  9. Chris Hajer
    Key Master

    You could do something like this without too much work. There is a CSS ready class of gf_list_inline which will allow you to put all 7 checkboxes on one row. Then, hide the labels (Monday - Sunday) and then unhide the time slots (6am-9am, etc.)

    Then, add an html block above the checkbox fields, with a left margin of 32% to mimic the left label of your time slots below.

    Here is some of the CSS I used (my form is ID 210):

    [css]
/* hide the labels for days of the week checkboxes */
body #gform_fields_210 label {
  display: none;
}
/* now display the timeslots */
body #gform_fields_210 label.gfield_label {
  display: block;
}
/* space out the inline checkboxes a little */
body #gform_fields_210 .gfield_checkbox li {
 width: 40px!important;
}
/* space out the individual days of the week in the html block */
body #gform_wrapper_210 li.gfield_html span {
  display:inline-block;
  float:left;
  width:50px!important;
}
    Copy

    There are some pointers. Let us know where you get stuck.

    Be sure to use "left label alignment" on the form settings. And also, I wrapped each day in a span in the html block, so I could control their width.

    Posted 12 years ago on Saturday November 17, 2012 | Permalink