Hello all, I have a request for a way to do both a thank you message and a redirect.
Use case is simple. I have a form to upload packing lists. My users have many packing list to upload. Right now, I put a hyperlink in the thank you message that lets them open the form again to submit another one. This process however opens a new tab. Next thing you know, my user has 10 plus tabs open in their browser.
Is there a way to have the page reload the Form and also show either a snack bar message or something on the screen to confirm that there upload was completed?
When I set the Redirect to website to the URL for the Form, it feels like the submission fails. The site reloads with all the data they entered empty.
Anyone else have a good solution for this? Thank you.
Question
Question
Forms Redirect to website with a confirmation message
Replies
Not exactly what you're looking for, but we added an HTML spinner to the page that displays briefly before the page reloads. This was added to give a visual queue that something actually happened after clicking Submit, because otherwise, the reload was so instantaneous it was somewhat confusing for the user. (our form initiates requests for incoming staff to submit their vaccination records, and process several of these in a row)
HTML:
<div class="container">
<div class="centered">
<img id="loadingSpinner" src="https://i.imgur.com/SBewWvg.png"><br><br><br><br><br>
<p id="iconHeader">Submitting form...</p>
</div>
</div>
CSS:
.fa-spin {
font-size: 2em;
}
#iconHeader {
width: auto;
color: white;
font-weight: 700;
font-size: 18px;
}
#loadingSpinner {
animation: rotation 3s infinite linear;
width: auto;
}
#logo {
width: auto;
margin-left: -25%;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgb(2,0,36);
background: -moz-linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(65,32,110,1) 49%, rgba(120,92,169,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(65,32,110,1) 49%, rgba(120,92,169,1) 100%);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(65,32,110,1) 49%, rgba(120,92,169,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#785ca9",GradientType=1);
z-index: 500 !important;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You could edit the HTML of your Thank You message and tweak the link so that it doesn't open as a new tab. There should be a value in the anchor tag like this: target="_blank" that is what tells it to open the link in a new tab/window. If you remove that, the link will open in the current tab/window.
Thanks Matthew. Right after I made this post, that was the first thing I tried.
I think it would be a handy feature to have in Forms though. A way to reload the same Form with a confirmation message so that people can do multiple submission seamlessly.
I like that idea too.