MailChimp Integration?

Permalink
Hi,

I'd like to embed a signup form in a page on my conrete5 site generated by MailChimp, but when I try to do so (by adding it as an HTML block), I lose the edit controls for the page. I can add set everything else up first, and get it looking okay, but as soon as I add the form, I can't publish the edits. Any tips?

Roger

roger
 
Remo replied on at Permalink Reply
Remo
The content block removes several tags. Allowing users to insert script tags is dangerous and form tags seem to be blocked as well.

You can either use the html block (not available in 5.2 I think) or the external form block which would make it a bit more reusable but a little bit more complicated..
roger replied on at Permalink Reply
roger
I was using the HTML block, so that's not a solution. I'll look at the external forms option again.
Remo replied on at Permalink Reply
Remo
I thought you've used the content block because that's what most people are trying..

I'll look at the html block for a minute.
Remo replied on at Permalink Reply
Remo
The html block does pretty much nothing beside saving and printing a string.

Can you print your content? I'll try to add it in one of my testsites.. It doesn't use javascript, does it?
roger replied on at Permalink Reply
roger
Here's the code:

<!--[if IE]>
<style>
#mc_embed_signup fieldset {
position: relative;
}
#mc_embed_signup legend {
position: absolute;
top: -1em;
left: .2em;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://schoolauction.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://schoolauction.us1.list-manage.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://schoolauction.us1.list-manage.com/js/jquery.form.js"></script>
<script type="text/javascript" src="http://schoolauction.us1.list-manage.com/subscribe/xs-js?u=82a7dba55aead4d7ea7f86343&amp;id=6813f81d00"></script>

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://schoolauction.us1.list-manage.com/subscribe/post?u=82a7dba55aead4d7ea7f86343&amp;id=6813f81d00" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #ffffff;color: #333333;">
<legend style="text-transform: capitalize;font-weight: bold;color: #ffffff;background: #A03A12;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">join our mailing list</legend>
<div class="indicate-required" style="text-align: right;font-style: italic;overflow: hidden;color: #333333;margin: 0 9% 0 0;">* indicates required field</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address:<strong class="note-required">*</strong>
</label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;position: relative;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label for="mce-FNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">First Name:</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;position: relative;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label for="mce-LNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Last Name:</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;position: relative;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label for="mce-MMERGE3" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">School Name:</label>
<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;position: relative;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label for="mce-MMERGE4" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">City:</label>
<input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;position: relative;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label for="mce-MMERGE5" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">State:</label>
<input type="text" value="" name="MMERGE5" class="" id="mce-MMERGE5" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;position: relative;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 1.3em 5%;">
<label class="input-group-label" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Format:</label>
<div class="input-group" style="padding: .7em;font-size: .9em;margin: 0 0 1em 4%;">
<ul style="margin: 0;padding: 0;"><li style="list-style: none;overflow: hidden;padding: .2em 0;clear: right;"><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0" style="margin-right: 4%;padding: .2em .3em;width: auto;position: relative;z-index: 999;float: left;"><label for="mce-EMAILTYPE-0" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;text-align: left;">html</label></li>
<li style="list-style: none;overflow: hidden;padding: .2em 0;clear: right;"><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1" style="margin-right: 4%;padding: .2em .3em;width: auto;position: relative;z-index: 999;float: left;"><label for="mce-EMAILTYPE-1" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;text-align: left;">text</label></li>
<li style="list-style: none;overflow: hidden;padding: .2em 0;clear: right;"><input type="radio" value="mobile" name="EMAILTYPE" id="mce-EMAILTYPE-2" style="margin-right: 4%;padding: .2em .3em;width: auto;position: relative;z-index: 999;float: left;"><label for="mce-EMAILTYPE-2" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;text-align: left;">mobile</label></li>
</ul>
</div>
</div>
<div id="mce-responses" style="position: relative;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;position: relative;top: -1.5em;z-index: 1;width: 80%;background: #FFEEEE;color: #FF0000;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;position: relative;top: -1.5em;z-index: 1;width: 80%;background: #;color: #529214;"></div>
</div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="width: auto;margin: .2em 3em;display: block;"></div>
</fieldset>
</form>
</div><!--mc_embed_signup-->
Remo replied on at Permalink Reply
Remo
there's a script tag pretty much at the beginning which includes jquery

try removing it!
roger replied on at Permalink Reply
roger
Thank you!
stevefister replied on at Permalink Reply
stevefister
I have the same problem with MailChimp and I removed the first js include to jquery, but no luck. It still removes the C5 edit bar and doesn't allow me to edit any of the content areas. Any other ideas? Thanks!
hbartlett replied on at Permalink Reply
hbartlett
Same issue here. I removed the first call to jquery, edit bar still disappears. Did anyone ever find out how to make this work?
ScottC replied on at Permalink Reply
ScottC
why not just do
global $c; //might not be needed
if(!$c->isEditMode()):

your block view

endif; //is editmode

prints out your mailchimp junk unless the page is in edit mode?
hbartlett replied on at Permalink Reply
hbartlett
That would work, except that I was adding the Mailchimp code with an html block in an area where there are a bunch of other blocks (a sidebar on the design). In other words, it wasn't a dedicated area for the Mailchimp code.

However, I may end up taking your suggestion and making a dedicated area for it, but it will be a pain.
ScottC replied on at Permalink Reply
ScottC
you can do this in the block's view which would make it area agnostic and dependent on the page being in edit mode, regardless of the area it is in.
DavidMIRV replied on at Permalink Reply
DavidMIRV
what I did was move the jquery plugin calls to the page type and change
var mce_jQuery = jQuery.noConflict();

TO
var mce_jQuery = $;
LouisvilleITSolutions replied on at Permalink Reply
Anyone ever find a good solution to this issue?
pingupeet replied on at Permalink Reply
I was having this same issue, this fix worked perfectly for me. Thank You!
DeviantDeer replied on at Permalink Reply
DeviantDeer
Which suggestion did you do that worked? I am having the same issue w/a popup version of the sign up form. Now, I can't even delete the block because the edit controls are gone. It's located on a side bar w/lots of other blocks. I don't want to have to delete the whole sidebar to clean this block up.
buurvrouw replied on at Permalink Reply
buurvrouw
You can roll back to a previous version of your page through the sitemap. It won't fix your popup problem, but it will fix the editting posibilities.