How to customize the text in Short Scrollable Terms Widget?

Hello,

Can someone help me inject some custom CSS into my Short Scrollable Terms widget? I'm trying to make the following customizations using code:

1. The scrollable text should be in a Times New Roman font style;
2. The Terms & Conditions line should be bold, center-aligned, and in a Times New Roman font;
3. The first line of each term should be bold;
4. The checkbox should be slightly below the content in the textbox and not obscuring it;
5. The checkbox description should read "By checking this box, I agree to the terms & conditions."

Any recommendations would be appreciated. Thank you so much for your time and advice!

Hi imccauley,

Thanks for reaching out to Jotform Support. You can achieve your desired customization for your Short Scrollable Terms widget using custom CSS code. Let me walk you through it:

First, we will modify the content, so the CSS will work on it.

1. First, copy this code:

<span><b class="title">Terms and Conditions</b><span><br />

1.	<b>Designation of Responsible Party</b>

The individual or entity completing and submitting this Burial Request Form (hereinafter referred to as the “Responsible Party”) shall be deemed legally and financially responsible for all costs, fees, and charges associated with the requested burial services.

2.	<b>Prerequisite for Scheduling of Burial Services</b>

The scheduling and confirmation of any burial service is expressly contingent upon the prior receipt of a fully completed and duly executed Burial Request Form by the cemetery administration. No burial date shall be reserved, held, or confirmed until this condition has been satisfied in full.

3.	<b>Guarantee of Payment Requirement</b>

A valid and verifiable guarantee of payment must be provided by the Responsible Party prior to the confirmation of any burial date. In the absence of such guarantee, the cemetery shall consider the requested date of service null and void, and shall not be obligated to reserve or hold said date.

4.	<b>Right to Reschedule or Decline Services</b>

The cemetery reserves the right, at its sole discretion, to reschedule, postpone, or decline to provide burial services in the event of:

a. Non-receipt of a completed Burial Request Form;

b. Failure to obtain a guarantee of payment;

c. Inclement weather or other acts of God;

d. Operational limitations or unforeseen circumstances; or

e. Non-compliance with cemetery rules, regulations, or religious protocols.

5.	<b>Cancellation and Modification Policy</b>

Any request for cancellation or modification of scheduled burial services must be submitted in writing by the Responsible Party no less than 48 hours prior to the scheduled service. The cemetery reserves the right to assess administrative fees for cancellations or modifications made after this deadline.

6.	<b>Religious Service Coordination</b>

The cemetery shall make reasonable efforts to accommodate religious rites and customs in accordance with Catholic tradition. It is the responsibility of the Responsible Party to coordinate with clergy or other religious representatives in advance of the scheduled service.

7.	<b>Acknowledgment and Agreement</b>

By signing and submitting this Burial Request Form, the Responsible Party affirms that they have read, understood, and agreed to be bound by the foregoing Terms and Conditions. The Responsible Party further acknowledges that failure to comply with these Terms and Conditions may result in the denial or delay of burial services.

8.	<b>Right to Amend Terms</b>

The cemetery reserves the right to amend, modify, or update these Terms and Conditions at any time, without prior notice, as deemed necessary to reflect changes in policy, procedure, or applicable regulations.</span></span>

2. In Form Builder, select the Short Scrollable Terms widget, and then click on the Wand icon on the right side of it.

3. Under the General tab, paste the code into the Content box.

4. Click on Update button to save it.

Now, we will update the CSS code in the widget.

1. First, copy this code:

#scrollContent .title {

 display: block;

 text-align: center;

 font-weight: bold;

font-size: 20px;

margin-bottom: -20px;

}



#scrollContent {

 font-family: "Times New Roman", serif;

 font-weight: normal; /* Ensure the whole container is not bold */



}



#scrollContent b {

 font-weight: bold; /* Bold only the b element */

}



#main{

position: relative;

}



.slimScrollDiv{

position: absolute;

top: 0;

}



#action{

position: absolute;

top: 102%;

}

2. Open your form in Form Builder, scroll down, and select the Short Scrollable Terms widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

Check out my results in the screencast below:

You might also want to check out this guide about How to Inject CSS Codes to Widgets.

Give it a try and let us know if you need any other help.