Help

Re: Redirect form to url after submission

211 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Aaron_Snell
4 - Data Explorer
4 - Data Explorer

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?

9 Replies 9
Khadesha_Bryant
4 - Data Explorer
4 - Data Explorer

I am having the same problem.

Cindy_Caverly
5 - Automation Enthusiast
5 - Automation Enthusiast

I am having this exact problem. Am trying to redirect to another airtable form and the first form reloads. Anyone have any ideas?

Brent_Faulk
4 - Data Explorer
4 - Data Explorer

same problem here; is this getting fixed?

Zach_Bell
4 - Data Explorer
4 - Data Explorer

Same issue. This makes the forms useless for me…

What is going on?

Sam_Richards
4 - Data Explorer
4 - Data Explorer

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.

Rowan_Oberski
4 - Data Explorer
4 - Data Explorer

“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.

nehakakar
4 - Data Explorer
4 - Data Explorer

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.  

HannesK-ME
6 - Interface Innovator
6 - Interface Innovator

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! 

Screenshot 2024-11-08 at 14.59.40.jpg

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!