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 can I use a Google Font in my form?

    Asked by Kers101 on June 16, 2015 at 04:22 PM
    I worked with a few features in Design to come up with a form. On the website the font is "Titillium Web". Don't see it on the editor under fonts.  Is there a way to import a font into JF? The other little thing I was trying to do was change the position of the text in the boxes to indent a little like the site.  Don't see this option either.  Thanks. This is moving along.
    Google Font
  • Profile Image
    JotForm Support

    Answered by david on June 16, 2015 at 04:37 PM

    It is possible to import Google Fonts to your form.  Other fonts may be able to be imported but may require a different method.  However, this does take a slight bit of setup to accomplish.  Here is our guide on how to do so:

    http://www.jotform.com/help/100-How-to-Use-Google-Fonts-in-your-Form

    So to add Titillium Web to your form, you would use:

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

    .form-all {
        font-family : 'Titillium Web', sans-serif;
    }

     

    To change the margins for your first column, you can add this code:

    .form-line.form-line-column.form-col-1 {
        margin : 0px 0px 10px 10px !important;
    }

    Changing the highlighted value will change the left hand indentation for everything in the first column.  I also updated the rest to match the field positioning you desired.  Here is my updated copy with the font added and minor indentation made:

    http://form.jotformpro.com/form/51666129075964

  • Profile Image

    Answered by Kers101 on June 16, 2015 at 05:21 PM

    I inserted those 2 CSS functions  and unfortunately there is no response but the  iform is almost there. Just need to get it wider.

    Please take a look at the CSS. Is there something to change?

     

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

  • Profile Image

    Answered by Kers101 on June 16, 2015 at 06:31 PM

    Here is the finished page. It still would be nice to change the type face to Titilium Web

     and reposition the text in the boxes. Is that still possible?

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

    The nice thing about this form is that it works!!!!

     

  • Profile Image
    JotForm Support

    Answered by david on June 16, 2015 at 06:41 PM

    The font seems to only like to work in FireFox and not Chrome.  I can't seem to get it to work in both.  As for the indentation, adding this code seemed to line things up an indent on the left a bit:

    .form-line.form-line-column.form-col-1 {
        padding : 15px 10px 10px 40px !important;
    }

    Here is my updated copy of your form:

    http://form.jotformpro.com/form/51666759695981

    Left is FireFox, right is Chrome.  I can adjust the indentation more or you can clone it and adjust it in the designer if you'd like.

    I would recommend at least making your submit button a bit taller.  Some of your text is being cut off in your copy.

  • Profile Image

    Answered by Kers101 on June 16, 2015 at 07:10 PM

    I've lost my form. I clicked on it a couple of times  IN MY FORMS and it disappeared  can you please restore it to my forms?

    newsitecomment   or something like  that.

    THIS IS UNBELIEVABLE!

  • Profile Image

    Answered by Kers101 on June 16, 2015 at 07:27 PM

    Ohhhhit came back. What a scare!!

  • Profile Image

    Answered by Kers101 on June 16, 2015 at 09:15 PM

    Well I fine tuned it a bit. You can see it here  without any further revisions. I might try to get an equal distance on both sides. But that seems to go beyond by ability.

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

  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 17, 2015 at 01:02 AM

    Hello Kers101,

    Please inject the following custom css code in your form and that should solve your problem:

    .form-all {

      margin-left: -11px !important;

    }

    The following guide should help you on how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    The output of the above css code is displayed in the screenshot below:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 08:56 AM

    Thanks for helping on this. I tried your css using the guide you indicated but with no luck. I also get no response using the font input function from Google. (the Google font in the web site is "Titillium Web" )Perhaps if you look at the form set up you may see what's happening with it.  I'm not doing something right.

     

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

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

     

  • Profile Image

    Answered by Sammy on June 17, 2015 at 10:26 AM

    Hi

    Try setting the the font using the following CSS snippet

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

    body {
        font-family: "Titillium Web", sans-serif !important;
        font-weight: 200 !important;
    }

    to increase the text indentation withing the input boxes apply the following padding property on the input classes. Use the code snippet provided below

    .form-textbox,.form-textarea  {
        padding-left : 5px;
        padding-top:5px;
    }

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 02:23 PM

    What's happened to my form?  I entered the css and it skewed

     Padding was successful.

     

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

  • Profile Image
    JotForm Support

    Answered by david on June 17, 2015 at 02:39 PM

    It seems you may have added an extra "}" before the CSS that controls the position of the text area.

    Removing that bracket allowed for the text area field to be in the proper position once again.  Here is the form with just that bracket removed:

    http://form.jotformpro.com/form/51675533061958

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 03:10 PM

    Yes I see that thanks. It's looks better now. Any idea on how to import the "Titillium Web" into the form? We've got  the css for that but nothing is happening. Also on the site page the form has eased to far to  the left.  Haven't got a complete handle on the controls.  Please indicate what setting I use to get it centered

     

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

     

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 03:41 PM

     

    I got the centering OK. I can live with the type face for that form. Although it is really interesting solving these little issues.  They don't mean a lot in the present but could mean something in the long term especially when the issue is solved....I know you guys are the pros.

     

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

  • Profile Image

    Answered by raul on June 17, 2015 at 05:21 PM

    To use the font on every part of the form you can try using the * wildcard.

    So, this font would be used in the whole form. You can see a demo form here: http://form.jotformpro.com/form/51676249384971

    Let us know if this helps.

  • Profile Image

    Answered by Kers101 on June 17, 2015 at 10:26 PM

    The font Titillium Web is the default. There are just 2 things remaining.

    1. Make the letters bold white on the button (I do not see this working even though it is enabled)

    2. Make the 4 words in the fields black.(This is not working though enabled.)

  • Profile Image

    Answered by Kers101 on June 18, 2015 at 12:06 AM

    How do I get "Comment" black?

     

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

     

    Much appreciated...Jim

  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 18, 2015 at 12:11 AM

    Hello Kers101,

    Please inject the following custom css code in your form to change the font of submit button and hint text of form fields:

    button#input_2 {

      font-weight: bold !important;

    }

    ::-webkit-input-placeholder {

       color: black !important;

    }

    :-moz-placeholder {  

       color: black !important;  

    }

    :-ms-input-placeholder {

        color: black !important;

    }

    The following guide should help you on how to inject custom css code in from:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Kers101 on June 18, 2015 at 08:27 AM

    Changes are not updating using the CSS  you've supplied. You notice I've indicated the 2 font weight styles used in the form  (400 and 600) It partially works on the left side but not on the right column for some reason. Do I not have to be more specific about what should happen in that right text box?  It feels like so many Global statements have clouded the whole form landscape.

    Now after some bad  changes I've lost the Titillium style on the Design output even though it looks like  I've got the information correctly from Google..

  • Profile Image

    Answered by Ben on June 18, 2015 at 09:40 AM

    Hi Jim,

    Looking at this thread, it is no longer about the font only, but about many other little things.

    To have the font an all of your form elements, you should use the codes mentioned by my colleagues above:

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

    *, .form-all, textarea, input, button {
        font-family : 'Titillium Web', sans-serif;
    }

    That should make it work for all elements and it must be added at the bottom of all the other CSS code, not at the top.

    Inject Custom CSS Codes

    Then for specific elements, you can just change the font size.

    Now if you have any issues with some other segments like placeholder color and similar, we would be more than happy to help, but please open a new thread for each new issue.

    This is important since it allows you to go back to the specific thread you need in the future and makes it easy to properly help you.

    You can do that by going here: http://www.jotform.com/contact/

    Thank you for your understanding Jim.