Hey guys,
I tried using the ready made CSS classes already to do this, but it only seems to work for one line, and not a full form.
I'm looking to design a form area like on the main page of this site:
http://inkthemes.com/wptheme/localbusiness-contractor/
Is there an easy way to have the Name, Email, and Phone on one side (column) and a paragraph text box on the other side of all 3 items (making a balanced out square)?
-Dexx
Please share a URL to the page on your site where this was implemented. And let us know what ready class you were trying to use. We should be able to create a form like that by using gf_right_half for the paragraph field, and gf_left_half for the other three fields. If not, we will have to use some CSS positioning to get the paragraph in the right spot, and may still have to use the CSS Ready Classes for the 3 fields on the left.
Please share a URL to the page on your site where we can see the form so we can get started.
Hi Chris, thank you for the fast response, you can view the form I'm trying to do that with on the following page: http://template.uniqueprofitsystems.com
The addition of the 'gf_right_half' CSS in the message field only make it split the line with the element above it, and not the entire form...
Unless I've done something wrong?
When using the right half and left half classes, you need to alternate form fields. So the paragraph alternated to the right of your last 'left' field (phone.)
Can you try moving the paragraph text (Message) to the second field in your form, right after the name? Will that float it to the right of the name at least? If so, we can try making it taller with CSS after that. Add some CSS like this to your theme stylesheet after making the paragraph text the second form input rather than the 4th:
[css]
body .gform_wrapper form textarea#input_1_5 {
height: 200px;
width: 154px;
margin-left: 10px;
}You can adjust the height and width and margin to suit your taste.
Screenshot: http://minus.com/lyVCcmtK5RrVZ
Oops: just noticed in the screenshot that the "Message" label needs to be moved over 10px as well...
That worked perfectly Chris, thank you!
Last question (and I think it might be pretty simple to do, just not sure how) is there a way to have the labels placed inside the field forms (like in the example form at http://inkthemes.com/wptheme/localbusiness-contractor/) so that they show the text info until the user clicks inside the field?
But it needs to place the text back should the user not enter any information in that field
You want placeholder text for that effect. Please see this plugin:
http://wordpress.org/extend/plugins/gravity-forms-placeholders/
Awesome! Thank you so much Chris!
I wasn't sure how to add another CSS class to the line with the plugin you suggested, but I ended up using this one and it worked perfectly: http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/
Is there a chance of Gravity Forms building that ability in to the plugin without needing 3rd party plugins you think?
You can add the CSS class on the advanced tab of any field where you want a placeholder, or for the whole form, on the form settings page, as described in the plugin.
I know it's been suggested before and was under consideration.
Tobe, please begin a new topic for your issue. Please include a link to your form and let us know what you're trying to do exactly. Thank you.
