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.

Is this layout possible with gravity forms

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Richard Vav
    Administrator

    I have converted a couple of our forms to gravity forms already and still have a couple to go, I was just wondering before I start the next would it be possible to arrange the fields on one page of a multi-page form like the mock-up in this image http://www.eandhbaxendale.com/Images/build-dims-form.gif

    The idea is that people placing an enquiry for a roof design will be able to enter their building dimensions into fields that are positioned over the wall for which the dimension belongs to. Rather than having to label up a smaller image and place it higher up the page with the fields all arranged below it. I am hoping it would reduce the likelihood of someone entering a dimension in the wrong box, which has happened on a couple of occasions with our old form located here http://www.eandhbaxendale.com/online-enquiries/trussed-rafter-enquiry/roof-shape-enquiry/

    Thanks in advance for taking a look.

    Posted 13 years ago on Thursday July 28, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    Sure, you could use an HTML block to add a div for the background image or just add the image directly to the markup. Then you would use CSS to absolutely position the individual inputs where you want them to display overtop of the image.

    Its going to take a little of custom css work, but it's very possible. The form isn't live now, but this form was created in the same way using Gravity Forms

    http://wpcandy.com/theme-madness

    Posted 13 years ago on Thursday July 28, 2011 | Permalink

  3. Richard Vav
    Administrator

    Kevin, thanks for taking a look and pointing me in the right direction. I had a feeling that an html block may be involved but wasn't completely sure. I can now sort out the final image and then start playing around with the css positioning.

    Posted 13 years ago on Sunday July 31, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    Yep I would just put a regular image in an HTML block that precedes the 4 fields then view the source, get the IDs on those fields and absolutely position them with a higher z-index over the image. It should be pretty straightforward. You may need to make the .gform_wrapper class "position:relative" so the fields will be absolutely positioned relative to the form and not the viewport.

    Posted 13 years ago on Sunday July 31, 2011 | Permalink

  5. Richard Vav
    Administrator

    Hi Kevin, I have setup a test form http://www.eandhbaxendale.com/test-2/ using that mock-up image so I can play around with the css positioning before I start working on the proper form. I have ended up making the .gform_body class position:relative rather than the .gform_wrapper class because the validation error message was dropping the image down while the fields remained in their original positions.

    Posted 13 years ago on Monday August 1, 2011 | Permalink

  6. Kevin Flahaut
    Administrator

    Good call. I didn't think about that when I made the suggestion. Form looks good so far, let us know how it all goes for you.

    Posted 13 years ago on Monday August 1, 2011 | Permalink