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

    Make automated input appears as part of form and not text box.

    Asked by KeyshaunSmith on March 02, 2016 at 09:38 AM

    In my form there are many parts in which I use calculations from other parts of the form and place the calculated value into a text box later on in the form, I set that text box as read only so the respondent can not edit that information. Is there anyway to make that information appear as just plain text, without the text box around it. so that it appears cleanly simply as part of the form?

     

    Thanks!

    Page URL:
    https://form.jotform.com/60494732099161

    change textbox style custom css textbox appearance
  • Profile Image

    Answered by Huberson on March 02, 2016 at 12:38 PM

    If what you need is simply changing the appearance of the information passed to the Textbox, here is a workaround you can try:

    1- Set the Textbox field that receive the passed value to 'Read-only' and go to its properties to find the field ID 

    2- Using the field ID, Inject the following CSS snippet to the form and change the background property value according to the form style. 

    #input_4 {

        border : none!important;

        padding : 0;

        margin : 0;

        background-color : #ccc;

        -webkit-box-shadow: none;

        box-shadow: none;

    Note: #input_4  ID is for this specific DEMO. You should find the field ID following the step above.

    For example in this DEMO, I changed the populated Textbox field background color to be the same one applied to the form. 

    To find the background color of the form use the web inspector tool that comes with all modern browsers.

    Here is an example using Google Chrome Inspector:

     

    Do let us know if this help. Also contact us anytime if you need more assistance.