I have created a redirect page for the user to be sent to once the form is submitted. Browsers seem to be detecting this as a pop up and just sending them back to a new form. Is there a way around this?
I am having this exact problem. Am trying to redirect to another airtable form and the first form reloads. Anyone have any ideas?
Also having this issue :frowning:
Is there anyway to hook into the onSubmit event of the form? Perhaps then we could handle the redirect ourselves. Given that the form is within an iframe, I’m not sure how.
“Duh” factor (I just placed a support request on this myself!)
You’re in a frame, looking at a form. The form redirects to a WordPress page. BUT: That page is going to load IN the frame. You’d have a page within a page.
So WordPress blocks that, or something does – as it should.
Either don’t embed a form (link to it, rather), or don’t redirect from an embedded form.
Yes, there are a few ways to handle form submissions and redirect the user to a different URL without it being detected as a pop-up.
Instead of redirecting the user using client-side JavaScript, you can handle the form submission on the server-side and send a redirect response. This way, the browser will process the redirect as a regular HTTP response, and it won't be detected as a pop-up.
1. Here is an example in php.
<?php
// Handle form submission and process data
// ...
// Redirect the user to a new URL
header("Location: http://example.com/redirected-page");
exit;
?>
You can use a hidden iframe to handle the form submission, and then set the target attribute of the form to the name of the iframe. This will cause the form to submit in the hidden iframe, and the user won't be redirected away from the current page.
2. Example in Hidden Iframe.
<iframe name="hidden-iframe" style="display:none;"></iframe>
<form action="submit-form.php" method="post" target="hidden-iframe">
<!-- Form fields here -->
<input type="submit" value="Submit">
</form>
You can use AJAX to handle the form submission and then redirect the user to a new URL in the success callback. This way, the form submission is done asynchronously, and the user won't be redirected away from the current page
3. Example in jQuery.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
url: "submit-form.php",
method: "POST",
data: $(this).serialize(),
success: function(response) {
// Redirect the user to a new URL
window.location.href = "http://example.com/redirected-page";
},
error: function(xhr, status, error) {
// Handle error if needed
}
});
});
});
</script>
All of these methods should allow you to redirect the user to a new URL after form submission without it being detected as a pop-up. You can verify your URL on any online tool such as https://redirectchecker.com/ to get detail redirection chain and status code.
I hope it help.
nehakakar wrote:
Yes, there are a few ways to handle form submissions and redirect the user to a different URL without it being detected as a pop-up.
Instead of redirecting the user using client-side JavaScript, you can handle the form submission on the server-side and send a redirect response. This way, the browser will process the redirect as a regular HTTP response, and it won't be detected as a pop-up.
1. Here is an example in php.
<?php
// Handle form submission and process data
// ...
// Redirect the user to a new URL
header("Location: http://example.com/redirected-page");
exit;
?>
You can use a hidden iframe to handle the form submission, and then set the target attribute of the form to the name of the iframe. This will cause the form to submit in the hidden iframe, and the user won't be redirected away from the current page.
2. Example in Hidden Iframe.
<iframe name="hidden-iframe" style="display:none;"></iframe>
<form action="submit-form.php" method="post" target="hidden-iframe">
<!-- Form fields here -->
<input type="submit" value="Submit">
</form>
You can use AJAX to handle the form submission and then redirect the user to a new URL in the success callback. This way, the form submission is done asynchronously, and the user won't be redirected away from the current page
3. Example in jQuery.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
url: "submit-form.php",
method: "POST",
data: $(this).serialize(),
success: function(response) {
// Redirect the user to a new URL
window.location.href = "http://example.com/redirected-page";
},
error: function(xhr, status, error) {
// Handle error if needed
}
});
});
});
</script>
All of these methods should allow you to redirect the user to a new URL after form submission without it being detected as a pop-up. You can verify your URL on any online tool such as https://redirectchecker.com/ to get detail redirection chain and status code.
I hope it help.
@nehakakar can you provide an example using a sample Airtable form in the context of your solution? This seems rather generic and not an option for most of us who are using Airtable forms as a no-code solution.
Hey there, our miniExtensions Form can be used to avoid this issue. It has an option to determine exactly what happens when an embedded form is redirected elsewhere after submission. You can choose to replace the iframe content (default) or replace the top window, which may be more appropriate if you're having trouble with the default option!
In addition, you can use an Airtable field as the redirect target. If you make that field a formula field you can redirect your users to different URLs based on the data they have entered in the form! This is a super powerful feature that is much-loved by our users.
You can give all of this a go by creating a free account now!
Reply
Most helpful members this week
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.