How to adjust the left padding of the input fields?

  • Profile Image
    Kers101
    Asked 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 .

  • Profile Image
    Welvin
    Answered 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
    Kers101
    Answered 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
    Welvin
    Answered 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
    Kers101
    Answered 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
    Charlie
    Answered 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
    Kers101
    Answered 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
    raul
    Answered 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
    Kers101
    Answered 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
    Charlie
    Answered 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.