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

  • Profile Image
    Charlesobi
    Asked on August 11, 2017 at 09: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

  • Profile Image
    John_Benson
    Answered 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:

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

  • Profile Image
    Charlesobi
    Answered on August 12, 2017 at 08: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.

     

     

  • Profile Image
    Charlesobi
    Answered on August 12, 2017 at 08: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.

  • Profile Image
    BJoanna
    Answered on August 12, 2017 at 09: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. 

    Then hide the Text field with this CSS code:

    #text_59 {

        display : none;

    }

    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.

  • Profile Image
    Charlesobi
    Answered on August 13, 2017 at 10:27 PM

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

  • Profile Image
    ashwin_d
    Answered on August 14, 2017 at 02: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!