How can I add Title to the "Preview Before Submit" widget

  • Charlesobi
    Asked on August 11, 2017 at 9:39 PM

    I want to add a title to "Preview Before Submit" Widget before the preview.

     

    Something that goes like this;

    Thanks for your time; please go through your answers before submitting

    _______________________________________

    _______________________________

    _____________________________________

    ______________________

    (Where the lines are the review of the answers)

     

    Please, how do I go about this? Thanks, hoping for your helpful reply

  • John_Benson
    Replied on August 11, 2017 at 10:40 PM

    To add a text in the Preview Before Submit widget page, please inject this Custom CSS Code to your form:

    div#checkSubmission:before {

      Content: "Thanks for your time. Please go through your answers before submitting.";

    }

    To add a Custom CSS Code to your form, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can test my demo form on this link: https://form.jotform.com/72228142505954

    Here's the result:

    How can I add Title to the Preview Before Submit widget Image 1 Screenshot 20

    I hope this helps. If you have questions, please contact us again. 

  • Charlesobi
    Replied on August 12, 2017 at 8:27 AM

    Ok, thanks, that was helpful. 

    But I found out that the title is too close to the top and the font is too small.

    1. How can I add Margin to the top before "Thanks for your time. Please go through your answers before submitting."?

    2. Also, how can I increase the font size too?

    Thanks for your assistance so far.

     

     

  • Charlesobi
    Replied on August 12, 2017 at 8:53 AM

    In addition to that, I just found out that the write up appears at the footer of each of the form's page before the page it's meant to appear as can be seen in the attached picture.

    How Can this be rectified?

    Thanks.

    How can I add Title to the Preview Before Submit widget Image 1 Screenshot 20

  • BJoanna
    Replied on August 12, 2017 at 9:58 AM

    I was able to see mentioned issue. The custom text is shown at the bottom of the each page. 

    Instead of adding the Custom CSS code for the 'Thank you' message, I would suggest you to add a Text field at the top of your form and add your 'Thank you' message there. 

    How can I add Title to the Preview Before Submit widget Image 1 Screenshot 30

    Then hide the Text field with this CSS code:

    #text_59 {

        display : none;

    }

    How can I add Title to the Preview Before Submit widget Image 2 Screenshot 41

    Here is my demo form: https://form.jotformpro.com/72234427449964 

    Feel free to test it and clone it

    Hope this meet what you are looking for.

  • Charlesobi
    Replied on August 13, 2017 at 10:27 PM

    Ok, thanks. BJoanna that was helpful. I have done that.

  • Ashwin JotForm Support
    Replied on August 14, 2017 at 2:02 AM

    Hello Charlesobi,

    1. How can I add Margin to the top before "Thanks for your time. Please go through your answers before submitting."?

    Please inject the following custom css code to add top margin before the preview message:

    .value.no-label {

        margin-top: 35px !important;

    }

     

    2. Also, how can I increase the font size too?

    Please inject the following custom css code to increase the font size:

    .value.no-label span {

        font-size: 20px !important;

    }

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!