Edit bar disappears after embedding Formstack form
Permalink
Here's hoping someone knows something about this.
I have a Formstack form I need to embed in a page in my site. I have created an HTML block and dropped the embed code that Formstack provides in that, but when I do, everything in my edit bar disappears.
Looking at the page, and comparing another page on my site, after the footer div I have and then just with nothing inside the toolbar div.
So there is a complete div missing between those two, and everything that should be inside the toolbar is missing.
The code from the Formstack site is this (so you can try it out yourself)
This is the standard code, but there are also two options provided, one is "I don't need jQuery", the other "I don't need jQuery UI" but ticking either/or doesn't make a difference.
Can someone help me out here to get my toolbar back? I'm doing this as a first point of call before lodging a Formstack trouble ticket.
Richard
I have a Formstack form I need to embed in a page in my site. I have created an HTML block and dropped the embed code that Formstack provides in that, but when I do, everything in my edit bar disappears.
Looking at the page, and comparing another page on my site, after the footer div I have
<div id="ccm-page-controls-wrapper">
<div id="ccm-toolbar"></div>
So there is a complete div missing between those two,
<div id="ccm-page-controls-wrapper" class="ccm-ui">
The code from the Formstack site is this (so you can try it out yourself)
<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1283819-Cs6k1FTnOj-v3"></script><noscript><a href="http://www.formstack.com/forms/?1283819-Cs6k1FTnOj" title="Online Form">Online Form - Conference Registration</a></noscript>
This is the standard code, but there are also two options provided, one is "I don't need jQuery", the other "I don't need jQuery UI" but ticking either/or doesn't make a difference.
Can someone help me out here to get my toolbar back? I'm doing this as a first point of call before lodging a Formstack trouble ticket.
Richard
Go to your sitemap, click on the page you put the form on, select versions from the options, approve a version from before you added the form, now delete the versions that were added after the form (should just be one), now go to your page and your edit bar will be there.
Hi Ekko, thanks for responding but it doesn't solve my problem. That's exactly what I've been doing to test the different scripts from Formstack. What I need is a solution that gives me the edit bar with the form on the page.
I think it's a jquery conflict as well.
Can we have a look at the embed code for the form without jquery(s)?
The form you posted calls
'jquery.min.js', 'jquery-ui.css' and 'jquery-ui.min.js'
Can we have a look at the embed code for the form without jquery(s)?
The form you posted calls
'jquery.min.js', 'jquery-ui.css' and 'jquery-ui.min.js'
Embed code without jQuery and jQueryUI is this:
<script type="text/javascript" src="http://www.formstack.com/forms/js.php?nojquery=1&nojqueryui=1&form=1283819&viewkey=Cs6k1FTnOj&style_version=v3"></script><noscript><a href="http://www.formstack.com/forms/?1283819-Cs6k1FTnOj" title="Online Form">Online Form - Conference Registration</a></noscript>
Ok, so I plunked that embed code on my test site and it breaks it just like you said.
Although the second embed code you posted creates a form that doesn't call jQuery, the form itself calls this code:
If you load that url into your browser, you will see that the last line is:
Although I'm far from a jQuery expert, my JavaScript console is complaining:
"Property '$' of object [object Window] is not a function"
which implies a conflict.
I was able to load up the form in an iframe block. I set the src of the iframe to be the url listed in the <noscript> section of the embed code. I set the dimensions of the iframe at 900 x 2500 with no border and it looks pretty good and best of all, the iframe isolates it from the C5 jQuery.
Although the second embed code you posted creates a form that doesn't call jQuery, the form itself calls this code:
http://www.formstack.com/forms/js/3/scripts.js?20121003-01
If you load that url into your browser, you will see that the last line is:
(window,jQuery);
Although I'm far from a jQuery expert, my JavaScript console is complaining:
"Property '$' of object [object Window] is not a function"
which implies a conflict.
I was able to load up the form in an iframe block. I set the src of the iframe to be the url listed in the <noscript> section of the embed code. I set the dimensions of the iframe at 900 x 2500 with no border and it looks pretty good and best of all, the iframe isolates it from the C5 jQuery.
Ok thanks heaps for your time on this. I shall get onto Formstack support and see what they have to say, in the meantime I will fall back with the iframe option.
No Problem. The ironic thing is, the form that's called in the <noscript> section of the embed code actually requires jQuery.
I get the same thing when I use jquery.ui from an outside source either as a cdn or putting it into my theme/js. Wanted to use it for accordion without having to use the .tabs. so I can collapse them easily. It worked like a champ but I lose my edit bar in the same way. C5 does not want to play nice with other jquery. Wish I had an answer, I'll keep looking.
Did anyone have a solution for this... I just tried to embedd a form stack form (constant contact) into a html block...
the whole edit bar becomes blank
it stays blank in very previous version regardless of when it was created...which is really wierd
the whole edit bar becomes blank
it stays blank in very previous version regardless of when it was created...which is really wierd
No solution so far - I've just learned to live with it. It's a royal pain but there's nothing else I can do.
If you right-click and 'View source' and then search that source for 'jquery.js', you will likely see it loading twice. As I mentioned above, you can sometimes load the URL for the form itself in an iframe instead of embedding the HTML but that means you can't style the form. Ideally, you have to try to find a form, or a version of Constant Contact, that does not load jQuery.
You can also try to build your own 'external form' but there is a learning curve to that.
https://github.com/jordanlev/c5_custom_contact_form...
There are also some pretty good form add-ons that build out some pretty elaborate forms that are integrated into C5. They cost money but it is a one-time cost rather than paying a monthly subscription.
You can also try to build your own 'external form' but there is a learning curve to that.
https://github.com/jordanlev/c5_custom_contact_form...
There are also some pretty good form add-ons that build out some pretty elaborate forms that are integrated into C5. They cost money but it is a one-time cost rather than paying a monthly subscription.
Hey, I think the fix this issue. at least on the formstack site... if you save the form.
then once you get the welcome to Formstack email... they will give you a url and password to log in add edit your form.
They now offer the ability to not include css styling and jquery.
I checked those boxes... and it worked like a charm!!!
-----Original Message-----
From: concrete5 Community [mailto:discussions@concretecms.com]
Sent: Saturday, August 24, 2013 6:33 PM
To: greg@cayerdesign.com
Subject: Edit bar disappears after embedding Formstack form : Editing with concrete5
then once you get the welcome to Formstack email... they will give you a url and password to log in add edit your form.
They now offer the ability to not include css styling and jquery.
I checked those boxes... and it worked like a charm!!!
-----Original Message-----
From: concrete5 Community [mailto:discussions@concretecms.com]
Sent: Saturday, August 24, 2013 6:33 PM
To: greg@cayerdesign.com
Subject: Edit bar disappears after embedding Formstack form : Editing with concrete5
Oh wow, it looks like they've fixed it - the barebones CSS checkbox wasn't there before, I wonder if that's what made the difference!
