put small fields together as comb? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

pedro67
Member

Hi there

I have got some small fields for number of guests in a form and I am using 3 Categories like adults, till 10 years old and till 14 years old for a booking form.
How can I combine those fields in one set instead of using for each one line?

Some of your fields like "name" are already combined to save place and look nice. Is there a way to to that as you want to?
I am using your Beta 1.7.2

thanks

Posted 12 years ago on Monday April 8, 2013 | Permalink
Richard Vav
Administrator

Can you post a link to a page containing your form so we can see what fields you are talking about and provide more specific advice, you are probably looking at using the CSS ready classes to position fields on the same line or in columns

http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
pedro67
Member

thanks Richard

Here is the link
http://www.schokokino.at/reservierungen

As you can see, there is also an issue with some grey fields. Other fields are ok from the css. I did not change anything. What could be the reason?

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
Richard Vav
Administrator
It looks like your figured out the CSS ready classes, as for those grey inputs they are picking up a gradient that has been applied by a rule in your themes stylesheet, try adding the following to the bottom of it to counteract it
.gform_wrapper input[type=text], .gform_wrapper textarea { background: white !important; }
Copy
Posted 12 years ago on Tuesday April 9, 2013 | Permalink
pedro67
Member

sorry Richard... I do not clearly understand what you mean.
to enter this code where?

As I understand this would change the style of all fields to white.
But I would like to keep it in the style of the theme

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
David Peralty

You would add this code to your theme's style.css and the code Richard gave you is specific to Gravity Forms fields.

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
pedro67
Member

oooh ok. I entered this code - all form fields white.
But this does not fit the theme.
As well the fields I mentioned before which stayed white are obviosly to touched by css as the corners are not rounded.
I deactivated this code now, that you can see the difference

sorry for this basic questions.
I have to test Gravity forms for big forms if it works for our needs. If it works, I will buy a developer license for sure.

I like your support - great!

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
David Peralty

I guess the question now is, "what do you want the fields to look like?"

You will want to come up with CSS to fit your specific theme by figuring out first what you want the fields to look like and then applying the CSS like our examples showed.

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
pedro67
Member

the fields should look like the css of the theme - like most fields are already. I don´t know why the other fields do not pick up the css style

Posted 12 years ago on Tuesday April 9, 2013 | Permalink

Sorry I misunderstood which fields you want to change the styles for, if you want all your fields to have the grey gradient background with rounded corners and white text then the css below should do it, I have copied the styles from your stylesheet. The only field this won't change is the select field which every browser handles differently so you might be better editing that dropdown field and enabling the enhanced interface which you can have more control over and then change the background gradient to match your other fields.

.gform_wrapper input[type=text], .gform_wrapper input[type=url], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=password], .gform_wrapper textarea {
	padding: 10px 8px 8px;
	background: #1f1b1a; /* Old browsers */
	border: none;
	color: #fff;
	background: -moz-linear-gradient(top, #1f1b1a 0%, #332e28 76%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f1b1a), color-stop(76%,#332e28)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f1b1a', endColorstr='#332e28',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #1f1b1a 0%,#332e28 76%); /* W3C */
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
}

Posted 12 years ago on Tuesday April 9, 2013 | Permalink

David Peralty

In your style.css file, line 150, you have:

input[type=text], textarea {

Can you change it to:

input[type=text], textarea,.gform_wrapper input[type=url], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=password]

And see if that gets you closer to what you want?

Posted 12 years ago on Tuesday April 9, 2013 | Permalink

pedro67
Member

wonderful - the first big code worked fine- just the select field is not changing as mentioned.

What do you mean with "enabling the enhanced interface"?
Where to change that?
If I use the the advanced field I just can add some css there

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
Richard Vav
Administrator

If you edit the drop down field on the properties tab you should find a check box for 'enable enhanced user interface' http://imgur.com/6gdTedv

This will activate a script that will replace the standard drop down with a more developer friendly drop down that is much more customisable. It already has a white/gray gradient background but we can change that to match your darker grey gradient.

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
pedro67
Member

ahh ok - I don not have this option in the box for adress

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
pedro67
Member

got it - where to change the css?

Posted 12 years ago on Tuesday April 9, 2013 | Permalink

Richard Vav
Administrator

Sorry missed that it was part of the address field, so lets go to plan c which involves using the original css but removing the gradient which breaks it, the only problem with it is not all browsers will respect styling drop downs which is why javascript methods are often used.

.gform_wrapper select {
	padding: 10px 8px 8px;
	background: #1f1b1a; /* Old browsers */
	border: none;
	color: #fff;
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px rgba(255,255,255,0.1);
}

Posted 12 years ago on Tuesday April 9, 2013 | Permalink

pedro67
Member

thanks richard - superb!

Posted 12 years ago on Tuesday April 9, 2013 | Permalink
Richard Vav
Administrator

You're welcome

Posted 12 years ago on Tuesday April 9, 2013 | Permalink

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