fabianmoreno01 Posted May 7, 2022 Share Posted May 7, 2022 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! Link to comment
humxahafeex Posted May 7, 2022 Share Posted May 7, 2022 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. Link to comment
fabianmoreno01 Posted May 8, 2022 Author Share Posted May 8, 2022 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.) Link to comment
humxahafeex Posted May 8, 2022 Share Posted May 8, 2022 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. Link to comment
fabianmoreno01 Posted May 9, 2022 Author Share Posted May 9, 2022 Hello @humxahafeex, thanks for tweaking the code yet it's still not working... 😕 Link to comment
fabianmoreno01 Posted May 16, 2022 Author Share Posted May 16, 2022 Any idea @humxahafeex or anyone?... Link to comment
paul2009 Posted May 16, 2022 Share Posted May 16, 2022 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 ⬇️ About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
fabianmoreno01 Posted May 16, 2022 Author Share Posted May 16, 2022 (edited) 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.) Edited May 16, 2022 by fabianmoreno01 Inserting additional links Link to comment
paul2009 Posted May 16, 2022 Share Posted May 16, 2022 (edited) 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. Edited May 17, 2022 by paul2009 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
fabianmoreno01 Posted May 16, 2022 Author Share Posted May 16, 2022 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)? Link to comment
fabianmoreno01 Posted May 17, 2022 Author Share Posted May 17, 2022 @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> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment