Survey Redirect-upon-Completion isn't working

Hello!

I have created a Code Block on a page of my website so I can insert a survey (from the website forms.app). The code provided by the forms website is:

<iframe id="" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://my.forms.app/form/61a320417d2e520c5456fd3b" frameborder="0" style="width: 1px; min-width:100%; height:500px; border:none;"></iframe>

At the end of it, users should be redirected to a Thank You page (also on my site) but it doesn't work, even though the form does say the user will be redirected. The page doesn't change and the survey goes back to its 1st page.

I imagine it's because the Redirect-upon-Completion is in the form's settings (i.e. in a block inside the page) rather than in the page settings itself? Or maybe it's something else entirely.

Any help appreciated! (Note: I'm a smart guy but also a complete beginner at coding so I can only make use of detailed instructions when coding is involved.)

Thanks!

5 hours ago, fabianmoreno01 said:

Hello!

I have created a Code Block on a page of my website so I can insert a survey (from the website forms.app). The code provided by the forms website is:

<iframe id="" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://my.forms.app/form/61a320417d2e520c5456fd3b" frameborder="0" style="width: 1px; min-width:100%; height:500px; border:none;"></iframe>

At the end of it, users should be redirected to a Thank You page (also on my site) but it doesn't work, even though the form does say the user will be redirected. The page doesn't change and the survey goes back to its 1st page.

I imagine it's because the Redirect-upon-Completion is in the form's settings (i.e. in a block inside the page) rather than in the page settings itself? Or maybe it's something else entirely.

Any help appreciated! (Note: I'm a smart guy but also a complete beginner at coding so I can only make use of detailed instructions when coding is involved.)

Thanks!

Hi It's a simple fix , I did wrote a quick fix for you please do change your form code to the following and test if it works or not.

<iframe id="" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://my.forms.app/form/61a320417d2e520c5456fd3b" frameborder="0" style="width: 1px; min-width:100%; height:500px; border:none;"></iframe>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('.submit-button').click(function(){ window.location = 'https://www.fabianmoreno.net/thank-you'});
</script>

if it fixes the issue ,please do mark it as solved. 

Thanks @humxahafeex , I changed the code but it's still not working...
(Also, I don't know if this plays a role, but I do have a piece of code in the page itself to prevent the header and footer from appearing.)

4 hours ago, fabianmoreno01 said:

Thanks @humxahafeex , I changed the code but it's still not working...
(Also, I don't know if this plays a role, but I do have a piece of code in the page itself to prevent the header and footer from appearing.)

My Bad , Please try this one , header and footer code is not a issue.

Quote

Quote

<iframe id="" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://my.forms.app/form/61a320417d2e520c5456fd3b" frameborder="0" style="width: 1px; min-width:100%; height:500px; border:none;"></iframe>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('.submit-button').click(function(){ window.location = 'https://www.fabianmoreno.net/thank-you'});
});
</script>

please check and let me know if it still shows no result.

Hello @humxahafeex, thanks for tweaking the code yet it's still not working... 😕

Any idea @humxahafeex or anyone?...

On 5/7/2022 at 5:51 PM, fabianmoreno01 said:

I have created a Code Block on a page of my website so I can insert a survey [using an iFrame]. At the end of it, users should be redirected to a Thank You page but it doesn't work.

This is because the form is within an iFrame. For security reasons, the form within the iFrame cannot take control of your browser and redirect the user.

Instead of placing the form within an iFrame using code, you may want to consider sending the user directly to the external form page (https://my.forms.app/form/61a320417d2e520c5456fd3b). You could do this using a link or a Button Block. The user will then be successfully redirected back to your site when they have completed the form.

Does this help? Please give feedback by clicking an icon below  ⬇️

5 hours ago, paul2009 said:

This is because the form is within an iFrame. For security reasons, the form within the iFrame cannot take control of your browser and redirect the user.

Instead of placing the form within an iFrame using code, you may want to consider sending the user directly to the external form page (https://my.forms.app/form/61a320417d2e520c5456fd3b). You could do this using a link or a Button Block. The user will then be successfully redirected back to your site when they have completed the form.

Does this help? Please give feedback by clicking an icon below  ⬇️

Hey Paul, thanks for your answer! Is there any way to solve this while keeping the form on my site? I'd like to keep it at this address and leave the disclaimer at the bottom of the page...

Maybe one of these could be of use?
- https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action
- https://htmldom.dev/communication-between-an-iframe-and-its-parent-window/
- https://stackfame.com/access-parent-of-iframe-javascript
- https://help.alchemer.com/help/break-out-of-iframe
- https://stackoverflow.com/questions/11332247/redirect-from-iframe-using-javascript-or-jquery?noredirect=1&lq=1
- https://stackoverflow.com/questions/1378433/how-do-i-implement-cross-domain-url-access-from-an-iframe-using-javascript/1378456#1378456

(Note: I have no access to the code of the form itself, I can only tweak it in the code block on Squarespace.)

21 hours ago, fabianmoreno01 said:

Is there any way to solve this while keeping the form on my site?

This isn't something you can do from Squarespace. You’ll need some different code from the third party. 

6 minutes ago, paul2009 said:

This isn't something you can do from Squarespace.

Would I have the same problem with forms from other websites (i.e. Typeform)?

@paul2009 and @humxahafeex, actually there was a way to fix it and redirect from within the iFrame. The following piece of code was provided by the forms website (I replaced the form ID with --- in the code here). It doesn't seem to always work, but it sometimes does. I'm not sure yet why it's still inconsistent.

<div formsappId="---"></div>
            <script src="https://my.forms.app/static/iframe.js" type="text/javascript"></script>
            <script>
                new formsapp('---', {
                    width: '100%',
                    height: 'formHeight'
                });
            </script>