https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms Gravity Support Forums Topic: Is this layout possible with gravity forms en-US Fri, 17 Apr 2026 01:20:43 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms#post-31303 Mon, 01 Aug 2011 10:45:05 +0000 Kevin Flahaut 31303@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms#post-31301 Mon, 01 Aug 2011 09:56:16 +0000 Richard Vav 31301@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin, I have setup a test form <a href="http://www.eandhbaxendale.com/test-2/" rel="nofollow">http://www.eandhbaxendale.com/test-2/</a> 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. </p> https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms#post-31276 Sun, 31 Jul 2011 14:12:56 +0000 Kevin Flahaut 31276@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms#post-31275 Sun, 31 Jul 2011 14:08:25 +0000 Richard Vav 31275@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms#post-31152 Thu, 28 Jul 2011 16:37:18 +0000 Kevin Flahaut 31152@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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</p> <p><a href="http://wpcandy.com/theme-madness" rel="nofollow">http://wpcandy.com/theme-madness</a> </p> https://legacy.forums.gravityhelp.com/topic/is-this-layout-possible-with-gravity-forms#post-31149 Thu, 28 Jul 2011 14:34:50 +0000 Richard Vav 31149@https://legacy.forums.gravityhelp.com/ <p>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 <a href="http://www.eandhbaxendale.com/Images/build-dims-form.gif" rel="nofollow">http://www.eandhbaxendale.com/Images/build-dims-form.gif</a> </p> <p>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 <a href="http://www.eandhbaxendale.com/online-enquiries/trussed-rafter-enquiry/roof-shape-enquiry/" rel="nofollow">http://www.eandhbaxendale.com/online-enquiries/trussed-rafter-enquiry/roof-shape-enquiry/</a></p> <p>Thanks in advance for taking a look. </p>