CSS to change font size for all Paragraph questions in a form

  • Profile Image
    radialinternal
    Asked on January 20, 2022 at 04:33 PM

    We use the Paragraph form element in several places in a single form.

    What is the CSS to change the font size for ALL of the Paragraph form elements in that form?

    Thanks!



  • Profile Image
    Camila
    Answered on January 20, 2022 at 11:12 PM

    Hi Radialinternal,


    For your concern. Can you try to add this CSS code, Make sure to edit the name of the font on your desired font?


    .form-all {font-family : 'Name of the Font' !important;}

    .form-label { font-family: 'Name of the Font' !important;}


    Guide how to inject custom CSS codes: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/


    I hope it will help you, If you have any other concerns don't hesitate to inform us.


  • Profile Image
    radialinternal
    Answered on January 20, 2022 at 11:19 PM

    Thank you for replying. However, our question is not about changing the font for the entire form.

    We are asking specifically about how to change the font SIZE for all the PARAGRAPH form elements we use in the form - and ONLY the Paragraph questions/elements.

    Not ALL the questions, or ALL the form elements - specifically just the Paragraph question/form elements throughout the entire form.

    What CSS should we use?

    Thanks for your help.



  • Profile Image
    Camila
    Answered on January 21, 2022 at 12:28 AM

    Hi,


    Sorry for the misunderstanding. Kindly try to follow the code below.

    For your code. You can edit "20px" to your desired font-size.

    <p style="font-size: 20px; padding-left: 26px; color: #d3d3d3;">☑️ Step 1: Complete 360° Business Scan</p>

    <p style="font-size: 20px; padding-left: 26px; color: #d3d3d3;">☑️ Step 2: Enable Radial's Google access</p>

    <p style="font-size: 20px; padding-left: 26px; color: #d3d3d3;">☑️ Step 3: Schedule Strategy Kickoff Call (~2 mins)</p>

    <p style="font-size: 20px; padding-left: 26px;">🟦 Step 4: Activate&nbsp;Copilot Coaching Pass</p>

    Result:

    1642742681_61ea439957e5d_



    For example: I will edit the "20px" to 30px for Step 1 and Step 2

    <p style="font-size: 30px; padding-left: 26px; color: #d3d3d3;">☑️ Step 1: Complete 360° Business Scan</p>

    <p style="font-size: 30px; padding-left: 26px; color: #d3d3d3;">☑️ Step 2: Enable Radial's Google access</p>

    Result:

    1642742809_61ea441953dea_

    Let me know if its work for you, Thank you

  • Profile Image
    radialinternal
    Answered on January 21, 2022 at 11:41 AM

    Yes. We know how to add in-line formatting in HTML and do so routinely.

    My question asked for the CSS.

    Is there custom CSS that we can add to change font-size in ALL the Paragraph questions/form elements in a single form at once?

    If you are not familiar with how to do this, please escalate our question.

    Thank you.

  • Profile Image
    Camila
    Answered on January 21, 2022 at 12:07 PM

    Hi Radialinternal,


    Kindly try to follow the CSS code below.

    p { font-size: 14px !important; }

    span { font-size: 14px !important; }


    I hope it will help you, If you have any other concerns don't hesitate to inform us.


  • Profile Image
    radialinternal
    Answered on January 21, 2022 at 12:38 PM

    Please escalate this question to a supervisor. I appreciate your help but feel that we are not making progress answering this question.

    I am concerned that the only CSS tag or selector shown in your recommended code snippet is <p>.

    Is this really going to modify ONLY the Paragraph question type?

    For example the Fill In The Blank question type uses the <p> selector. But we don't want to change font sizes for p tags in that question type.

    To clarify we want only to change the Paragraph question type/form element. See screengrab below.

    1642786590_61eaef1e64dff_

  • Profile Image
    Camila
    Answered on January 21, 2022 at 01:49 PM

    Hi Radialinternal,


    Apologies for the inconvenience. I will coordinate this and will get back to you as soon as possible.


    Thank you

  • Profile Image
    radialinternal
    Answered on January 21, 2022 at 04:26 PM

    No worries, we'll watch this thread for an updated answer with custom CSS instructions, if indeed it's possible to do what we described.

    Thank you.

  • Profile Image
    Lorenz
    Answered on January 21, 2022 at 09:33 PM

    Hi there,

    We apologize for the inconvenience.

    Kindly please inject the CSS code into your form, to change all paragraph's font sizes.

    .form-line[data-type=control_text] span {

      font-size: 18pt !important;

    }

    You may change the font size according to your requirement.

    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    Let us know if you need any further assistance.