Horizontal Form Fields « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

selym
Member

Hello,

Is there a way to create a form with a few words of text, a text field, and a button on all one horizontal line? I tried using the left/right css classes for a two column form, but that still put the text above the text box and didn't really put the text field and button together.

For an example of what I'd like to do, I was interested in creating a simple form to include at the bottom of all posts for the reader to report the post. It would only include 1) text, 2) text field, and 3) submit button. It go something like this (without the numbers naturally):

1) Tell us why you are reporting this form: 2) < text field here > 3) < submit button here >

Thanks,
Sel

Posted 12 years ago on Monday November 7, 2011 | Permalink
Rob Harrell
Member

Sel, this is possible with CSS, go ahead and create this form and place it on your page, provide a link, and we'll take a look to get you in the right direction.

Posted 12 years ago on Monday November 7, 2011 | Permalink
selym
Member

Hi Rob-

Form created. I've inserted it into an ad plugin to display it at the bottom of all posts (or if there's a better way to auto-insert in all posts, I'm all ears), but here's one of the posts it's on. http://bit.ly/sPpdID

I left it alone all scrunched up in the right hand corner and it looks like it's got a bullet in front of it as well. Any help to display it on one line would be much appreciated.

Thanks,
Sel

Posted 12 years ago on Monday November 7, 2011 | Permalink
Rob Harrell
Member
OK, in your custom.css file try this out:
```
[css]
#field_3_1 {
list-style-type: none;
}
#field_3_1 label {
float: left;
margin-right: 10px;
}
.custom #input_3_1 {
width: auto;
float: left;
}
.custom #gform_submit_button_3 {
width: auto;
float: right;
}
```
Also you have an inline style on that div that surrounds the form, you'll want to place a width on that, try 500px or so.
Posted 12 years ago on Monday November 7, 2011 | Permalink
selym
Member

Thanks very much Rob. I appreciate the help.

Seems to be getting better. In Chrome and FF all that it needs is a little text tweaking as it seems to be floating up at the top of the text field. Do you know what would bring the text down a little bit? In IE, it's still all scrambled up, but I kind of expected that because nothing is EVER easy in IE. haha

Oh, and I noticed the text field length is still small, although I have it set to large in my form settings.

Thanks,
Sel

Posted 12 years ago on Tuesday November 8, 2011 | Permalink
Rob Harrell
Member

Alter the margin on #field_3_1 label to margin: 15px 10px 0 0;

The input css we set to auto, get rid of the width: auto declarations on that input and it will get larger, or you can set a % of px width instead of auto. The IE issues and such are going to just take some css mods most likely, I'm just doing this via Chrome developer tools, so its a somewhat limited view to be 100% bulletproof. But, I hope it gets you a step in the right direction at least!

Posted 12 years ago on Tuesday November 8, 2011 | Permalink
selym
Member

Thanks Rob. Didn't seem to change anything, but that's ok. I may put it back to just using the submit button with no text field because the IE version is so screwed up. (sorry to waste your time) I really need to learn css (firebug helps a little for isolating, but not understanding) to help me support these changes instead of having to ask someone else for every little change. I've said it before and I'll say it again...gravityforms (and my thesis theme) are fantastic for all the different options and flexibility they provide, but without knowing how to utilize them, all of this functionality is wasted on me.

Sorry, having a little pity party for myself. Just frustrated, that's all.

A sincere thank you for your assistance though. All of the great support here does not go unnoticed and is appreciated. :)

Thanks,
Sel

Posted 12 years ago on Tuesday November 8, 2011 | Permalink
Rob Harrell
Member

No problem man, it does take some tinkering sometimes. I know you had tried it earlier, but it might be easier to try using the ready classes. If you want to try that out again, we can take another look. Be happy to check it out with you.

Posted 12 years ago on Tuesday November 8, 2011 | Permalink