{"id":5275,"date":"2021-03-25T09:00:14","date_gmt":"2021-03-25T08:00:14","guid":{"rendered":"https:\/\/da-software.net\/?p=5275"},"modified":"2021-03-25T09:00:14","modified_gmt":"2021-03-25T08:00:14","slug":"embed-form-as-iframe-scroll-up-after-submission","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2021\/03\/embed-form-as-iframe-scroll-up-after-submission\/","title":{"rendered":"Embed form as IFrame &#8211; scroll up after submission"},"content":{"rendered":"<p>If you integrate longer forms using an iframe, the thank you page or the Paypal order info may no longer be visible, as it is located further up the page.<\/p>\n<p><!--more--><\/p>\n<p>The solution: we scroll the page up after submitting. First we create our normal IFrame code, either as an IFrame or also as an embedded IFrame:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/03\/iframe_1.png\" alt=\"\" width=\"686\" height=\"593\" class=\"aligncenter size-full wp-image-5263\" srcset=\"\/wp-content\/uploads\/2021\/03\/iframe_1.png 686w, \/wp-content\/uploads\/2021\/03\/iframe_1-300x259.png 300w, \/wp-content\/uploads\/2021\/03\/iframe_1-600x519.png 600w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<p>We now paste the code into our website, but here we add the following code:<\/p>\n<pre>\r\nwindow.scroll(0,0);\r\n<\/pre>\n<p>The result should look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/03\/iframe_2.png\" alt=\"\" width=\"778\" height=\"394\" class=\"aligncenter size-full wp-image-5272\" srcset=\"\/wp-content\/uploads\/2021\/03\/iframe_2.png 778w, \/wp-content\/uploads\/2021\/03\/iframe_2-300x152.png 300w, \/wp-content\/uploads\/2021\/03\/iframe_2-768x389.png 768w, \/wp-content\/uploads\/2021\/03\/iframe_2-600x304.png 600w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/p>\n<p>If you do not want to scroll all the way to the top, you can also enter a different value:<\/p>\n<pre>\r\nwindow.scroll(200,0);\r\n<\/pre>\n<p>The 200 is a pixel value, i.e. in this case you scroll upwards, the distance from the top of the page is 200 pixels.<\/p>","protected":false},"excerpt":{"rendered":"<p>If you integrate longer forms using an iframe, the thank you page or the Paypal order info may no longer<\/p>\n","protected":false},"author":1,"featured_media":4182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[20],"tags":[92,9,216,114],"class_list":["post-5275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-da-formmaker-en","tag-da-orderform","tag-iframe-en","tag-tutorial-en"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/5275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=5275"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/5275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/4182"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=5275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=5275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=5275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}