Form review before submit

hello, i wonder if you can help me with one more thing:

is there a way to summarize what has been submitted on the form prior to the form being submitted so it can be reviewed for mistakes before they send it?

thank you!

Jennifer

You can add the Preview Before Submit widget to your form. In this way, the user can review the answers before submitting them.

Here's a link:https://www.jotform.com/widgets/preview-before-submit

Please try it and let us know if you have any questions. Thank you.

hi vincent, thanks this is wonderful!

i wonder though there are a couple of things i would like to change.

i would like to have consistent buttons in the preview  (so they match with the form)

-i would like the table to be the same as it is in the form

ive attached screenshots for your reference.

i hope you can also help with this! 

Hi,

Are you referring to this form? https://www.jotform.com/form/200776154909966

To make all the buttons the same style, please update your Form Designer Styling page and change all the buttons to the style you prefer. Here's a screencast guide:

Please try it and let us know if you need further help. Thank you.

hi vincent, you're right that is the form. 

i have already changed the formatting for the buttons for the whole and it's not working.   these ones  which aren't formatted correctly are within the preview and submit widget and i have tried but i cant figure out how to change them

is there a way to make this consistent with the form?

Hi,

I cleared your form cache on our server and I changed the button style.

Could you please check if the issue still persists? If yes, let us know what button are you referring to so we can check it further. 

Thank you.

hi there, now the buttons look good but the table inside the "preview and submit" widget doesnt match the formatting.   please see the attached screenshot for reference.

I see. Please add this custom CSS code:

#previewContainer .table-grid .table-col {

background: #262e3b;

}

.table-grid tr:first-child th {

border: 1px solid #eeeeee!important;

}

.table-grid th {

background: #252d3a;

}

#previewContainer .table-grid .table-head {

background-color: #262d3b;

color: #fff;

}

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

 

hi vincent, i've pasted this in and that table is still not formatting correctly, i'm not sure why its not working.

Hello @dominik479!

I would like to apologize for the inconvenience that you are experiencing.

After testing your form, I have found that the CSS entered is not working in the preview mode of your form. Please allow me some time to test your form further and I will reach out to you via this thread once I have found a solution.

Thank you for your patience, we will be in touch shortly.

thats no problem felipe, i appreciate your help!

Hi, 

Sorry for the confusion.

First, here's the cloned form that you can test: https://www.jotform.com/200866380073959

Please remove the last custom CSS code you added and replace it with these:

.table-grid tr:first-child th {

    border: 1px solid #ccc !important;

    background: #242c39 !important;

}

#previewContainer .table-grid .table-col {

    color: #555 !important;

    border: 1px solid #ccc;

    background: #242c39 !important;

}

#previewContainer .table-grid .table-head {

    border: 1px solid #ccc;

    background-color: #262e3b !important;

    color: #eee !important;

}

Please let us know if the color match to your form or if there's anything you want us to change. 

hi vincent, this works and it looks great however there are a couple of things more that if possible i would like to change

1remove the heading "select the total number of purchasers" from the preview and submit widget as per the first picture

2. change the reiview and submit button so it is the same as the back button but red instead of black

3 change the submit button inside the preview and submit widget so it matches the formatting  in request 1 (red)

thank you so much vincent, i really appreciate you helping me put the finishing touches on my form so it looks awesome :)

Hi,

Please check my demo form again: https://www.jotform.com/200866380073959

.form-buttons-wrapper button, .form-submit-preview * {

    vertical-align: middle;

    height: 40px;

    border-radius: 6px;

font-size: 13px;

    font-family: inherit;

}

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

    padding: 0!important;

    display: none;

}

.form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

    color: #ffffff !important;

    height: 29px;

    font-size: small;

    border-radius: 7px;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2e2e), color-stop(100%,#030303));

    padding-top: 5px;

}

Please try it and let us know if you need further help. Thank you.

thank you vincent i appreciate all your help with this form it looks perfect now! 

Jennifer