What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form bg, Input text size and Rounded Text Area

    Asked by Pictorial on March 04, 2012 at 11:17 AM

    Hello

    I am using this css

    .form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 10px;

    padding: 15px;

    }

    {

    backgound-image:url('http://www.pictorialhomelistings.com/autoresponders/formbg.gif');

    }

    And, I am having two problems with it.
    Firstly, the Text areas are not formatted the same way as the rest of the Text Boxes, and also the form background doesn't work. I'm not too familiar with CSS but I got both of these codes from your FAQ section.
    Also, this makes my text boxes bigger, is there a way to also increase the size of the input text?
    Thank you
  • Profile Image
    JotForm Support

    Answered by abajan on March 04, 2012 at 01:12 PM

    The following CSS will round the corners of the text areas as well as increase the size of any text in all inputs and drop down selectors:

    input, select, textarea {
    border: 1px solid #B7BBBD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    }

    .form-all {
    backgound-image: url('http://www.pictorialhomelistings.com/autoresponders/formbg.gif');
    }

    .form-line {
    background: none;
    }

    As you will see, some of the drop downs should be widened to accommodate the larger text. Also, I'm yet come up with a solution regarding the background image. Both matters can probably be easily resolved and I'll look into them later today unless my colleagues provide solutions in the interim. (Unfortunately, I'll not have access to the Internet for the next several hours.) What I can currently state with some degree of certainty is that the background image need not be that tall. A much shorter image (just 1 pixel in height, as a matter of fact) repeated vertically via CSS's background-repeat property will suffice.

  • Profile Image

    Answered by SeanDavis on March 04, 2012 at 01:48 PM

    Hi,

    Try this for background image:

    background:url(http://www.pictorialhomelistings.com/autoresponders/formbg.gif);

    Hope this helps.
    Sean
  • Profile Image

    Answered by Pictorial on March 04, 2012 at 06:09 PM

    Thank you, the codes worked (background:url as well) 

    But, when I use the repeat function (with a 1px height) it doesn't work, I think i'm putting it in the wrong spot.

    Also, I tried putting a padding on the left of the form and that didn't work either.

    And, which one of those dictate the length of the drop down menus?

     

    Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on March 04, 2012 at 08:43 PM

    In the first declaration of the .form-all rule, you have backgound instead of background. (It's one of those little gotchas that can make you pull your hair out trying to figure out what's wrong! :)
    As you can see from my first reply, I didn't notice the spelling error either.

    I'll examine the other issues a little later.

     

  • Profile Image
    JotForm Support

    Answered by abajan on March 05, 2012 at 12:16 AM

    Have a look at this form that's a clone of your form. Is that pretty much how you want things to look? If so, view its source and copy the injected CSS from there. (Of course, the background image needs to be widened to about 700 pixels to properly frame the form.)