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

    How to adjust the left padding of the input fields?

    Asked by Kers101 on June 16, 2015 at 09:51 PM

    Can JF position text within a form field? My attempts at this say no. I tried some CSS that a rep offered .

    Page URL:
    http://www.momentostudios.ca/momentonew/light-html/2012jan-b.html

    form field padding left padding
  • Profile Image
    JotForm Support

    Answered by Welvin on June 17, 2015 at 02:00 AM

    Are you trying to position the hint text? Or, is it the text input? I'm sure that is possible with a custom CSS codes. If you can tell us what part of the form, I would be happy to help you add the custom CSS codes.

    I have cloned your form and made an example. Here's the link: http://www.jotformpro.com/form/51671391879973. As you could see, the textarea hint/text is now centered and colored red.

    The custom CSS codes are the following:

    textarea#input_1.form-textarea.custom-hint-group.form-custom-hint {

    text-align: center !important;

    padding-top: 75px !important;

    color: red !important;

    }

    Thanks

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 09:04 AM

    I just want to move the text in the 4 fields to the right about a 1/4 inch  as the example near the bottom of this page:

     

    http://www.momentostudios.ca/momentonew/light-html/2015jun-b.html

     

    In my form, Name, Email and Website, and Comment are positioned almost touching the left side. 

    http://www.jotform.com/?formID=51666848152261

  • Profile Image
    JotForm Support

    Answered by Welvin on June 17, 2015 at 09:14 AM

    I see. Thank you for the additional information. You can adjust the padding. Use the following custom CSS codes:

    input {

    padding-left: 15px !important;

    }

    textarea {

      padding-left: 15px !important;

      padding-top: 15px !important; 

    }

    You can adjust the value if you need it. input is for the textboxes. textarea is for the text area field.

    Thanks

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 01:48 PM

    That was fabulous. It's exactly what I was thinking to do. I have one other little problem with the type face on my form which looks like Arial.  The site uses Titillium Web which comes off of Google. There seems to be problem using this type face in JF. I thought I was doing the steps correctly.

    The CSS for this is on my form

  • Profile Image
    JotForm Support

    Answered by Charlie on June 17, 2015 at 02:45 PM

    Hi,

    You can try following this guide: http://www.jotform.com/help/100-How-to-Use-Google-Fonts-in-your-Form. This will allow you to use Google Web Font "Titillium Web". 

    But, with your form, I believe you need to be more specific. I've cloned your form for testing and demo purposes, you can check my cloned form here: http://form.jotformpro.com/form/51675440650959?. Here's the code that I added:

    @import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');

    .form-all, .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print, label, input, textarea {

    font-family : "Titillium Web", sans-serif !important;

    }

     

    However, make sure to change the font style to "Default" in your preferences before applying the changes above.

     

    Do let us know if that works.

    Thank you.

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 05:45 PM

    That worked great!  One more question and I think this would wrap it up. The words "post comment" in the button need to be a little brighter, at least on my screen. Is that possible? Maybe I could get by with making the background behind the button  a little lighter.

    http://www.momentostudios.ca/momentonew/light-html/2012jan-b.html

     

    http://www.jotform.com/?formID=51666848152261#design

  • Profile Image

    Answered by raul on June 17, 2015 at 07:03 PM

    Please try injecting the following CSS code:

    #input_2 {
      font-weight: bold;
      color: #FFF !important;
    }

    This would provide the following result.

    Is this what you're trying to accomplish?
    Or if you want to change the background color of the button, you can do this in the form designer.

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 08:59 PM

    http://www.jotform.com/?formID=51666848152261#design

     

    the css you're suggesting doesn't work here. In Design I've specifically specified the text colour to be black but it will not show in the output as black.  So where do I specify that ?   I still  want the background button to be red with a clear white "Post Comment" in "Titillium" but  why doesn't that code you supplied  work?  To change the four text words to black is a big puzzle now. Any idea on that? thanks...

  • Profile Image
    JotForm Support

    Answered by Charlie on June 18, 2015 at 01:12 AM

    Hi,

    In Google Font, you can choose how bold the font style can be.

     

    You can try checking this form that I have: http://form.jotformpro.com/form/51675440650959?. Try cloning it by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Try using my cloned form and see if you can make better edits on it. You can also check the custom CSS code that I used there.

    I hope that helps.

    Thank you.