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.

Adding columns to the form to organize many fields

  1. Hello, I am attempting to add a new form to my website at http://www.paulreverehomes.com I am attempting to emulate a form at our sister site which is at the bottom of the page found at http://www.hippiehollowhomes.com

    My challenge is that I cannot get the form to look any good at all when I attempt to spread it out into 3 columns. I DO want it to look nicely going from left to right across the webpage. I found some info and have applied it: http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/ but it does not work how I anticipated. Can someone please help as this is getting frustrating!!

    P.S. I cant even find where I can grab the code to add the form to a page!! Not intuitive so far.. Help

    Thanks, Barry

    Posted 10 years ago on Friday June 3, 2011 | Permalink
  2. You should be able to replicate the bright green form by using the 3 column ready classes just fine. Just remember that the fields aren't actual table columns and are floated horizontally so if you want them to be arranged like you have them there, you would need to arrange your fields a little differently. For example

    First Name
    Address
    Estimated Value
    Last Name
    City
    Approximate Square Footage
    Confirm Email Address

    etc.

    The problem with that would be the tab order in your form.. the tab would move from the left to right horizontally rather than down the "column"

    You could always use the HTML block elements to add divs or fieldsets around groups of content and then float those groups into columns. It just depends on how you want to handle it. You have to be a little creative with the markup & placement but it's not difficult to do. Here's a post that details how I added fieldset containers to a form.. you should be able to modify that slightly for divs instead.

    http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

    Most people don't have problems figuring out how to embed a form but we do have complete documentation that's just a click away in the right sidebar -->

    This will detail how to add a form to your site.

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

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  3. Thank you for the quick response. I will give another shot to the column classes and after your explanation and some youtube videos I see how to publish the forms. This was not intuitive to me and it would be nice to see that type of info in the beginning section of the tutorials (docs). If I totally missed that them that is my fault.

    As far as the comments on html and divs... I get lost although I will do my best to review/understand the link you provided. Please know that when I purchased your software plug in I believed that most of it would be a GUI to Wordpress as I have no experience with html or code. Am I in over my head? I will try and am open to learning..

    I will definitely reply again after I get my form posted and I'll do the best I can..

    Thanks, Barry

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  4. Oops.. ok I already ran into an issue. In an attempt to change the order of my form to get it to look right I am not understanding how to break up First Name/Last name in terms of order.. Are you suggesting that I create my own custom fields to break things up? What is the protocol for the ordering of the fields so I understand what to do?

    Thanks,

    Barry

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  5. Ok, I've posted my form at http://www.paulreverehomes.com

    Here's the CSS Class Name order I put the fields in:
    **gf_left_third**
    First Last name fields
    Address
    email
    phone
    alternate phone

    **gf_middle_third**
    estimated value
    Approximate Square Footage
    # of Bedrooms
    # of Bathrooms

    **gf_right_third**
    Do you need another home?
    Please describe your situation.

    You can see that it's not getting the result I need so I must be doing something wrong. Plase tell me what piece of the puzzle I am missing. In addition, I really dont have to emulate the form at http://www.hippiehollowhomes.com exactly but I do need the form to flow correctly (in a logical order) and look nice going across and down the page.

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  6. Your default forms.css file isn't being loaded so none of the styles are being applied. Did you embed your form via a shortcode in the page editor, or did you use the function call and manually embed the form in the page template?

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  7. This is what I have on my home.php

    <?php gravity_form(1, $display_title=false, $display_description=true, $display_inactive=false, $field_values=null, $ajax=true); ?>

    I hope that answers your question as I dont exactly know how to answer it. I am using the essence theme from ithemes. I used the tutorial you have that says "If you have a theme" your syntax was there *I just entered the form id) and since i had to put the form code on the home page I had to use the editor because I have no other access to it any other way.

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  8. Since you're manually embedding the form via the function call rather than using the shortcode inside the content editor, you need to manually enqueue the scripts.

    When embedding a form via a function call you must also manually include the necessary Gravity Forms related Javascript and CSS via the built in WordPress enqueue capabilities. Gravity Forms does not include these by default when calling a form via a function call and they are necessary for forms that contain conditional logic or the date picker field.

    We strongly recommend you enqueue the scripts rather than including them as hard-coded calls in your theme. Implementing it this way will insure that Gravity Forms does not include them on the page if they are already present. It is also a good practice to only load these scripts on the front end.

    Gravity Forms 1.5 introduced the gravity_form_enqueue_scripts function which allows you to easily enqueue the necessary Gravity Forms' scripts and styles when manually embedding a form. This is also useful if you are using a GF widget and do not wish for the styles and scripts to be loaded inline.

    You will need to manually enqueue the scripts and CSS by placing a short script block in your theme's header.php file.

    You can find more information at the URLs below

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

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

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  9. Bottom line.. I am open to putting the form on a page in the easiest way possible. If there is an easier way please let me know but as of right now there is no forms icon in the editor that I can click on to place form code in there for me.

    Why is this??

    Also, what I take out of what you said above is that I need paste in the code you supplied to into the header.php file somewhere after something I can find that says wp_head()

    Is that correct??

    A bit of confusion.. because I am working in the child theme I only have three files I can paste code into.. functions.php, home.php and style.css

    If I select the main theme I can find the page called header.php but I dont know if it will affect the form as its not inside the child theme..

    What do you think??

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  10. If you're not seeing a form icon above the edit window to the right of the "Upload/Insert" text next to the "add media" icons, etc. then you've probably got an incomplete installation of Gravity Forms or else a plugin conflict of some sort.

    screenshot: http://grab.by/ahKC

    You may need to remove the plugin and reinstall to remedy that.

    Here's the information on properly embedding a form.

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

    If your page has a content area that you administer from the WordPress admin, it would be preferable to use the shortcode method to embed your form. That way, all of the necessary form scripts get enqueued automagically and you don't have to do any editing of the theme files. It should normally be a very simple operation.

    Posted 10 years ago on Saturday June 4, 2011 | Permalink
  11. No no, the only place I can edit this homepage in WordPress is under "Appearance" then "Editor". There is no access to this homepage under "Pages" which is where you can edit all other pages and see all the font/form icons, etc. I guess this is because of how iThemes built the "Essence" theme.

    SO having said this. What do you think?? I really need to get this up and going as it's one of my lead generators. Please Help!

    Thanks,

    Barry

    Posted 10 years ago on Sunday June 5, 2011 | Permalink
  12. BTW.. The only way I can get the form to show up is by pasting in (Appearance then Editor on Essence-Silver - Default Child Theme: home.php):

    <?php gravity_form(1, $display_title=false, $display_description=true, $display_inactive=false, $field_values=null, $ajax=true); ?>

    I cannot use : [gravityform id=1 title=false description=true ajax=true] as it justs shows up as text on the page like [gravityform id=1 title=false description=true ajax=true]

    Also, all pages under "Pages" do have the icon for forms..

    Posted 10 years ago on Sunday June 5, 2011 | Permalink
  13. Sounds like you need to talk to your theme provider to ask the best place to put your code. If you're not placing it on a page via the content editor, you need to use the php embed medthod and then will need to use the php snippet to enqueue the scripts/css.

    Again, I'm not familiar with your theme or how it is structured so it's best to consult your theme provider for guidance on where to place the scripts. Once you have everything in place properly, the form should function and display as intended.

    Posted 10 years ago on Sunday June 5, 2011 | Permalink
  14. Shortcodes are a built in WordPress piece of functionality, so if the shortcode isn't working it sounds like there is something wrong with your WordPress site or how you entered the shortcode. It could also be some sort of theme or plugin conflict. You may want to test using the shortcode by creating a page that uses the shortcode and then test for theme and plugin conflicts by following these instructions:

    http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict

    Posted 10 years ago on Sunday June 5, 2011 | Permalink
  15. Ok.. I have the form working as it should now with the appropriate enqueue script (<?php gravity_form_enqueue_scripts(); ?>). The only issue is that after entering the syntax (in the appropriate place.. header.php.. (above wp_head) I get an error code at the top the page the code is on (my homepage):

    Warning: Missing argument 1 for gravity_form_enqueue_scripts(), called in /home/badelman/public_html/paulreverehomes.com/wp-content/themes/Essence-Silver/header.php on line 82 and defined in /home/badelman/public_html/paulreverehomes.com/wp-content/plugins/gravityforms/gravityforms.php on line 1186

    In addition, I am still not understanding how to put your forms to use as you can see on http://www.paulreverehomes.com

    Again, I am trying to emulate the same look and feel as the form on our sister site http://www.hippiehollowhomes.com

    Thank you sd much for your help..

    Barry

    Posted 10 years ago on Tuesday June 7, 2011 | Permalink
  16. I'm not sure about the error that's being written to the page offhand. We may need to get an admin login to your site to take a look. Here's what I do know.

    Line 17 of your theme's style.css adds a 15px left margin to any unordered list item inside the "content_wide" div. Since the forms are structured using unordered lists, they're inheriting from this rule and it's causing layout problems. You can add this to the end of your style.css file to override that.

    [css]
    #content_wide .gform_wrapper ul li {
    	margin-left:0!important
    }

    You're also using the CSS Ready Classes incorrectly so you're going to get odd floating behaviors. This is what you currently have:

    screenshot: http://grab.by/aj6q

    * gf_left_third
    * gf_left_third
    * gf_left_third
    * gf_left_third
    * gf_left_third
    * gf_middle_third
    * gf_middle_third
    * gf_middle_third
    * gf_middle_third
    * gf_right_third
    * gf_right_third

    For everything to display properly, you need to sequence the classes properly.. left -> middle -> right. The margins, floats & widths are specifically tailored to work together that way.

    Here's the correct way to do it.

    * gf_left_third
    * gf_middle_third
    * gf_right_third
    * gf_left_third
    * gf_middle_third
    * gf_right_third
    * gf_left_third
    * gf_middle_third
    * gf_right_third
    * gf_left_third
    * gf_middle_third

    Once you've overriden the theme style and properly applied the Ready Classes, you should start seeing the layout come together

    Posted 10 years ago on Wednesday June 8, 2011 | Permalink
  17. Hello, thanks for that bit of code. I did append it to the end of the style.css on both the main theme style.css and the child theme style.css pages and the only thing that changed was that the form moved to the left a little bit but the error is still there at the top of the page. What do I do??

    P.S. Thanks for helping with the css classes too but I am trying to tackle one thing at a time. As soon as we can get rid of the error.. on to building the form!

    Posted 10 years ago on Wednesday June 8, 2011 | Permalink
  18. My website is: http://www.paulreverehomes.com

    Posted 10 years ago on Wednesday June 8, 2011 | Permalink
  19. It looks like the error is related to not implementing the enqueue function properly, it's missing an argument. Please use http://www.pastie.org/ and paste the code you are using for that function call there and post a link to it here so we can see what your function call code looks like.

    Posted 10 years ago on Wednesday June 8, 2011 | Permalink
  20. I do not understand what it is you want me to do. Please describe in more detail as I am at a huge technical disadvantage here. OR would it be faster/easier if I gave you a temp admin login to my site??

    Posted 10 years ago on Thursday June 9, 2011 | Permalink
  21. Ok.. I gave it a shot to see if this is what you want/need. Here is a link (below). What I did was copy/paste everything from the header.php page. Please note that iThemes uses a child theme and a main theme for the website. The form is pasted into the child theme and the header.php file is in the main theme. Don't know if this means anything or not.

    Here is the link:
    http://www.pastie.org/2043617

    Posted 10 years ago on Thursday June 9, 2011 | Permalink
  22. You aren't passing any arguments to the gravity_form_enqueue_scripts function call. That is the problem. Plus this function call should be placed in your functions.php file, not your header.php file.

    Make sure you read the documentation on how to use this function call here:

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

    Because you aren't passing a form id or the AJAX true/false argument to the function call. Which is why you are having this problem.

    Posted 10 years ago on Thursday June 9, 2011 | Permalink
  23. Ok.. I added this script: <?phpgravity_form_enqueue_scripts(1, true);?>

    I put it in my functions.php file as you suggested and now my site is not accessible and is down! I get this error when attempting to access it:

    Parse error: syntax error, unexpected '<' in /home/badelman/public_html/paulreverehomes.com/wp-content/themes/Essence-Silver/functions.php on line 43

    Please help! Barry

    Posted 10 years ago on Friday June 10, 2011 | Permalink
  24. I even removed the line in the editor and saved it again and still get this error. What do I do!?

    Posted 10 years ago on Friday June 10, 2011 | Permalink
  25. You've messed up your functions.php because your code isn't correct.

    You probably pasted that line of code in an area of your functions.php which is already PHP so the opening <?php and closing ?> isn't necessary. If you removed that line and saved again, then you messed up something else in your functions.php file. There is an extra < in your functions.php file which is what that error is telling you.

    You really shouldn't be doing implementations such as this if you aren't familiar with WordPress theme development and functions.php usage. You may want to consider getting a developer to assist you with this.

    Posted 10 years ago on Friday June 10, 2011 | Permalink
  26. I just really want to place a form on our website and it seems as though that is not as simple as I was lead to believe. I had no idea that implementing your forms (suggested to use by the theme maker at iThemes) would cause conflicts between the theme and your product. While I appreciate your viewpoint.. so far I've received misinformation from you (Gravity Forms-If you read this thread you'll see another suggestion about placing the code in another page file) that has not helped and caused some downtime. However I have also received some very good information from you. In either case.. I've purchased your software which states that it makes simple work of complex forms.. and really just want to implement a simple form so I do appreciate the support.

    Posted 10 years ago on Friday June 10, 2011 | Permalink
  27. By the way.. My website is back up. I replaced the latest functions page with the original one (a suggestion by iThemes). I still need to implement this solution so I may have some more questions.

    Posted 10 years ago on Friday June 10, 2011 | Permalink
  28. I will ask you to be very specific in your responses so I don's screw up a simple copy/paste of the code you suggest I use.

    Thanks, Barry

    Posted 10 years ago on Friday June 10, 2011 | Permalink
  29. Barry,

    Embedding forms is usually a very simple process.. especially if you use the shortcode wizard to embed them into the content area of a page or post. You're talking just a few simple clicks to do this.

    When you choose to manually embed the forms outside the WordPress "loop", you have to take a few more steps like properly enqueueing the scripts. Normally, thats not too much work either.

    Occasionally there are issues with the theme that make things more difficult. I'm not sure where the disconnect here was really, but I just looked at your form and it appears to be working and loading the styles as it should. I'm assuming that you're good with that part now. What else can we help you with?

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  30. Kevin your a nice guy. Thank you very much. I do appreciate your help a lot. My theme's is built in such a way that my form took some doing to get it going. iThemes basically told me where and what line to paste the code you provided minus the "php" that was in the beginning. Now we're at least up and running.

    What's missing now is I would like to organize the fields a bit better than they are. It looks nice but a logical flow is missing. For instance ADDRESS should be after NAME in my opinion. But if i tale what I know now then it will look funny if I just simply move it to that order.

    Is it possible to take a field that has two places to enter data like email and confirm email and stack them on top of one another instead of side by side?

    I would also like to have a rectangle background for the form that basically frames it in instead of all that white: http://paulreverehomes.com/

    Most forms I see have a gray background which would be fine or I could see faded black like my menu up top. That would be pretty cool I think.. Can you help me do this?

    Thanks again,
    Barry

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  31. Barry, thanks for the kind words. I do appreciate it.

    The advanced/grouped fields are set to display together horizontally by design so those will take a bit of CSS magic to get them to stack vertically if you want to use that type of field. The other option of course would be to use a single input for the first name & last name, but you would lose the email confirmation if you did it that way.

    It's late here, so I'll get a fresh set of eyes on this in the morning and see what I can do to help you get things polished up. Thanks for your patience. I know these things can be frustrating but you're almost to the finish line. I'll let you know as soon as I have something to share.

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  32. Barry, give this a shot. Add these rules to the end of your theme's style.css file or custom.css - wherever you put them and you should be pretty close.

    [css]
    body #gform_wrapper_1 {
    	padding:10px;
    	background-color:#ededed;
    	border:1px solid #e8e8e8;
    	margin:10px 20px 10px 10px
    }
    
    body #gform_wrapper_1 span.ginput_left {
    	width:99%!important
    }
    
    body #gform_wrapper_1 span.ginput_right {
    	width:99%!important;
    	float:left!important
    }
    
    body #gform_wrapper_1 span.ginput_full {
    	width:99%!important
    }
    
    body #gform_wrapper_1 .ginput_complex .ginput_full input {
    	width:95%!important
    }
    
    #content_wide .gform_wrapper .top_label li.gfield.gf_middle_third {
    	margin-left:2%!important
    }

    My test looked pretty good. You'll probably want to tweak things a bit but I think that's about 95% there.

    screenshot: http://c0848462.cdn.cloudfiles.rackspacecloud.com/013a006f035a0c5abc53dbdbf1ed835140be0bb476.png

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  33. Kevin, that looks crazy amazing! So I don't screw this up I'll ask for a bit more detail before I paste anything into the WP theme.

    Specifically, I have the form pasted into a child theme:
    <?php gravity_form(1, $display_title=false, $display_description=true, $display_inactive=false, $field_values=null, $ajax=true); ?>

    When I go to appearance and then editor for the child theme it does have it's own style.css. Should I paste the code in there or the style.css for the primary theme?

    Also, from how you describe it it sounds like I'll be ok if I go to the bottom of significant style.css and paste the code you've prepared there. Is that right?

    Thanks, Barry

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  34. Barry, this appears to be the file you need to make changes to. Of course, it's always preferable to consult your theme provider if you're not sure.

    http://paulreverehomes.com/wp-content/themes/Essence-Silver_childtheme/style.css

    Yes, it's always best to put your custom rules at the end of the document as the file is read by the browser top to bottom and the rules it reads last will supersede the ones at the beginning of the file.

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  35. Wow! Kevin, after pasting there's a background and everything!! How'd you do that? Can I change the color to make it look like the menu tabs, kinda a faded black??

    Gravity forms skeptic to Gravity forms fan!
    Man thanks Kevin!

    Posted 10 years ago on Saturday June 11, 2011 | Permalink
  36. Glad you're a fan. That means I'm doing my job :)

    Sure once you've properly applied the CSS rules, you can add/change properties like the background color as you wish. If you wanted the background color to be darker, then you'd change the rule from above to something like this.

    [css]
    body #gform_wrapper_1 {
    	padding:10px;
    	background-color:#666;
    	border:1px solid #e8e8e8;
    	margin:10px 20px 10px 10px
    }

    That will change the background color to a darker gray (#666666 hex code)

    So, a couple of related notes. That only changes it to a solid color. The gradient gray/black that you see on the menu background is actually a background image. You could also apply a background image by specifying that in the rule. Secondly, with the darker background, you would probably want to define a lighter text color so it stands out.

    If you need a good CSS primer to get you going, I always recommend starting at the W3Schools.com site. They have good examples and walk-throughs that will be of great help as you keep tweaking the CSS.

    http://w3schools.com/css/default.asp

    Posted 10 years ago on Sunday June 12, 2011 | Permalink
  37. You're the man! Thank you thank you Kevin. I will visit the link and attempt to learn some more.

    Posted 10 years ago on Tuesday June 14, 2011 | Permalink