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

    Lightbox Title Size

    Asked by buildware on October 05, 2011 at 12:41 PM

    Hello

     

    I am looking to make the form titles larger.  Whats the correct css tag to use to do this?

    Page URL:
    http://constructionwebs.com/

    Screenshot
    lightbox title size
  • Profile Image
    JotForm Support

    Answered by mliz on October 05, 2011 at 01:32 PM

    Hi,

    In the Inject Custom CSS you may use the following code to modify the form title.

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea


    .form-header
    {
      font-size: 30px;
    }

    You can change the value for the font size according to your needs.

    Hope this helps.

  • Profile Image

    Answered by buildware on October 06, 2011 at 05:26 AM

    Hi there...

    So I did what you suggested.  Saved the file and then went back to the site, and refreshed.  Nothing changed/updated.  Suggestions?

  • Profile Image
    JotForm Support

    Answered by joeyj01 on October 06, 2011 at 05:46 AM

    Hi,

    We do not display titles on our forms the screenshot you gave is from the preview of the form but on live, you do not see the title. You should use headers to replace that. Please put a header and inject the css code what Mliz provided. That will do the trick.

    Thank You.

  • Profile Image

    Answered by buildware on October 06, 2011 at 10:28 AM

    Joey/Mliz...

     

    Thanks for the information.  I think it's the Lightbox I'm using that I need to administer?  I added the header as you suggested, updated the form in my template.  I then ended up with the "Questions?" (small in the green area) and then another "Questions?" (large header in the main form area).

     

    I appologize if my questions are confusing.  I've not worked with jotforms much in the past and the site itself is new to me, so I am still trying to get my barings.

  • Profile Image
    JotForm Support

    Answered by abajan on October 06, 2011 at 11:14 AM

    Buildware, please see this thread. Incidentally, Times New Roman has serifs. So, it doesn't belong to that font-family. Nevertheless, the information provided by our colleague Neil is still quite useful for your purposes.

    Please also see the following links:

    CSS font-family property
    The Myth of 'Web Safe' fonts

  • Profile Image

    Answered by antoniooi on April 16, 2012 at 02:55 PM

    I just tried the following but not working:

     

    .form-header

    {

      font-size: 30px;

    }

     

    Neither this will work:

    .form-header

    {

      font-size: 14pt;

    }

    Nothing reflect on my form: http://form.jotform.me/form/21034962338452

  • Profile Image
    JotForm Support

    Answered by abajan on April 16, 2012 at 04:41 PM

    @Antonio

    That form has no heading. It just has a title in the form builder. Please do the following:

    1. Load the form into the form builder and click Heading (Form Tools menu)

    2. Click & drag the newly inserted heading to the top position (or right-click it and when the menu pops up, click Move Up repeatedly until it is correctly placed)

    3. Click the form's title ("In-house Training Reuqest for GK Lim") to select it and then copy it [Ctrl+C] to your clipboard

    4. Click the heading's text to select it and then hit [Ctrl+V] to replace "Click to edit this text..." with "In-house Training Reuqest for GK Lim" 

    5. Save the form and preview it

    6. If the heading's text is too big, close the preview, click the heading and then the Heading Size button, select Small and save the form. (Conversely, the text is too small, select Large and save the form)

    7. If none of the three sizes offered by the form builder is suitable, you will have to inject the following CSS to override the default, adjusting the declaration's value and/or unit (14px) to your preference:

    .form-header-group {
    font-size: 14px;
    }


    If the form is embedded as a lightbox, there's no need to insert a heading. Just follow the instructions provided by our colleague Neil in the thread titled Where can I change the code to edit the font size of the Lightbox Title? to which I earlier referred.

    If you need further assistance, please let us know.

  • Profile Image

    Answered by antoniooi on April 16, 2012 at 04:52 PM

    Ya, just saw his solution. Wouldn't that his solution may potentially overwrite my other existing HTML style with the same structure:

    div div div table tbody tr td

    ? Yes, you're right, as shown in the initiator's screenshot, I just want to change the lightbox title only. I can't afford to insert another header into my lightbox as it has too limited spaces left. But the solution suggested by your colleague is a bit risky though.

     

  • Profile Image
    JotForm Support

    Answered by abajan on April 16, 2012 at 05:00 PM

    To be honest, I figured the same thing when I first saw it some months ago but I haven't yet had any problems with conflicting styles. (Of course, my websites are very basic, barebones test sites for JotForm forms.)

    Why not give Neil's solution a try? It can't damage your site in any way. The worst that can happen is that it will conflict with the other styles. If it does, just remove it. There's nothing to loose.

  • Profile Image

    Answered by antoniooi on April 16, 2012 at 05:09 PM

    If you guys could give your lightbox a top level css class name, that would be safe to all your users and your future support too:

    div.jotFormLightbox {

       /* Your default style goes here */

    }

    div.jotFormLightbox div div table tbody tr td {

       /* User defined style goes here */

    }

     

  • Profile Image
    JotForm Support

    Answered by abajan on April 16, 2012 at 05:12 PM

    Seems like a reasonable suggestion to me. I'll submit the request to our Tier 2 team.

  • Profile Image

    Answered by antoniooi on April 01, 2013 at 05:39 PM

    Any update for this? I really need to replace your default font-family Verdana to something else.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 01, 2013 at 06:52 PM

    @antoniooi,

    Are you using the new lightbox embed code we had? It's has this on the src attribute http://cdn.jotfor.ms/static/feedback2.js?3.1.2465 which uses Verdana on the Lightbox Title and it has a separate class.

    I would suggest to retake again your lightbox embed code and re-embed it to your page. Thank you!

  • Profile Image

    Answered by antoniooi on April 01, 2013 at 07:49 PM

    Hi Elton,

    Thanks for the reply. No, I'm using the old code; but I did notice that the jt-title class does appear in the code even though I'm using the old code. But I thought the font-family will only be generated during execution time? Can I do something like this in your CSS injection section:

    div.jt-title {
    font-family: 'Other Font Name';
    }

    Please let me know if this will work. Thanks.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 01, 2013 at 07:59 PM

    Hi,

    Yes, that works. 

    .jt-title { font-family: Times New Roman; } will also work.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 01, 2013 at 08:14 PM

    @antoniooi

    I just would like to clarify, it will work unless you added !important. Example:

    <style type="text/css">

    .jt-title {

    font-family: Times New Roman !important;

    }

    </style>

    Make sure to add it on the head tag of your page between <style> tags or you can wrap them your self just like the codes above.

    Thank you!