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.

More space with a section break

  1. promedia
    Member

    Hi guys, I have another question.

    We have a form with about 35 fields and the page looks messy with all these fields. We are using section breaks and it helps a bit but not enough.

    Would it be possible and how, to create a extra blanc space in-between sections. For example 100 pixels above each section break would be great.

    I look forward hearing from you.

    Thanks,

    ~Vincent

    Posted 9 years ago on Monday December 7, 2009 | Permalink
  2. a little CSS should do the trick for you. You can add it to your theme style sheet.

    li.gsection {margin-top:100px!important}
    Posted 9 years ago on Monday December 7, 2009 | Permalink
  3. promedia
    Member

    Thanks Kevin, even I as a non tech guy can understand this, it worked perfect, thanks!

    Posted 9 years ago on Monday December 7, 2009 | Permalink
  4. Glad it helped. My pleasure.

    Posted 9 years ago on Tuesday December 8, 2009 | Permalink
  5. SoundsGood
    Member

    Awesome... just what I was looking for too! :-)

    Posted 9 years ago on Wednesday July 14, 2010 | Permalink
  6. net_mage
    Member

    Kevin,

    Where are we at with multi-paged form dev? I know it was talked about alot previously. Thanks.

    Posted 9 years ago on Wednesday July 14, 2010 | Permalink
  7. @net_mage - Off topic a bit here.. Multi Page is still on the list, but won't be for a while. Some other users have come up with some work arounds if you've really gotta have it.

    http://forum.gravityhelp.com/topic/wizard-plugin-for-gravity-forms#post-6191

    Posted 9 years ago on Wednesday July 14, 2010 | Permalink
  8. pcohen15
    Member

    Kevin:

    I found this thread and also need to add some spacing above and below my section break. You offered up this code and suggested that it be added to the style sheet:

    li.gsection {margin-top:100px!important}

    My question is where exactly would I add this? I am using Agency child theme for Genesis theme, and am not great with CSS. Any help you could toss my way would be greatly appreciated. Here's the page with the form: http://capitolcollegiate.org/contact/apply-to-cca/

    Thanks in advance.

    P.S. I think I figured it out. I just stuck it at the very top of the style sheet. Seems to be working. I added another line for a bottom margin that seems to work as well.

    Posted 9 years ago on Tuesday September 21, 2010 | Permalink
  9. Wonderful. Sounds like you're an old pro now.

    Yes, you would normally put it in the theme's style sheet. I recommend putting new rules at the end of the style sheet as the last thing read by the browser will supersede other rules ahead of it.

    Posted 9 years ago on Tuesday September 21, 2010 | Permalink
  10. pcohen15
    Member

    Thanks again. I'm old, but not a pro for sure ;-) Your advice to place new rules at the end of style sheets is exactly what I was clueless about.

    Posted 9 years ago on Thursday September 23, 2010 | Permalink
  11. cmonica
    Member

    I would like to add some space between fields, right now everything is scrunched tightly together. I added the recommended code to the end of my theme's stylesheet and it didn't do anything. I tried putting the
    tag in the field description, but that didn't work either. My theme is Builder from iThemes and the url for the form is http://sacforeclosurehelp.com/test-builder/contact/.

    Also, I have two other issues:

    1. The field labels have bullet points, which I would like to get rid of.
    2. The asterisk for required fields is no longer red. I don't know what setting I changed but I would like them to be red.

    Posted 8 years ago on Thursday March 24, 2011 | Permalink
  12. The problem is that your forms.css file isn't being loaded. Once that's loaded, the default styles will take care of all the issues you've mentioned.

    Are you including your form via the shortcode in a post or manually embedding it into the page template with the php function call?

    Posted 8 years ago on Thursday March 24, 2011 | Permalink
  13. cmonica
    Member

    I embedded the form in my page using the shortcode (see below) builder per Documentation instructions - the first option.

    [gravityform id=1 name=ContactForm title=false ajax=true]

    Update: I figured out what setting I had changed and I resolved the problems. I had changed the Output CSS setting to No, because I was going to copy the content of the form.css to my theme's stylesheet, but neglected to copy.

    Posted 8 years ago on Thursday March 24, 2011 | Permalink
  14. Okay, glad you figured it out. Thanks for the update.

    Posted 8 years ago on Thursday March 24, 2011 | Permalink
  15. cmonica
    Member

    I'm having the same problem as before (scrunched fields, bullet points, and red asterisk), but it's on a different form created that I embedded (the same way as before) on a sidebar widget. I left the Output CSS setting to Yes so that isn't the problem.

    http://sacforeclosurehelp.com/test-builder/loan-modification-help/

    Posted 8 years ago on Sunday March 27, 2011 | Permalink
  16. The default forms.css isn't being loaded. Are you using the actual Forms widget that comes with Gravity Forms or another text widget of some sort?

    When using a Gravity Form in a sidebar widget or embedding it anywhere using the function call, you need to manually enqueue the scripts and CSS by placing a short script block in your theme's functions.php file.

    if(!is_admin()) {
        wp_enqueue_script("gforms_ui_datepicker", WP_PLUGIN_URL . "/gravityforms/js/jquery-ui/ui.datepicker.js", array("jquery"), "1.4", true);
        wp_enqueue_script("gforms_datepicker", WP_PLUGIN_URL . "/gravityforms/js/datepicker.js", array("gforms_ui_datepicker"), "1.4", true);
        wp_enqueue_script("gforms_conditional_logic_lib", WP_PLUGIN_URL . "/gravityforms/js/conditional_logic.js", array("gforms_ui_datepicker"), "1.4", true);
        wp_enqueue_style("gforms_css", WP_PLUGIN_URL . "/gravityforms/css/forms.css");
    }

    Without this, the conditional logic scripts, datepicker script, form CSS and other elements needed for the full form functionality aren't loaded.

    You can find more information at the URL below

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

    Posted 8 years ago on Sunday March 27, 2011 | Permalink
  17. cmonica
    Member

    Thank you that worked!

    Posted 8 years ago on Monday March 28, 2011 | Permalink