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
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
I was using the HTML block, so that's not a solution. I'll look at the external forms option again.
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.
I'll look at the html block for a minute.
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?
Can you print your content? I'll try to add it in one of my testsites.. It doesn't use javascript, does it?
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&id=6813f81d00"></script>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://schoolauction.us1.list-manage.com/subscribe/post?u=82a7dba55aead4d7ea7f86343&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-->
<!--[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&id=6813f81d00"></script>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://schoolauction.us1.list-manage.com/subscribe/post?u=82a7dba55aead4d7ea7f86343&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-->
there's a script tag pretty much at the beginning which includes jquery
try removing it!
try removing it!
Thank you!
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!
Same issue here. I removed the first call to jquery, edit bar still disappears. Did anyone ever find out how to make this work?
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?
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?
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.
However, I may end up taking your suggestion and making a dedicated area for it, but it will be a pain.
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.
what I did was move the jquery plugin calls to the page type and change
TO
var mce_jQuery = jQuery.noConflict();
TO
var mce_jQuery = $;
Anyone ever find a good solution to this issue?
I was having this same issue, this fix worked perfectly for me. Thank You!
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.
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.
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..