Widening Elements in a Sidebar Widget's Embedded Form with Conditional Logic

Gravity Support Forums » Plugin Support » Gravity Forms

EvelynB
Member

Hi Gravity Forms,

I am doing my best to develop a Wordpress website (Empire Theme by Woo Themes), and am continuing to work on my Gravity forms. I have a few questions regarding how I might make better use of the full width of my sidebar for my embedded form that uses conditional logic. Please note that I am actually using the same form in 2 places, embedded in the sidebar as well as on its own full page. (If required, I assume that I can duplicate the form and name them 2 different titles if the following requests would require that.)

Here are the links to my form:
Embedded sample: http://explanationsunlimited.com/mathematics-tutoring-toronto/
Full Page: http://explanationsunlimited.com/how-can-we-help-you/

To see the form expand, select the “Tutoring Enquiry” option in the first drop-down field.

Questions:
Q1. For my drop-down fields, some of the choices are wider than the actual field width and are therefore hard to read in the embedded form. There appears to be space to the right of the field, so can you instruct me on how to widen the field width so users can read more of the drop-down choices while filling out the embedded form? As you may recall, I am a non-coder/non-developer, and have yet to change things in my custom.css or elsewhere, so your guidance is appreciated, such as what to change & where to find the file.

Q2. Can I also increase the width of the field LABEL to reduce the number of rows the label takes up in the embedded form? If so, how?

Q3. Similarly, for the field descriptions, can I “fully justify/align” them so that they can spread out the full width of the sidebar starting from the left side underneath the field label, and continuing to the far right. I am unsure how to use padding, margins, borders, etc

Q4. I am also wondering how to put a border around the embedded form & how to adjust the sidebar’s blue background fade, as some of the lower fields seem to be floating on white.

Your timely assistance with these specific items is greatly appreciated. Cheers, Evelyn

Posted 12 years ago on Wednesday April 18, 2012 | Permalink

Try dropping this into your theme's stylesheet:

[css]
.gform_widget .gform_wrapper .right_label .gfield_label {
float: none;
width: auto;
display: block;
text-align: left;
}
.gform_widget .gform_wrapper .right_label input.medium, .gform_widget .gform_wrapper .right_label select.medium {
width: 98%;
}
.gform_widget .gform_wrapper .right_label .gfield_description {
margin-left: 0;
width: auto;
}

The blue background is on your sidebar div:

[css]
#sidebar {
border-left: none;
background: url(http://johannesen.ca/explanationsunlimited/wp-content/uploads/2011/09/sidebar-gradient.png) no-repeat;
color: black;
}

That's the background image right there. You might want to consider hiring someone to further style your site as you need fit.

Posted 12 years ago on Thursday April 19, 2012 | Permalink

EvelynB
Member

Hi Rob

Thanks for your timely reply. As I am "not supposed" to touch my wordpress main theme style sheet, I understand that I can add code to a file called custom.css which should override related default coding in the main file. Do you think that I can just copy your above coding suggestions and paste them to the wordpress custom.css file? Could you also quickly clarify which coding snippets lines relate to my various questions? Will the above wrapper code affect all my forms, or both "uses" of this particular form, or will it know to just apply it to the version of this particular form that is embedded in the sidebar (as previously mentioned the form also exists in a full page version-links were provided above)? Also, is there a reason you are recommending that I consider a "professional" at this time, ie am I doing things wrong, or asking "obvious" questions? ;-) Thanks in advance. Evelyn

Posted 12 years ago on Thursday April 19, 2012 | Permalink
Rob Harrell
Member

You would want to place those styles into custom.css - so right there.

This selector is for your labels: .gform_widget .gform_wrapper .right_label .gfield_label

Thess selectors are for your inputs and selects .gform_widget .gform_wrapper .right_label input.medium, .gform_widget .gform_wrapper .right_label select.medium

This selector is for your description: .gform_widget .gform_wrapper .right_label .gfield_description

Notice I started all the selectors with .gform_widget - That means they will only pertain to your widget form in the sidebar.

The reason I stated the hiring piece was I wasn't sure of your interest in learning CSS. If you are you can see these resources here:

http://www.gravityhelp.com/documentation/page/Design_and_Layout
http://www.gravityhelp.com/other-resources/ (After the plugins section)

Posted 12 years ago on Thursday April 19, 2012 | Permalink
EvelynB
Member

Thanks again, Rob. I will see how naturally this comes to me. I love to learn, it is more a matter of time management, as I operate my own small business and wear many hats, as I am sure you can imagine. Thanks, Evelyn.

Posted 12 years ago on Thursday April 19, 2012 | Permalink
Rob Harrell
Member

I hear ya - all the more reason to surround yourself with great people! Good luck and have fun.

Posted 12 years ago on Thursday April 19, 2012 | Permalink

This topic has been resolved and has been closed to new replies.