Is it possible to show an success overlay message after submitting the form?

Support
,
#1

Hello Team,

I’ve created a form and success page without problem on the link below:

I have a customer that will use Netlify Forms and they’re requesting an overlay message as a success message, instead of jumping to another page.

Is this possible?

Thanks!

Custom success message?
#2

hey there,

sorry to be slow to reply. Can you clarify a bit what you mean by overlay message? do you mean a modal?

maybe relevant:

#3

Hey I saw my post was linked so I’ll try and sum up what I did to get around this.

It this article https://docs.netlify.com/forms/setup/#success-messages it says you can redirect to a custom page on form submit. I simply redirected to a page called “success” and had a meta refresh tag that redirected again to a hashed url.

<meta http-equiv="refresh" content="0;URL='hire#success'" />

Then in javascript, on the page that I needed the content on, I used this:

<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('success');
// Check if URL contains the keyword
if( url.search( 'success' ) > 0 ) {
  // Display the message
  msg.style.display = "block";
}
</script>

This script basically looks for #success in the url and if it finds it changes the style of an element.
In your case you wanted a modal or an overlay so this can easily be done by adding the modal ID into this script.

Hope this works for you!

#4

Hi Kyle,

Yes, this is an example of what I was looking for, but what I’m not sure is how you refresh the page with the meta tag. Does this happen right after the user clicks the submit button on the form? Or is it refreshing the page every certain amount of time?

Thanks!

#5

Hi Perry,

Yes, I meant a modal. I saw Kyle’s response below and I’ve been trying but not sure how to use it.

Would that be the only way or is there another option?

Thanks!

#6

I’ll attach an example of the meta refresh tag I use. Just add this to the sucess.html for whatever page you have set for the form to take the user to then refresh it to a page with parameters in the url.

<meta http-equiv="refresh" content="0;url=http://example.com#-parameter-goes-here" />

if you need further help then ask.

1 Like