Embedding pop up form only on certain pages or blogs - craft theme

[erin_smith26]

Hi everyone, I'm wondering if anyone can tell me whether it is possible, and if it is, how to embed my pop up form code only into specific pages and blog pages on craft theme? 

Currently using flodesk for my forms and have a code, just need to know where to put it, if it's possible to do so.

[Dan-From-Ryviu]

Hi @erin_smith26 

You can go to Online store > Themes > Edit code > open theme.liquid file, add this code before </body> tag 

{%- if template.name == 'blog' or template.name == 'pages'  -%}
// add your popup form code here
{%- endif -%}

[erin_smith26]

Do I change the 'blog' or 'pages' to whatever my page or blog is called?

[Dan-From-Ryviu]

If you want it appear in specific blog or page, please use this code instead 

{%- if article.handle == 'your article handle' or page.handle == 'your page handle'  -%}
// add your popup form code here
{%- endif -%}

Example your blog article link is yourstore.com/blogs/news/blog-8, then handle is blog-8, same as page handle 

[erin_smith26]

This is what the full code looks like... is that right? It's not working.

{%- if article.handle == 'blog-3' -%}
// <script>
(function(w, d, t, h, s, n) {
w.FlodeskObject = n;
var fn = function() {
(w[n].q = w[n].q || []).push(arguments);
};
w[n] = w[n] || fn;
var f = d.getElementsByTagName(t)[0];
var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
var sm = d.createElement(t);
sm.async = true;
sm.type = 'module';
sm.src=h + s + '.mjs' + v;
f.parentNode.insertBefore(sm, f);
var sn = d.createElement(t);
sn.async = true;
sn.noModule = true;
sn.src=h + s + '.js' + v;
f.parentNode.insertBefore(sn, f);
})(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
</script>
<script>
window.fd('form', {
formId: '6535df6e31eb18221ee6f6fa'
});
</script>
{%- endif -%}

[Dan-From-Ryviu]

Please send me that page link so I can check

[erin_smith26]

https://soundlittlesleepers.co.nz/blogs/news/blog-3

Thanks!

[Dan-From-Ryviu]

Hi, mus

{%- if article.handle == 'news/blog-3' -%}
// <script>
(function(w, d, t, h, s, n) {
w.FlodeskObject = n;
var fn = function() {
(w[n].q = w[n].q || []).push(arguments);
};
w[n] = w[n] || fn;
var f = d.getElementsByTagName(t)[0];
var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
var sm = d.createElement(t);
sm.async = true;
sm.type = 'module';
sm.src=h + s + '.mjs' + v;
f.parentNode.insertBefore(sm, f);
var sn = d.createElement(t);
sn.async = true;
sn.noModule = true;
sn.src=h + s + '.js' + v;
f.parentNode.insertBefore(sn, f);
})(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
</script>
<script>
window.fd('form', {
formId: '6535df6e31eb18221ee6f6fa'
});
</script>
{%- endif -%}

change code like this 

[erin_smith26]

Thank you so much! I had it working with your code but then I slightly changed my form so had to upload a new form code into it and now its not working anymore. This is the code im trying to use.. can you see why it wouldn't be working?

{%- if article.handle == 'news/blog-3' -%}
// <script>
(function(w, d, t, h, s, n) {
w.FlodeskObject = n;
var fn = function() {
(w[n].q = w[n].q || []).push(arguments);
};
w[n] = w[n] || fn;
var f = d.getElementsByTagName(t)[0];
var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
var sm = d.createElement(t);
sm.async = true;
sm.type = 'module';
sm.src=h + s + '.mjs' + v;
f.parentNode.insertBefore(sm, f);
var sn = d.createElement(t);
sn.async = true;
sn.noModule = true;
sn.src=h + s + '.js' + v;
f.parentNode.insertBefore(sn, f);
})(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
</script>
<script>
window.fd('form', {
formId: '6535df6e31eb18221ee6f6fa'
});
</script>