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

    Hide Certain Sections/Lables on the Preview Before Submit Page

    Asked by leon_wallace on August 20, 2015 at 02:37 AM

    With the "Preview Before Submit" Widget is there a way for it to only show the Questions with their Answers and hide all images/videos and all other text text from the form?

    Thanks.

    sections preview all preview before submi preview widget
  • Profile Image
    JotForm Support

    Answered by jonathan on August 20, 2015 at 03:29 AM

    There is actually an option for that in the Preview Before Submit Widget. 

    By using Collapse field (form Survey Tools), you can excluded sections on the form in the Preview page.

     

    You can test this form http://www.jotformpro.com/form/52312047873958 and see how it works.

    I see in your form https://www.jotform.com/51318929783871 that you were using Page Break fields instead... perhaps if you can re-design the form and use instead Collapse fields, then the option to exclude fields under the collapse will work.

    I will also do further test using a clone of your form and check how it will work.

    Hope this help. Let us know if you need further assistance.

     

  • Profile Image

    Answered by leon_wallace on August 26, 2015 at 08:04 PM

    Hi, I appreciate your suggestion but I don't know if it will allow me to achieve what I'm after.

    I want my form to hide all the images and extra text areas when your in "preview before submit."

    So that it simply only shows the actual questions with their answer.

    Making it nice and easy for someone to review without having to scroll through the whole form.

     

    Thankyou!

  • Profile Image
    JotForm Support

    Answered by Chriistian on August 27, 2015 at 04:19 AM

    Hi,

     

    I think we can achieve this by injecting a custom CSS code in your form that will hide the fields that you do not need to show on the Preview of the Form. I am currently checking the form to get the CSS needed. Please give me more time to further check this. I will get back to you as soon as I get the final CSS code for your form.

     

    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on August 27, 2015 at 05:04 AM

    Hi,

     

    Can you try to inject this custom CSS code in your form?

    #previewContainer li:nth-child(1), #previewContainer li:nth-child(2),

    #previewContainer li:nth-child(3), #previewContainer li:nth-child(4){

    display:none;

    }

    #previewContainer li:nth-last-child(2),#previewContainer li:nth-last-child(3){

    display:none;

    }

    #previewContainer .control_image {

    display:none;

    }

     

    To inject custom CSS code in your form, just follow the instructions provided in this article: How-to-Inject-Custom-CSS-Codes.

     

    After injecting the custom CSS code above, your form Preview would look like the screenshot below.

     

    Do let us know if you need further assistance.


    Regards.

  • Profile Image

    Answered by leon_wallace on September 02, 2015 at 02:28 AM

    Fantastic!!!

    Are you able to cut out the other text fields that explain the questions as well???

    eg. "1. Select what shape you would like to have your mock-up designed on"

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 02, 2015 at 04:07 AM

    Hi,

     

    Can you please try to inject the ff. CSS to see if this achieves what you are after?

     

    #previewContainer li > div.value.no-label {

        display: none !important;

    }

     

    Let us know if you need further assistance.

  • Profile Image

    Answered by leon_wallace on September 02, 2015 at 08:39 PM

    Yes! Thank you so much! Exactly what I was after!

     

    In the "preview before submit" can I increase the distance between the questions and answers so that they aren't so close together.

     

    Here is an screenshot of how mine looks.

  • Profile Image
    JotForm Support

    Answered by Boris on September 03, 2015 at 12:52 AM

    It can be achieved by adding the following CSS:

    #previewContainer li > .value {
        padding-left: 70px;
    }

    It will make the Preview appear like this:

    You can adjust the value from 70 pixels to any other spacing you wish to give to provided answers on the Preview page.

    Please let us know if you need further assistance.