The community member is trying to embed a newsletter subscription form on their website using HTML code provided by their email marketing provider, Enginemailer. They have placed the script in the head section and the form div in the body, but the form is not displaying correctly. Community members provide suggestions, such as using the defer attribute on the script, creating a separate box instead of a div, and checking the client-only setting. However, the issue persists, and it is determined that the script provided by Enginemailer contains a bug that only works in certain cases. The community member is advised to contact Enginemailer to fix the bug or to include the script in the head section and hope there are no inline scripts before it. The community member later changes their email marketing provider, and the form embedding works, but there is still an issue where the form disappears when navigating to the page and needs to be reloaded. The community members suggest checking the settings with the new provider.
Hello Webstudio Team, I would like to embed a subscription form for my newsletter on my website. I have received two HTML codes from my provider (Enginemailer). I should insert this one in the head section: <script src="https://esvcs.enginemailer.com/Scripts/viewform.js?id=%2FXbHcRtPZ5ZTQ3XlL61kug%3D%3D&sc=latKcz55K1TQQTtaLKSRpw%3D%3D&type=new"></script> And this one at the place where the form should appear: <div id="optedInFormWrapper"></div> I have done this, but nothing is displayed in the preview (see screenshot in the attachment) and after publication the form appears at the very bottom of the page https://philippbrader.com/ (under the footer). So I wanted to ask where the problem might lie and how it can be solved. Thank you for your help!
head scripts won't be rendered in builder, only in production, I recommend to add that script after that div that you added there and also add to it async attribute
@Oleg Isonen Thank you for your quick reply and the tips! I placed the script right after the div and also added async attribute. Now the form is displayed properly in the builder. But after publication the form is missing completely - I have to reload the page and then it's fine. Do you know why it might not work the first time you load the page?
@Oleg Isonen That is really strange. I just tried it again with another device and loaded the page with my mother's smartphone: the first time the form is missing and after reloading it appears correctly. It was the same the last times I tested it with different devices and browsers ...
another option is to move the embed to the end of the page, but with defer its better because the script stays close to where its used, easier to maintain
@Oleg Isonen Thank you for the tips! I did the experiments using incognito mode, but with defer instead of async after publishing the form doesn't appear at all for me. In experiment 2 it's the same as before (the form appears only after reloading the page).
@Oleg Isonen I put it in this order now (not nested) and published, but still the form is not displayed. Does it appear when you load the page https://philippbrader.com/ ?
@Oleg Isonen Regarding the issue that the script code should actually be placed in the HEAD area of the page (but in Webstudio you can only do it globally for the whole website), I found a similar post here: https://discord.com/channels/955905230107738152/1133340583079972884/threads/1268166897501732905 There the solution seems to have been to use <iframe> instead of <script>. Could this also be helpful in my case? If so, how exactly should I adapt the code?
we investigated that bug, the script you are loading from them contains actual bug, its trying to find the script with the right src attribute, but doesn't consider there are inline scripts without src.
This is quite literally badly written script that will only work in some cases and won't work in other cases. Tell them this, they need to fix it.
@Oleg Isonen In the meantime, I have changed my e-mail marketing provider and now the embedding of the subscription form works well. There is only one thing: if you switch from another subpage of the website via the navigation to the page with the form, the form is not displayed. You then have to reload the page to see the form. Do you think this is related to Webstudio or rather to the HTML code of the form?
I don't know what's going on, but when I return to the home page, the <form> element has inline style display: none. My guess is that there may be a setting with your form provider where it only displays once, assuming that if someone skipped it the first time, they don't want to see it again.
Or it may have to do with some token authorization that expires when you leave the page.
@paulrudy Thank you very much for investigating this issue and providing your feedback! 🙂 That's definitely helpful, so I'll contact the support from my provider.
Happy to help! I'll be curious to find out if you find a solution
Add a reply
Sign up and join the conversation on Discord
And this one at the place where the form should appear:I have done this, but nothing is displayed in the preview (see screenshot in the attachment) and after publication the form appears at the very bottom of the page https://philippbrader.com/ (under the footer). So I wanted to ask where the problem might lie and how it can be solved. Thank you for your help!Best regards from Germany,Philipp Brader","url":"https://help.webstudio.is/problem-with-embedding-subscription-form-jT9T2DcnPBgX","identifier":"jT9T2DcnPBgX","publisher":{"@type":"Organization","name":"Webstudio","logo":{"@type":"ImageObject","url":"https://assets.usehall.com/org_01JEYTC8WWMF7N46W9J4J7CFDP/c7f10f06-f934-4e35-b008-431a89254f9f.png"}},"comment":[{"@type":"Comment","text":"head scripts won't be rendered in builder, only in production, I recommend to add that script after that div that you added there and also add to it async attribute","dateCreated":"2024-08-17T17:11:49.901Z","dateModified":"2024-08-17T17:11:49.901Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":1,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen Thank you for your quick reply and the tips! I placed the script right after the div and also added async attribute. Now the form is displayed properly in the builder. But after publication the form is missing completely - I have to reload the page and then it's fine. Do you know why it might not work the first time you load the page?","dateCreated":"2024-08-17T20:45:00.020Z","dateModified":"2024-08-17T20:45:00.020Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","name":"Philipp Brader","identifier":"37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","image":"https://cdn.discordapp.com/avatars/1223675942858391682/3f30a0688a6baea6dc71a0b1249b248b.webp?size=256"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"can you share a project link","dateCreated":"2024-08-17T21:26:49.446Z","dateModified":"2024-08-17T21:26:49.446Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"Client only?","dateCreated":"2024-08-17T21:58:40.217Z","dateModified":"2024-08-17T21:58:40.217Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"@John Siciliano Here is a project link (the subscription form is quite in the middle of the page \"home\", in the section with the heading \"Dein Schnellstart\"):https://apps.webstudio.is/builder/3a8c8ea5-7384-4c7d-b6b6-19d961fe719a?authToken=322840c2-60d5-4500-b704-0d863dcdec71&mode=preview@Oleg Isonen Client only is activated - should I deactivate it?","dateCreated":"2024-08-18T14:27:08.197Z","dateModified":"2024-08-18T14:27:08.197Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","name":"Philipp Brader","identifier":"37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","image":"https://cdn.discordapp.com/avatars/1223675942858391682/3f30a0688a6baea6dc71a0b1249b248b.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0},{"@type":"Comment","text":"i don't see a problem","dateCreated":"2024-08-18T14:37:08.568Z","dateModified":"2024-08-18T14:37:08.568Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen That is really strange. I just tried it again with another device and loaded the page with my mother's smartphone: the first time the form is missing and after reloading it appears correctly. It was the same the last times I tested it with different devices and browsers ...","dateCreated":"2024-08-18T15:13:21.880Z","dateModified":"2024-08-18T15:13:21.880Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","name":"Philipp Brader","identifier":"37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","image":"https://cdn.discordapp.com/avatars/1223675942858391682/3f30a0688a6baea6dc71a0b1249b248b.webp?size=256"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0},{"@type":"Comment","text":"can confirm that, it is strange","dateCreated":"2024-08-18T15:19:33.308Z","dateModified":"2024-08-18T15:19:33.308Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":8,"upvoteCount":0},{"@type":"Comment","text":"as an experiment try 2 things:experiment 1:remove the async attribute, but set \"defer\" attributeexperiment 2:create a box from builder instead of inside html embed, give box that same idWhen testing published version, use incognito mode so that there is no cache, close the tab between tests","dateCreated":"2024-08-18T15:22:51.546Z","dateModified":"2024-08-18T15:22:51.546Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":9,"upvoteCount":0},{"@type":"Comment","text":"just tested, using defer instead works reliably","dateCreated":"2024-08-18T15:53:58.540Z","dateModified":"2024-08-18T15:53:58.540Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":10,"upvoteCount":0},{"@type":"Comment","text":"reason I am saying to use it is that script loading shouldn't blog rendering of the rest of the site","dateCreated":"2024-08-18T15:54:12.151Z","dateModified":"2024-08-18T15:54:12.151Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":11,"upvoteCount":0},{"@type":"Comment","text":"added like they offer it without defer/async it will block the renderin where the form is","dateCreated":"2024-08-18T15:54:34.878Z","dateModified":"2024-08-18T15:54:34.878Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"another option is to move the embed to the end of the page, but with defer its better because the script stays close to where its used, easier to maintain","dateCreated":"2024-08-18T15:54:59.995Z","dateModified":"2024-08-18T15:54:59.995Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":13,"upvoteCount":0},{"@type":"Comment","text":"in any case defer is better in your case, because script is doing something","dateCreated":"2024-08-18T15:55:16.988Z","dateModified":"2024-08-18T15:55:16.988Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen Thank you for the tips! I did the experiments using incognito mode, but with defer instead of async after publishing the form doesn't appear at all for me.In experiment 2 it's the same as before (the form appears only after reloading the page).","dateCreated":"2024-08-18T16:09:20.655Z","dateModified":"2024-08-18T16:09:20.655Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","name":"Philipp Brader","identifier":"37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","image":"https://cdn.discordapp.com/avatars/1223675942858391682/3f30a0688a6baea6dc71a0b1249b248b.webp?size=256"},"commentCount":0,"comment":[],"position":15,"upvoteCount":0},{"@type":"Comment","text":"what I did was creating a separate box instead of div in html embed and using defer","dateCreated":"2024-08-18T16:47:02.742Z","dateModified":"2024-08-18T16:47:02.742Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"when script is cached it tries to access the div, but does it before its rendered","dateCreated":"2024-08-18T16:47:25.714Z","dateModified":"2024-08-18T16:47:25.714Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":17,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen I now have it as shown in the two attached screenshots. However, the form is still not displayed. What should I change?","dateCreated":"2024-08-18T17:32:48.956Z","dateModified":"2024-08-18T17:32:48.956Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","name":"Philipp Brader","identifier":"37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","image":"https://cdn.discordapp.com/avatars/1223675942858391682/3f30a0688a6baea6dc71a0b1249b248b.webp?size=256"},"commentCount":0,"comment":[],"position":18,"upvoteCount":0},{"@type":"Comment","text":"BoxHTML EmbedIn this order","dateCreated":"2024-08-18T18:00:59.254Z","dateModified":"2024-08-18T18:00:59.254Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":19,"upvoteCount":0},{"@type":"Comment","text":"Not nesting one into another","dateCreated":"2024-08-18T18:01:29.427Z","dateModified":"2024-08-18T18:01:29.427Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":20,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen I put it in this order now (not nested) and published, but still the form is not displayed. Does it appear when you load the page https://philippbrader.com/ ?","dateCreated":"2024-08-18T21:11:28.337Z","dateModified":"2024-08-18T21:11:28.337Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","name":"Philipp Brader","identifier":"37e8fe13-8de6-46ad-9f35-3a5f70baa5a3","image":"https://cdn.discordapp.com/avatars/1223675942858391682/3f30a0688a6baea6dc71a0b1249b248b.webp?size=256"},"commentCount":0,"comment":[],"position":21,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen Regarding the issue that the script code should actually be placed in the HEAD area of the page (but in Webstudio you can only do it globally for the whole website), I found a similar post here:https://discord.com/channels/955905230107738152/1133340583079972884/threads/1268166897501732905There the solution seems to have been to use
