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 can I change the Background Colour of a Free Text / HTML field?

    Asked by cgnz on May 24, 2012 at 04:30 AM

    I would like to change the Background colour of a Free Text / HTML field to a colour other than the main background colour of the form.

     

    Is this a setting I should be setting on the HTML field itself or is it a CSS injection to put in form preferences.

     

    Apologies for the question as I am sure it is straightforqard but after an hour of smashing into it and unable to make tio work thought I would chick it out there.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by jonathan on May 24, 2012 at 04:58 AM

    Hi cgnz, 

    You can do it in the "Edit HTML Source" button (blue HTML).

    You can add a [div] or [p] tag to change back color.

    something like this... I changed it to red

    <p style="background-color: #ff0000;"><span style="background-color: #ff0000;">Click to edit this text...</span></p>

    Hope this help. Please inform us should you have further inquiry.

    Thanks.

  • Profile Image

    Answered by cgnz on May 24, 2012 at 05:09 AM

    Hi.

     

    Now. I for one know this is an HTML novice showing their stripes so I apologise in advance.

     

    I have put code in but totally know it is in wrong place. If I wanted the whole HTML box to be red, where would i put the bit of code you sent me.

     

    Honestly feel privelidged to be helped the way Jotform does as I know it is not cricket (sorry.....you prob don't get this reference.....I am from NZ where we say this is reference to the game!) trying stuff without a clue.....

     

    Albeit....I am getting much better and fast!

     

    <p style="background-color: #ff0000;"><span style="background-color: #ff0000;"><span style="font-size: xx-large; color: #000000;"><strong><span style="line-height: 115%;">The Service Desk can log jobs for you 7am to 7pm Monday to Friday.</span></strong></span></span></p>

    <p class="MsoNormal"><span style="color: #ff6600;"><strong><span style="font-size: 22pt; line-height: 115%;">How do I do it?</span></strong></span></p>

    <p><strong> </strong></p>

    <p class="MsoListParagraphCxSpFirst" style="text-indent: -18.0pt; mso-list: l2 level1 lfo1;"><strong><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">Call 0800 000 211 to log a job via phone.</span></strong></p>

    <p><strong> </strong></p>

    <p class="MsoListParagraphCxSpLast" style="text-indent: -18.0pt; mso-list: l2 level1 lfo1;"><strong><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">Email"mailto: auckland.servicedesk@gen-i.co.nz) to log a job via email.</span></strong></p>

    <p><strong> </strong></p>

    <p class="MsoNormal"><strong><span style="color: #ff6600;"><strong><span style="font-size: 22pt; line-height: 115%;">Details:</span></strong></span></strong></p>

    <p><strong> </strong></p>

    <p class="MsoNormal"><strong><span style="font-size: 22.0pt; line-height: 115%;">Please ensure you have all details ready for the service desk agent including:</span></strong></p>

    <p><strong> </strong></p>

    <p class="MsoListParagraphCxSpFirst" style="text-indent: -18.0pt; mso-list: l1 level1 lfo2;"><strong><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">Customer Name / End User</span></strong></p>

    <p><strong>

    <p class="MsoListParagraphCxSpMiddle" style="text-indent: -18.0pt; mso-list: l1 level1 lfo2;"><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">Who to contact and how.</span></p>

    <p class="MsoListParagraphCxSpMiddle" style="text-indent: -18.0pt; mso-list: l1 level1 lfo2;"><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">Urgency of the job</span></p>

    <p class="MsoListParagraphCxSpLast" style="text-indent: -18.0pt; mso-list: l1 level1 lfo2;"><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">As many details as possible of what needs to be done</span></p>

    <p class="MsoNormal"><span style="color: #ff6600;"><strong><span style="font-size: 22pt; line-height: 115%;">What will happen</span></strong></span></p>

    <p class="MsoListParagraphCxSpFirst" style="text-indent: -18.0pt; mso-list: l0 level1 lfo3;"><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">You will be provided with a job Number.</span></p>

    <p class="MsoListParagraphCxSpLast" style="text-indent: -18.0pt; mso-list: l0 level1 lfo3;"><span style="font-size: 22.0pt; line-height: 115%; font-family: Symbol; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol;">&middot;<span style="font-family: 'Times New Roman'; font-size: 7pt; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style="font-size: 22.0pt; line-height: 115%;">you can track the progress of your job at this location here.</span></p>

    </strong></p>

    <p>&nbsp;</p>

  • Profile Image
    JotForm Support

    Answered by jonathan on May 24, 2012 at 05:51 AM

    Hello  cgnz,

    Here's how I modified the background.

    I put this code

     

     

    <div style="background-color: #ff0000;">

    <p>TEST TEXT</p>

    <br /> <br /> <br /> <br /> <br /> <br />

    </div>

     

    As you can see I added a few [/br] break to expand the height. In html, some browser will not read empty spaces, it will compact the page.

    Just inform us if you still need further assistance. We are always here to assist you. =)

     

     

  • Profile Image

    Answered by cgnz on May 24, 2012 at 06:55 PM

    Awesome.

     

    Appreciated

  • Profile Image
    JotForm Support

    Answered by jonathan on May 24, 2012 at 07:14 PM

    Glad it works. =)

    Feel free to contact us again anytime should the need arises for assistance on JotForm.

    Thanks.