Trouble with a particular blog post - won't load in editing page to allow an update

[Naomi Crain]

Hi,
I was hoping to be able to add a piece of code (email form sign up) to the bottom of a single blog post, and I noticed the "source" button on the blog editing screen, which I clicked, and pasted the form code at the bottom of the page.

I'm not particularly surprised that it didn't work BUT now I want to try something different, only the blog editing page for that blog won't load properly, so I can't remove the added code, nor edit the copy. Other blog editing pages load fine, just not this one. I assume it's because of this code I've added.

Could you let me know how to fix this problem?

naomicraincoaching.com
The blog is called What Your Body Wants for 2021

[Wassim]

Hi Naomi,
I removed the script from your blog article, you can now edit it.

[Daniel Mulroy]

Hi Naomi!

Following up on your original question... how do you add a CTA / signup at the bottom of one of your blog posts.

What I would suggest is putting a custom html element in the source of your body text... like

<h1> My blog title </h1>
<p> My blog content lorem ipsum blah blah </p>

// Your custom element here
<signup></signup>

Then, you would add a jQuery source code blog to your Blog Article template page, with the code that you originally tried to use... but you'd have to (lightly) modify it to only run when the <signup> element is present on the page.

If you want to share the script here I might see if I can tweak it for you. Good luck!

[Naomi Crain]

@Wassim Thank you Wassim!

[Naomi Crain]

@Daniel-Mulroy Thanks for your suggestion! I am not at all a coder, so the whole jQuery thing is a bit confusing. The email service has a piece of code they need placed in the header of every page on the site, and then (theoretically) I can add form-specific code to any page and it'll work. I suspect that's already more code-adding than I can manage.

I assume your suggestion is different from this, and would effectively create a template that allows me to add the one opt-in form on blog pages where I add the <signup></signup> code. Is that right?

It's sad that Appdrag don't make this an easy-add to a blog page... I would've thought opt-ins are fairly common on blog pages.

For what it's worth, the code from email service provider is:
FOR HEADERS
<script>
(function(w, d, t, 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 e = d.createElement(t);
var h = '?v=' + new Date().getTime();
e.async = true;
e.src = s + h;
f.parentNode.insertBefore(e, f);
})(window, document, 'script', 'https://assets.flodesk.com/universal.js', 'fd');
</script>

FOR THE SPECIFIC FORM
<div id="fd-form-60168c8ed6dae5ba1ba28376"></div>
<script>
window.fd('form', {
formId: '60168c8ed6dae5ba1ba28376',
containerEl: '#fd-form-60168c8ed6dae5ba1ba28376'
});
</script>

[Daniel Mulroy]

Hi Naomi,

Perfect, that's all great info to have!

Next time, to make it even easier, you can use the </> or surround the code in backticks ("```") so it shows up like this:

FOR HEADERS

<script>
(function(w, d, t, 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 e = d.createElement(t);
var h = '?v=' + new Date().getTime();
e.async = true;
e.src = s + h;
f.parentNode.insertBefore(e, f);
})(window, document, 'script', 'https://assets.flodesk.com/universal.js', 'fd');
</script>

FOR THE SPECIFIC FORM

<div id="fd-form-60168c8ed6dae5ba1ba28376"></div>
<script>
window.fd('form', {
formId: '60168c8ed6dae5ba1ba28376',
containerEl: '#fd-form-60168c8ed6dae5ba1ba28376'
});
</script>

Much easier for us code junkies to read

The Good news is that you're very very close, you have all the right code, you just need to structure it a bit differently.

Here's what I would do: Edit your blog article template, and put the "FOR HEADERS" script in the headers (if it's not already there, per your post).

Then, in PageBuilder, add a "Javascript Source Code" block to your blog article template, anywhere on the page, but top or bottom is easiest.

Double click it and add this code:

window.fd('form', {
formId: '60168c8ed6dae5ba1ba28376',
containerEl: '#fd-form-60168c8ed6dae5ba1ba28376'
});

Now, last step: Anytime you want to put that call to action in a blog post, switch to source mode and paste in:

<div id="fd-form-60168c8ed6dae5ba1ba28376"></div>

Explanation:
The script in the Headers will load the floDesk script in preparation.
The script in the Source Code Block will attempt to find the "<div>" element on the page, and if so, add the Signup form to it.

That should do the trick! Let us know! If you're still having problems, please share the link to the blog post so we can maybe get an exact idea.

Good luck!

[Naomi Crain]

@Daniel-Mulroy
Thanks so much for doing this. It almost makes sense to me!
However, I have tried to action this and not been successfull in getting the sign up into the page.
First, in adding the initial script to the blog template header, there was no </head> tag, so I tried it after the </section> tag but all that did was give me three header sections. So I deleted two, and put the script just before the close section tag. At least that didn't replicate the header so I assumed it was ok.

Next, I added the javascript box to the template and added the script. That seemed fairly straightforward.

But then adding the final piece of code to the Source code on the actual blog, I assume you mean adding it to the source code of the blog copy box - that's the only place I can see that allows me to get to the source code. I added your piece of code at the bottom but nothing has changed on the actual site.

The blog page link is: https://naomi-crain-healing--556b9f.appdrag.site/preview/blog/14-What-does-it-mean-to-love-our-body-.html
not that looking at it will be all that helpful, as nothing is appearing after the "Tell me how body love is going for you....." line right at the bottom, which is where it should be.

I'm paying someone for an hour of their appdrag expertise next week, to fix a few things I can't work out (like that crazy urls I'm getting!) so I might bring this up with him.

Thank you for your time and effort! You've been so helpful.

[Daniel Mulroy]

You did everything perfectly, I forgot a tiny detail...

What's happening is that the code is running before the 'plugin' code from flodesk is ready.

To fix that, simply change

window.fd('form', {
formId: '60168c8ed6dae5ba1ba28376',
containerEl: '#fd-form-60168c8ed6dae5ba1ba28376'
});

to

window.addEventListener('load', function(){
  // Everything has loaded!
   window.fd('form', {
      formId: '60168c8ed6dae5ba1ba28376',
      containerEl: '#fd-form-60168c8ed6dae5ba1ba28376'
   });
}