Changing the background colour of a form

Gravity Support Forums » Plugin Support » Gravity Forms

Stevem
Member

Hi

I worked out how to change the background colour but how can I get some "padding around the fields.

By this I mean I would like the colour to be say 3 cms around the form as it looks neater.

http://saveandsupport.co.uk/?page_id=21

Also how can I get2 fields side by side without them being is columns? they only have 8 characters for entry and if I have the field size set as small it does not like particularly great to look at, especially as the 2 bits of data are related. This is Top line and Bottom line of the MPAN. I changed the field back to medium because of this.

Regards

Steve

Posted 11 years ago on Friday August 10, 2012 | Permalink
Chris Hajer
Key Master
I'm not sure you want 3cm, which is a fairly large amount. But you can adjust the padding to move the fields away from the edges of the green background by adding this to the custom CSS you already added to your style.css:
```
[css]
body .gform_wrapper { background-color: #E1FACD; padding: 3em;}
```
That will add 3em of space between the background and the fields. Is that what you're looking for?

Regarding your other questions, please let us know which fields you're talking about exactly, and how you want them laid out, and we can help you with that as well.

Have you seen the CSS Ready Classes? They let you do all sorts of neat things:
http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/
Posted 11 years ago on Friday August 10, 2012 | Permalink
Stevem
Member

Hi

Many thanks for the padding answer, works fine.

Regarding the fields side by side.

http://saveandsupport.co.uk/?page_id=21

Halfway down there are 2 fields MPAN Top Line and MPAN bottom Line.

I had them as is columns but it did not look right as I would like them side by side.

I changed them to gf_inline and they reverted to one below the other.

If fact an MPAN is made up of 7 fields 3 on the top and 4 on the bottom.

These are shown on an electricity bill in the UK as a grid with a Large S then 2 rows of numbers.

I have put a sample file on the page for you as I could not work out how to attach it to this request.

Is there anyway I can replicate that?

Hope that all makes sense.

Posted 11 years ago on Tuesday August 14, 2012 | Permalink
Chris Hajer
Key Master

I see what you're looking for. Are you OK with two fields (top line and bottom lin) as you have it, so long as they are side by side, or would you prefer it to be 7 distinct inputs? We can work it out either way. Let me know that, and please export the form as XML (Import/Export menu, then Export Forms in the top menu) and email it to chris@rocketgenius.com - I would like to install it and see what we can do with your request. Thank you.

Posted 11 years ago on Tuesday August 14, 2012 | Permalink
Stevem
Member

Chris

In a ideal world I would like the 7 fields.

So I will be cheeky and set it up like that, then export and send to you.

Thanks for your assistance.

Posted 11 years ago on Tuesday August 14, 2012 | Permalink
Stevem
Member

Chris

I am just adding the fields. They need to be numbers but I see that a 4 number field has a comma, i.e 1,234 whereas I would erquire 1234.

Can this be acheived?

Otherwise I will go with text.

Steve

Posted 11 years ago on Tuesday August 14, 2012 | Permalink
Stevem
Member

Chris

I have gone with text and emailing the form now.

Really appreciate your help

Steve

Posted 11 years ago on Tuesday August 14, 2012 | Permalink
Chris Hajer
Key Master

OK, glad you were able to work around that for now. Did you need more help with this?

Posted 11 years ago on Wednesday August 15, 2012 | Permalink
Chris Hajer
Key Master

Take a look at this form online:
http://gravity.chrishajer.com/special-layout-for-inline-fields/

Here is the CSS to make that happen:
http://pastebin.com/8YJKeh2A

Please note you will have to change the form ID from 140, and verify all the field numbers are correct.

Here is an XML export of the form. I did not delete any of the original fields. You can make them admin only if you have current entries where you want to preserve the information, or you can delete the fields if you like.
http://pastebin.com/M8kqmP3T

There are a couple problems I can see with it, but this should be a good start for you if you'd like to go this route.

Posted 11 years ago on Monday August 27, 2012 | Permalink
Stevem
Member

Chris

Many thanks for this and it is now my new years task..

Can you restrict the number of input numbers in each box?

I will try to work out how to implement this tonight.

Posted 11 years ago on Tuesday January 8, 2013 | Permalink
Chris Hajer
Key Master

Steve, I'm not sure I understand your question. Do you mean limit the number of characters in each field? I believe we used number fields. Those can be limited to a range of numbers (like 1 to 1000) but that validation occurs after the form is submitted.

If you want to use text fields, you can limit the number of characters which can be entered by the user. You can see that actually on the fields beneath the inline block of fields (where it says "0 of 3 max characters", for example.)

If you want to limit the number of characters entered, you can use a text field and the character limit, or use a text field with an input mask. Using numbers won't work if you want to limit the number of characters which can be entered.

Posted 11 years ago on Wednesday January 9, 2013 | Permalink
Stevem
Member

Hi Chris,

Thanks for your help so far.

I put an extra form on this page as a test http://saveandsupport.co.uk/?page_id=21

It is nearly there, not quite the same as your form.

Is there anything obvious that needs changing to get it finished?

Posted 11 years ago on Monday January 21, 2013 | Permalink
Chris Hajer
Key Master

Hi Steve. I was not able to load your site today. Are you still working on this?

Posted 11 years ago on Monday January 28, 2013 | Permalink