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 inject custom CSS codes to the form and create ID for specific HTML elements

    Asked by cateringonline on April 23, 2013 at 07:12 AM

    Hi

    I have several text areas that need custom CSS. At present I create HTML free text areas & customise them from there. This is tedious as I need to apply the format globally across all my forms.

    I tried using inline css in the free text area which didn't work. I also tried injecting it in the "set-up & embed" section. that didn't work either. I must be doing something not right.


    I'd prefer if I can inject the code in the "set-up & embed" section.

    Here's one of the codes I tried:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #MenuName
    {color:#ff0000;font-family:helvetica; font-size:18;}
    </style>
    </head>

    <body>
    <p id="MenuName">Test Menu $8 Per Pax (Min 30 Pax)</p>
    </body>
    </html>

     

    Thank you

    create My Forms style size font
  • Profile Image
    JotForm Support

    Answered by EltonCris on April 23, 2013 at 09:54 AM

    @cateringonline

    Yes, it is possible to inject custom css codes to your form. Just use CSS codes only, example from your codes:

     

    #MenuName{

    color:#ff0000;

    font-family:helvetica;

    font-size:18;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    After that, use Free Text HTML Tool and paste the paragraph code on the HTML box found on the upper toolbar.

    If you need further clarification or help with the styles, just let us know. Thank you!