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

    Hto use the Text html field to achieve the opaque background, semi rounded border

    Asked by ChildrensChristianSchool on May 24, 2016 at 01:56 PM
    ID input 75, I need to know how I can get the text centered, or how to use the "text" html field to achieve the opaque background, semi rounded border with text centered. (Read Only) I'm open to suggestions.
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 24, 2016 at 03:10 PM

    You can add the CSS codes below to your form to achieve that. 

    textarea#input_75 {
        border-radius: 10px !important;
        text-align: center !important;
        opacity: 0.6;
    }

    Here's how it should look like after.

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by ChildrensChristianSchool on December 12, 2016 at 02:16 PM

    I had my form working perfectly but now the text in this box is no where, and it is supposed to be read only. 

    https://form.jotform.com/ChildrensChristianSchool/2016-2017

     

    +the buttons to go to external url have failed (I have them hidden and replaced temporarily)

    Please help!

  • Profile Image
    JotForm Support

    Answered by Mike on December 12, 2016 at 05:08 PM

    Since you have replaced the Text Area field with the Text HTML field, you can try the following.

    1) Wrap your text into a div with some ID.

    Example:

    <div id="opacityBox">
    <p style="text-align:center;">Text Here</p>
    </div>

    2) Then, add the CSS to your form.

    Example:

    #opacityBox {
    padding : 20px;
    background : rgba(204,204,204,0.6);
    border-radius : 10px;
    }

    Result: