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.

put small fields together as comb?

  1. 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 5 years ago on Monday April 8, 2013 | Permalink
  2. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  3. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  4. 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;
    }
    Posted 5 years ago on Tuesday April 9, 2013 | Permalink
  5. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  6. David Peralty
    Administrator

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

    Posted 5 years ago on Tuesday April 9, 2013 | Permalink
  7. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  8. David Peralty
    Administrator

    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 5 years ago on Tuesday April 9, 2013 | Permalink
  9. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  10. Richard Vav
    Administrator

    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 5 years ago on Tuesday April 9, 2013 | Permalink
  11. David Peralty
    Administrator

    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 5 years ago on Tuesday April 9, 2013 | Permalink
  12. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  13. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  14. pedro67
    Member

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

    Posted 5 years ago on Tuesday April 9, 2013 | Permalink
  15. pedro67
    Member

    got it - where to change the css?

    Posted 5 years ago on Tuesday April 9, 2013 | Permalink
  16. 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 5 years ago on Tuesday April 9, 2013 | Permalink
  17. pedro67
    Member

    thanks richard - superb!

    Posted 5 years ago on Tuesday April 9, 2013 | Permalink
  18. Richard Vav
    Administrator

    You're welcome

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

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