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.

Help with organizing fields on large gravity form on my homepage

  1. Hello, I would like to clean up the large gravity form on my Wordpress homepage at: http://paulreverehomes.com

    I have always wanted to re-arrange the fields but have not figured out how to do it (after much banging my head against a wall!). As it is now it looks like a jumbled mess with no thought out logical sequence to the input fields.

    What I'd like to do is:

    1. have all of the personal info fields at the top going from left to right and all of the fields having to do with information about someones home on the bottom going from left to right. There doesnt need to be seperation between the two.

    2. In addition, there looks to be a lot of wasted space above and below the fields so I would like to tighten that up a bit.

    3. I know this may be nit-picky but the form is not exactly middle justified on the page (dont know why) so I'd like to fix that as well.

    As I have zero knowledge of php or coding anything I will attach the code that's there and provide an example of how I would like it to look. With your help and any detailed instruction you can give I can probably paste stuff in and make some changes. If you need/want a login, I can do that.

    Here's a link to what I put together in paint that shows how I'd ultimately like to have the form look (please scroll down to see the whole thing): http://paulreverehomes.com/?page_id=274&preview=true&preview_id=274&preview_nonce=7be78b17f5

    As for the code. here's a pastie of what's in my home.php in the child theme: http://www.pastie.org/2770185
    and here's what's in my style.css (also on the childtheme): http://www.pastie.org/2770195
    and here's what's in my functions.php also on the childtheme: http://www.pastie.org/2770200

    Thank you,
    Barry

    Posted 12 years ago on Thursday October 27, 2011 | Permalink
  2. We won't be able to see the preview as we're not logged in to your site.

    Regarding the form organization, you can drag and drop fields in the form builder and add section breaks where you want. I would start by copying the form and making your edits in the new form, so the old form continues to work.

    After you're done with the logical presentation of it, you will need to work on the visual/CSS presentation of it. First though, you need to get it in the order you want.

    I would be sure that Gravity Forms and WordPress are both up to date, as well. And after you create your new form, be sure any custom code you added to your theme's stylesheet or functions.php account for the new field IDs or names or form ID.

    After you move everything around into the proper order, please embed the form in a public page we can see, and point out the items you want to change visually. We'll help you with the CSS.

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  3. Hello, I will try to do this but I have already tried and the form builder is very confusing for me. Specifically: To get the fields to stack on top of each other or have them lying horizontally across?? This is the difficulty. How do I do that? As for the code.. yes I will need lots of help. All of the previous code I supplied via pastie you had originally put together for me with so I have no clue what it all means or how to do it.

    P.S. As I stated I would be glad to provide you with a login for help but how can I do this securely?

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  4. If it's beyond your comfort range, you might consider getting some developer help. We can't do the work for you, but are happy to provide guidance where we can.

    You can find a list of developers who have experience with Gravity Forms here:
    http://www.gravityhelp.com/forums/topic/how-the-job-board-works#post-35068

    You can contact them or post a gig of your own there.

    HOWEVER

    By starting with a copy of the form, and an updated Gravity Forms and WordPress installation, I think you will be able to get your hands dirty, learn a lot in the process, and get through the layout yourself. Break it down into small pieces and tackle one at a time. It's not one huge project, it's 20 little tasks you need to take care of. Cross one off the list, and you're on your way. As I mentioned before, we're happy to help.

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  5. I will try my best. Anything you can point at that will describe in detail how I can arrange the layout of the fields? What's the shortcode or place where I can position the fields? In other words.. some are arranged horizontally while others are stacked on top of one another. Maybe this was more difficult in the older versions of Gravity Forms?

    Thanks,
    Barry

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  6. You will want to read this information about "CSS Ready Classes".

    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    They are helper CSS classes that have been added to Gravity Forms, to do things like allow multiple columns of information, or all items in a horizontal line. It is much easier to format the form with these classes than it was two years ago (but they have been present for a while, certainly since you became a member here).

    You have the 1.6rc5.2 installed on your site now, so the ready classes are there for you to use, if you have a need for them.

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  7. Thank you. I'll give it a shot. I'm keeping the links active above in case we need to refer to them. After I'm done putting the fields in place and doing the best I can I'll reply back here and let you know.

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  8. Chris, now when I go to click edit nothing happens with the acception of the top field in the form (form settings). This is after upgrading to the newest Gravity forms. My wordpress is up to date as well and I'm using IE9.

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  9. Chris, I went ahead and switched to Firefox and no problem. I wonder what the problem is with IE9? So, I've rebuilt the form and am stuck where I have been in the past. What is the very next step I can take to get my form the way I like it? Oh and should I enable Ajax?

    Here is a link to the test form: http://paulreverehomes.com/?page_id=282
    Here is a link to what I want it to look like: http://paulreverehomes.com/?page_id=274

    I will send you a login to the site!

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  10. Ok, I'm looking at ready classes. Already I can see that the form I designed seems to have 4 columns. Is there a ready class for 4 columns.. Where to go from here???

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  11. AJAX is useful in a very limited number of cases. I would not enable AJAX.

    The problem with IE9 was likely due to cached JavaScript from WordPress and Gravity Forms. It's best to clear the cache completely, or use a different browser. Firefox seems to have worked fine, so you're OK there.

    I'll take a look at the layout issues as time permits. It's officially the weekend now and there's not usually much support taking place. If we have time, we'll be sure to update this topic with suggestions. Good job so far.

    Posted 12 years ago on Saturday October 29, 2011 | Permalink
  12. Hello, hadn't heard from anyone in a bit and wanted to keep the ball moving. May I get some help please?

    Thanks

    Posted 12 years ago on Tuesday November 1, 2011 | Permalink