Hi,
I was wondering how I could remove the UL/LI structure of the fields?
For example, the entire form sits inside a UL with the ID gform_fields_1. I would like to change that to just a div, and then take out the LI's that wrap the fields. I'm trying to use custom html to break up a really long form into three different parts. Removing the UL structure would really help me achieve that.
Any help is appreciated!
Mike
You can't remove or modify the main structure of the form without hacking the plugin and you don't want to do that. You CAN however, use strategically placed HTML blocks inline to add markup - splitting the main list into multiple lists and adding divs or other containers around them. Here's an example.
First HTML Block:
</li><!-- close the html field li -->
</ul><!-- close the list -->
<div id="form_section_1"><!-- open the first div container -->
<ul><!-- reopen the list -->Add fields for first section here
Second HTML Block:
</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the first div container -->
<div id="form_section_2"><!-- open the second div container -->
<ul><!-- reopen the list -->Add fields for second section here
Last HTML Block:
</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the second div container -->Since the HTML block is in a <li > itself, you have to close that first, then close the list. After that you can introduce new markup to go between/around the lists, then re-open the list to start the new section. The last HTML block would close the last list and any open containers. Note: remember to check the "disable default margins" option for the HTML fields in the admin.
Hope that helps
One last note, Gravity Forms 1.5 should launch sometime within the next couple of weeks and it includes multi-page form support so you could also use that to break a long form into "pages" to tidy things up. It just depends on how immediate your need is I guess.
That's clever thinking actually, closing out the LI and UL tags. I tried just about everything BUT that. That should do the trick!
I was really hoping for the multi-page feature because that would have saved me several hours of fiddling with different (dead end) solutions. Unfortunately the deadline for this isn't very flexible ;).
Thanks for your help Kevin!
Mike
Just an update. That worked brilliantly. I was even able to integrate some jQuery tabs that breaks up the form into 3 steps.
Thank you sir!
Mike, that's awesome. A lot of people don't think to use the HTML fields that way. I'm really pleased it worked out for you. Thanks for the update.
That's actually a very good idea. Even with the upcoming 1.5 having a sample code snippet to visually explain (which you seem to have a knack for, Kevin) would be a brilliant addition to your documentation.
It might break out some ingenious ideas from your user base -on top- of the tab addition in the update.
@urmedia - Thanks. There's a lot you can do with the HTML fields with just a little creativity. I do plan on creating some additional tutorials/guides to show folks some of the possibilities - as always, I have to deal with priorities so I'll get more added as soon as possible.
I have several ideas and have started a few tuts, but just need to polish them up and get them out there.
Thanks for this! I've been using the html blocks incessantly for displaying conditional product images, etc... they are awesome. I was thinking something like this should work, but I hadn't thought about closing the lists and list items. This is super-helpful!.
@pixeledgestudio, Thanks for the note. I'm glad this helped you out. Sometimes you can do a lot with just a little pointer in the right direction ;)
