How can I hide a lot of text that is only revealed when words are clicked?

  • Profile Image
    MartyG
    Asked on April 09, 2011 at 12:24 PM

    How can I create "Terms & Conditions" text (about 4,000 characters, or 700 words) that is hidden until my client clicks underlined words on the Jotform to reveal the text, then once this text is read, the client must click a check box signifying they have read and agreed to the text? Example:

    o By clicking this box, you confirm you have read and agreed to this order's Terms & Conditions

     

     

  • Profile Image
    NeilVicente
    Answered on April 09, 2011 at 01:14 PM

    Hi,

    I have an easier solution for this. You can instead add a link to the underlined text that opens a new window with the terms of agreement in it. Take a look at this Sample Page I have created. Feel free to clone that form and inspect the html code I have inserted on the agreement field.

    Hope this helps. Let us know if you have further questions.


    Neil

  • Profile Image
    MartyG
    Answered on April 09, 2011 at 06:30 PM

    Neil:

    Thanks for your response. I do not have much experience dealing with HTML coding. Also, all I need to add to my existing Jotform form is a CheckBox and a link to my Terms & Conditions. Can you give me step-by-step instructions that explains 1) the names of each JotForm tool I need to use (and in which "Tool" dropdown list I can find it), and 2) how I can use the HTML coding the way you set up you form? Thanks again.

    Marty


  • Profile Image
    abajan
    Answered on April 09, 2011 at 09:30 PM

    Hi Marty

    Please have a look at this thread and let us know if it helps to make things any clearer. Incidentally, to achieve a field like mine in this form, insert a "Check Box" field into your form and while on the "Properties: Form" tab, click "Options" and replace the text with that shown in this screenshot. (Of course, http://www.your_website_here is not a real website and it will need to be replaced with the actual URL of the page containing your terms of service agreement.)

    You may also notice four dots (....) showing up on your form to the left of the check box. To get rid of them, replace the text "Click to edit" with a space and save your change.

    ~ JotForm Support

  • Profile Image
    MartyG
    Answered on April 10, 2011 at 12:36 PM

    Abajan:

    Thanks! You solved my problem. I have one more question: What are the step-by-step procedures to put the required red required asterisk "*" either to the left of and almost touching the checkbox, or the right of the word "conditions" at the end of the sentence, as follows (the best I've been able to do is to put the "*" so it's about 1/2 an inch above the check box):

    * o Click to confirm you have read the terms and conditions.

    OR:  o Click to confirm you have read the terms and conditions.* 

  • Profile Image
    abajan
    Answered on April 10, 2011 at 05:39 PM

    Hi again MartyG

    To get the Terms and Conditions field to look like that shown below,

    do this:

    1. With your form opened in the form builder, click the "Terms and Conditions" field

    2. Remove the four dots preceding the asterisk by replacing "Click to edit" with a space

    3. Click the "Label Align" button in the toolbar and select "Right" from the four options

    4. Click the "Options" button in the toolbar and edit your text to include an HTML break tag as indicated by the red arrow. Also note that the space previously preceding the closing anchor tag now follows it. This tidies up the appearance of the link:

    5. Click "OK"

    6. Click the "Setup & Embed" toolbar tab

    7. Click "Preferences"

    8. Click the "Form Styles" tab in that dialog box

    9. In the box to the right of "Inject Custom CSS" type the following:

    10: Click "Close Settings" and save your changes

     

    That's it! One thing to note: I have noticed that the "Save" feature seems to be working very slowly today. Also, it might be better to save after each change rather than just once in step 10.

    I am glad my previous suggestions were helpful. Hopefully these latest instructions also work.

    P.S. I thought that moving the space from before the closing anchor tag, as described in step 4, would have tidied up the appearance of the link (by preventing the underline from extending beyond the word "here") but for some reason it didn't work.

  • Profile Image
    MartyG
    Answered on April 12, 2011 at 11:07 PM

    Abajan:

    Thanks for your response. Unfortunately, it did not work. The red asterisk indicating a required field for my "Terms & Conditions" field still remained about 1/4 inch above the check box. Thanks for trying.

    Marty

  • Profile Image
    NeilVicente
    Answered on April 13, 2011 at 12:00 AM

    @Abajan great tutorial you have there

    @MartyG

    I looked over your account and into your form and I see that you did not insert a <br/> in your checkbox option, the one with <a target="_blank" href=""

    You need to insert the <br/> in order to break the text so that it won't take up the whole line space and the red asterisk will have room to stay together with the checkbox.

    I have taken the liberty of modifying your form according to Abajan's instructions. Take a look at if it suits your needs.

    Here is the change I made:

     

    Hope that helps. Let us know if you have other issues.