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

    Change Print Summary image to use css and google font

    Asked by photoguy123 on January 05, 2016 at 11:33 PM
    i would very much appreciate if you could show me how to change that image saying "Print Summary" to just use css and a google font. currently it's a larger jpg file. it seems to scale alright currently. the problem is i can't change all my headers easily if they're all individual images. thank you so much.
  • Profile Image
    JotForm Support

    Answered by Chriistian on January 06, 2016 at 01:35 AM

    Hi,

     

    To change the Header Image you have used in your form to a regular Text so you can easily edit the design of the header, just follow the instructions below.

    1. Add a Text field in your form. This will serve as your Header. 

    2. Modify the Text as desired.

    3. Import the Google Font you need. For more information, you can check this article: How to Use Google Fonts in your Form.

    4. Add custom CSS code in your form to implement the font and add background.

     

    Example:

    Import Google Font CSS code

    @import url(https://fonts.googleapis.com/css?family=Indie+Flower);

     

    Custom CSS code to design and implement the Font to the Text Field

    #text_354 {

        background: orange;

    }

    #text_354 p {

     font-family: 'Indie Flower', sans-serif;

    }

    Indie Flower is the Google Font that I have imported in the form and I have set the background to orange. Here is the sample form that I have used for testing: https://form.jotform.com/60050810623947.

    Note: In the CSS code that I have provided, I have only implemented the changes on the specific Text field. If you want to have the same design in all of your Text Field, you can replace #text_354 to .form-html in your custom CSS code.

     

    Do let us know if you need further assistance.
    Regards.