I am trying isolate a group of my forms selectors eg. section title, input container, dropdown box, for custom css styling. I am trying to change the background color and/or put a border around a particular group in my form and repeat for other sections. Any suggestions?
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.
CSS Help
-
This post might be helpful to you:
http://forum.gravityhelp.com/topic/wizard-plugin-for-gravity-forms#post-6191
There have been a few adjustments to the code provided there, so I would recommend using this instead:
This is a jQuery solution that basically restructures your form on page load and puts everything into tidy fieldsets. Keep in mind, this is possible to do using the GF HTML fields; however, I've found that method for adding sections can get confusing and a little cumbersome.
This will allow you to style sections like this: http://www.afineartprint.com/your-files/
To style the fieldsets you can do something like this:
<style type="text/css"> fieldset.gsection-container { border: 1px dotted #ccc; margin: 10px; padding: 10px; } </style>Posted 13 years ago on Thursday January 13, 2011 | Permalink -
You should just need the snippet from pastie.org. You'll want to put it in a javascript file and make sure that javascript file is being called in the <head> of your page.
Posted 13 years ago on Thursday January 13, 2011 | Permalink -
sandman18
MemberOk. I'm using headway for my theme editor. I am calling the script in my head. when i view my page source it is calling under the jquery file. I entered the css in the live css editor and nothing is happening on the page. Do I need to do anything else?
Posted 13 years ago on Thursday January 13, 2011 | Permalink -
Can you post a link to your form?
Posted 13 years ago on Thursday January 13, 2011 | Permalink -
Ah, sorry Sandman. I did neglect to mention that you need to wrap your shortcode in a div with a special class so the script knows to run.
<div class="add-gf-sections">[gform id=9]</div>Just an example, but hopefully that makes sense.
Posted 13 years ago on Thursday January 13, 2011 | Permalink -
Two things I noticed:
1 - You've got a javascript error on the page which could be interefering with the GF sections script.
2 - I'm not seeing the "<div class="gf-add-sections"></div>" in the page source of the link you shared.
Posted 13 years ago on Thursday January 13, 2011 | Permalink -
sandman18
MemberOk. I am not sure what javascript errors you are referring to, how do I see them? I did move some javascript calls to the head were I had them in the body. I also realized that I was using Headways Gravity forms plugin to load the form so I was not surrounding the form properly. It should be in the div tag now, but I am still not seeing the sections?
Posted 13 years ago on Friday January 14, 2011 | Permalink -
The sections are there, but they will not be "visible" unless styled to be so.
fieldset.gsection-container { background-color: #FFFFFF; margin: 10px; padding: 10px; }Add that to your style sheet. The sections should now show up with white backgrounds like this: http://grab.by/8nKv From there you can style away to get them looking how you want. :)
Posted 13 years ago on Friday January 14, 2011 | Permalink -
Most web browsers come with some sort of default error console. If you're using Firefox (like me) it'd be under "Tools": http://grab.by/8nU4
In addition, for more advanced troubleshooting and debugging I use Firebug, which amongst other things will let you step through the JS code, line by line. :)
Posted 13 years ago on Friday January 14, 2011 | Permalink -
@sandman18 I would suggest deleting the I accept these terms checkbox from your form, save your form, and then re-add the I accept these terms checkbox. It looks like your form data for that checkbox is out of synch. Re-adding it should solve the issue.
Posted 13 years ago on Saturday January 15, 2011 | Permalink -
sandman18
MemberHi Carl, I tried that and it did not work. Even after re-adding the checkbox it still shows up twice. It seems like it is only happening to the check boxes. I put another one in a different section and the choices are repeating but not the title.
Posted 13 years ago on Saturday January 15, 2011 | Permalink -
Hi Sandman,
Yeah, it probably is an issue with the javascript. This script is outside of standard scope but if you send me a login to my personal account I will troubleshoot the script as time allows. david@ounceoftalennt.com
Posted 13 years ago on Saturday January 15, 2011 | Permalink -
It was a typo. David's email is david@ounceoftalent.com. He's a super-talented programmer, but obviously not a spelling bee champion.
Posted 13 years ago on Sunday January 16, 2011 | Permalink
