MailChimp Email Subscription Box caused Visual Editor to Hang

I was trying to add the MailChimp Email Subscription Box into my blog when I realized it was a mistake. The Visual Editor in Headway Premium seemed to have problem with MailChimp. Once I have pasted the MailChimp email subscription script into the Text/HTML/PHP Leaf, the Visual Editor seemed to load forever – it has hung!

Visual Editor Safe Mode Come to My Rescue
There was nothing I could do when the Visual Editor was hung. Luckily, I realized there was a Visual Editor Safe Mode that I could resort to. If you have encountered similar problem when inserted any custom code and then crashed with Visual Editor, try the following steps to resolve the problem.

1. Go to Wordpress dashboard and click on “Headway” on the left panel to expand it.
2. Click on “Configuration” then “Developer Options”.
3. Scroll down a little and click on “Enter Visual Editor - Safe Mode” under “Visual Editor Safe Mode”.
4. It will bring you to the Visual Editor but now all the contents of the Leafs would not display. (Do not be alarmed as this is how Visual Editor Safe Mode works).
5. So here is the good chance, go quickly to the problematic Leaf and take away the script that caused the issue.
6. Do a “Save all changes”, your visual editor should be back to normal and you will not see the Visual Editor loads forever message.

The Safe Mode is a nice little tool to use but even though it solved the problem of Visual Editor hanging but I still couldn’t get my MailChimp email subscription box working.

MailChimp Email Subscription Form Plugin
Somebody at the Wordpress.org forum suggested to use the MailChimp List Subscribe Form plugin from MailChimp, it can be downloaded from here. The plugin was easy to install but there were some setting and changes need to be done before it was completed. If you want to try the MailChimp plugin, follow the below steps.

1. At the Visual Editor, change the previous problematic leaf from Text/HTML/PHP Leaf to Widget Ready Sidebar Leaf.
   (Because you are using the plugin not the script so you do not need the Text/HTL/PHP Leaf now).
2. Unfortunately, there is no way to change directly so you have to delete the old Leaf and insert the new Leaf.
3. Then go back to wordpress dashboard, click on “Appearance” then “Widgets”, there should be a new widget available, drag “MailChimp Widget” into the new widget.
   
   (You should see the MailChimp Widget available if you have installed the plugin successfully).
4. Next, go to the “MailChimp List Setup” under the “Settings” at the left-hand panel.
5. Select the email subscription list that you have created in your MailChimp account.
6. You can leave the rest as default setting but you can always change the color if you want to but remember to click on “Update Subscribe from Setting” if you made any changes.

Add Images to MailChimp Email Subscription Form
If you find your MailChimp email subscription form too boring, you can beautify it by adding a background images. Style it using the custom.css code, see the below steps on how to change it.

1. At the wordpress dashboard, go to “Appearance” then “Editor”.
2. Select “custom.css” under “Style” at the lower right hand panel.
3. Add in the following code:

<body.custom #leaf-55 {
background-image:url('http://affiliatethinktank.com/wp-content/uploads/2010/06/email-subscription.jpg');
background-repeat:no-repeat;
background-color:#000000;
}

Note:
Please replace the URL of the background image with your own image URL.

In addition, the Leaf ID number (#leaf-55) may be different from yours so replace with the above ID with the ID of your Widget Ready Leaf. You can find out the Widget Ready Leaf ID either from the Widgets area or from the Visual Editor. The ID is shown at the top left side of the Leaf.