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.

Changing the background colour of a form

  1. 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.

    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.



    Posted 7 years ago on Friday August 10, 2012 | Permalink
  2. 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:

    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:

    Posted 7 years ago on Friday August 10, 2012 | Permalink
  3. Hi

    Many thanks for the padding answer, works fine.

    Regarding the fields side by side.

    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 7 years ago on Tuesday August 14, 2012 | Permalink
  4. 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 - I would like to install it and see what we can do with your request. Thank you.

    Posted 7 years ago on Tuesday August 14, 2012 | Permalink
  5. 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 7 years ago on Tuesday August 14, 2012 | Permalink
  6. 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.


    Posted 7 years ago on Tuesday August 14, 2012 | Permalink
  7. Chris

    I have gone with text and emailing the form now.

    Really appreciate your help


    Posted 7 years ago on Tuesday August 14, 2012 | Permalink
  8. OK, glad you were able to work around that for now. Did you need more help with this?

    Posted 7 years ago on Wednesday August 15, 2012 | Permalink
  9. Take a look at this form online:

    Here is the CSS to make that happen:

    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.

    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 7 years ago on Monday August 27, 2012 | Permalink
  10. 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 6 years ago on Tuesday January 8, 2013 | Permalink
  11. 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 6 years ago on Wednesday January 9, 2013 | Permalink
  12. Hi Chris,

    Thanks for your help so far.

    I put an extra form on this page as a test

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

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

    Posted 6 years ago on Monday January 21, 2013 | Permalink
  13. Hi Steve. I was not able to load your site today. Are you still working on this?

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