Add Constant Contact to Foxy
I’m asked from time to time how to change the MailChimp integration in our Foxy theme to Constant Contact. Here’s how you can take the Constant Contact sign up form code from inside your user account and incorporate it into your Foxy theme’s header.
- First open up the embed code you received from Constant Contact in a plain text editor like Notepad. It should look something like this:
<!-- BEGIN: Constant Contact Basic Opt-in Email List Form --> <div align="center"> <table border="0" cellspacing="0" cellpadding="3" bgcolor="#ffffff" style="border:2px solid #39607a;"> <tr> <td align="center" style="font-weight: bold; font-family:Helvetica; font-size:12px; color:#faa51b;">Join Our Mailing List</td> </tr> <tr> <td align="center" style="border-top:2px solid #39607a"> <form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:2;"> <input type="hidden" name="llr" value="8jskcoska"> <input type="hidden" name="m" value="9808738293923"> <input type="hidden" name="p" value="oi"> <font style="font-weight: normal; font-family:Helvetica; font-size:12px; color:#faa51b;">Email:</font> <input type="text" name="ea" size="20" value="" style="font-size:10pt; border:1px solid #999999;"> <input type="submit" name="go" value="Go" class="submit" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10pt;"> </form> </td> </tr> </table> </div> <!-- END: Constant Contact Basic Opt-in Email List Form --> <!-- BEGIN: SafeSubscribe --> <div align="center" style="padding-top:5px;"> <img src="https://imgssl.constantcontact.com/ui/images1/safe_subscribe_logo.gif" border="0" width="168" height="14" alt=""/> </div> <!-- END: SafeSubscribe --> <!-- BEGIN: Email Marketing you can trust --> <div align="center" style="font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#999999;"> For <a href="http://www.constantcontact.com/jmml/email-marketing.jsp" style="text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#999999;" target="_blank">Email Marketing</a> you can trust </div> <!-- END: Email Marketing you can trust -->
Most of that we won’t need, but we’ll pull the relevant parts out and add them to our form.
- Next, go to the Appearance section of your WordPress control panel and select Edit.
- From the list of files on your right, choose newsletter.php
- The first part we need to change is line 13:
<form id="signup" action="<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" method="post">
- Right above where it says:
<input class="email"
paste the two hidden fields from your Constant Contact Form:
<input type="hidden" name="llr" value="8jskcoska"> <input type="hidden" name="m" value="9808738293923">
- Replace <?php echo “http://” . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’]; ?> with the “action” from our embed code
http://visitor.r20.constantcontact.com/d.jsp - Next change:
<input class="email" type="text" name="email" id="email" value="<?php _e('Your Email Address', 'organizedthemes'); ?>" onfocus="if (this.value == '<?php _e('Your Email Address', 'organizedthemes'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Your Email Address', 'organizedthemes'); ?>';}" />by replacing
name="email"with thename="ea"from the code above. - Save your changes.
That should give you a newsletter.php file that looks something like this:
<?php
/**
* The template for the newsletter bar.
*
*
* @package WordPress
* @subpackage Foxy
* @since Version 1.0.0
*/
?>
<div class="newsletter">
<form id="signup" action="http://visitor.r20.constantcontact.com/d.jsp" method="post">
<fieldset>
<input type="hidden" name="llr" value="8jskcoska">
<input type="hidden" name="m" value="9808738293923">
<input class="email" type="text" name="ea" id="email" value="<?php _e('Your Email Address', 'organizedthemes'); ?>" onfocus="if (this.value == '<?php _e('Your Email Address', 'organizedthemes'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Your Email Address', 'organizedthemes'); ?>';}" />
<input type="submit" name="submit" value="Join" class="button" alt="Submit" />
</fieldset>
</form>
</div>
I generally take out the <span id=”notification”> section too as it’s no loner needed.
If you have any trouble or questions, just post them in the Foxy forum.
