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

    Problems with scroll bars...

    Asked by paititi on February 10, 2014 at 09:29 PM

    I followed the directions on how I insert my release form into a scroll bar box from the followig tread:

    http://www.jotform.com/answers/173287-How-can-we-add-a-Accept-Terms-and-Conditions-check-box-and-make-Terms-and-Conditions-a-link

    I basically just used the same code and it seems to be working when i preview the form which you can see here:

    http://form.jotformpro.com/form/33167136923960

    BUT when the form is embeded into our website using the wordpress embed features the scroll box does not work and the sumbitt button is hidden in the middle of the release form copy which you can see here:

    http://www.paititi-institute.org/event/embodying-true-nature-consciousness-transformation-retreat/

    Another thing I noticed is everytime i go back into my text box clicking edit, it seems like the html that I pasted there disappears and is no longer visible. Everytime I edit the copy i repast the html. Seems like that should not be nessasary.

    ALSO, i am interested to know what the added code would be to add a think rule around the scroll bar box.

    Any suggestions on how to resolve this would be great.

    Thank you

    Cynthia

     

    Page URL:
    http://www.paititi-institute.org/event/embodying-true-nature-conscious<br/>ness-transformation-retreat/

    scroll JotForm hidden preview check
  • Profile Image

    Answered by Cesar on February 10, 2014 at 09:48 PM

    There appears to be some sort of conflict when the form is rendered on your page. I would advise to kindly try embedding the form utilizing the iFrame Method instead. This should help avoiding conflicts. 

    If possible, do try it out, and let us know if the issue persists. Thank you. 

     

    Related Article:
    Getting-the-Form-iFrame-Code 

  • Profile Image

    Answered by paititi on February 10, 2014 at 10:11 PM

    Thanks, I replaced the script with the iframe and it seems to work now :)

    One more question: could you tell me what I would need to add to the script in order to put a thin rule around the scroll bar box? I feel it would be more clear that it is a scroll box if there where a box of some sort around it.

     

    Thanks again

  • Profile Image

    Answered by Cesar on February 10, 2014 at 10:28 PM

    Kindly try injecting the following code:

    #text_40{
    border-style:solid;
    border-width:1px;
    }

    This should render a frame around the text box. Do let us know if you need further assistance on this. Thank you.

     

    Related Article:
    How-to-Inject-Custom-CSS-Codes 

  • Profile Image

    Answered by paititi on February 10, 2014 at 10:58 PM

    I did it as kindly as i could but it does not seem to be working for me :)

    I am not a programer so it would help if I could see it inside the full code. This is what I did below. Basically took the code from the earlier tread and inserted teh code you sent at the end...

     

    <div style="height: 300px; width: 550px; font: 16px/26px Georgia, Garamond, Serif; overflow: scroll;
    #text_40{
    border-style:solid;
    border-width:1px;
    }">

    text from my form

    </div>

  • Profile Image

    Answered by Cesar on February 10, 2014 at 11:24 PM

    If you are directly editting the source code of your form. Then would only need to add the following (bold) parameters to the div.

     

    <div style="height: 300px; width: 550px; font: 16px/26px Georgia,
    Garamond, Serif; overflow: scroll; border-style:solid; border-width:1px;">

    </div>


    On the othrer hand, If you are injecting the code within the Form Builder, then you would use the code on my previous post. With the instructions on the linked guide (How-to-Inject-Custom-CSS-Codes

    If you need further asssistance. Do let us know. Thank you.

     

     

  • Profile Image

    Answered by paititi on February 11, 2014 at 03:56 PM

    Thank you for the great support :)