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
a little CSS should do the trick for you. You can add it to your theme style sheet.
li.gsection {margin-top:100px!important}Glad it helped. My pleasure.
@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
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.
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.
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.
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?
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.
Okay, glad you figured it out. Thanks for the update.
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/
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