WIX plus SSL plus MailChimpPublished: 04-Feb-2015
Build a subscription form with MailChimp they said. It'll be easy they said.
Well, it is. And it isn't.
First, here's a 'but why Creature, why do you need MailChimp in your WIX site?".
Good Question. Here's the short answer.
I was attempting to build a custom tab for my facebook page, as you do, when I noticed facebook asking for a bunch of URLs about privacy policies and stuff. These are required now before submitting an app. Yeap, even for a tab on a page. After a bit of research into this headache I discovered that it's a bit important to force the Secure Socket Layer protocol (SSL) when we're collecting customer data. And then I thought: "hey, I wonder if my WIX contact form is compliant to this standard?". My continuing research said: "No!".
After my initial panic subsided, I thought: "you know self, I don't really like how the WIX contact form dumps mail into an inbox anyway". Everywhere I surf I'm reading: "you've gotta build a list, you've gotta send newsletters, it's the only way".
You know, marketing and stuff.
So, that's my story. Wait. No. That's only a little bit of the story. There's heaps more.
WIX: I love WIX. Kind of. I went poking around for information on SSL and came up short. I did find a help request in the WIX feature requests pile asking if WIX has SSL and WIX responding "No". And also finding that this particular feature request seems to stretch back to the beginning of time. Lot's of people want this - people who are claiming that their business would 'walk' even without it. And, stubbornly, no updates from WIX support and no workarounds.
OK. "So it can't be done", said I. Wait a minute. Giving up isn't the Creature's way. In the face of the tumultuous despair of others, I decided to look for a workaround.
I've used MailChimp in the past on another site in order to send Christmas cards to customers. Because I'm nice. And I know that MailChimp has some good controls over building lists and sending newsletters. So I got to thinking about MailChimp. It helps build customer lists. And there's some free options in MailChimp. I'm down with free, and MailChimp offers some configuration flexibility.
Now, to quickly summarise, there's a few ways to skin this cat. I'm going to briefly gloss over a few. Hopefully enough to help you understand why I chose my preferred option. Some of these options you may wish to pursue, and I say, go ahead. It's just that the options I avoided weren't for me for one reason or another.
WIX / MailChimp options
- embed html using WIX's HTML App. This was my first choice, but the embedded form doesn't include all the promised features. And I didn't like it because some features available in another section of MailChimp configuration was bafflingly not available in the embedded version of the same form. And figuring out how to force SSL was hurting my head.
- I then discovered a WIX app built by MailChimp (which is free). It's great. Assuming you only want to collect First Name, Last Name and eMail address. Not enough for the Creature. And I couldn't be bothered to find out if it forced SSL or not. Any takers want some homework?
- There might be more possible ways to do what I did. I settled on Option 4.
- Embed HTML using the WIX App, but as a URL only. It's the same as Option 1, but the only html required (and it's not HTML) is the URL pointing to the actual form, and none of the HTML of the form. I still am not a huge fan of this option, but this seems to have the most flexibility as far as configuration is concerned. Oh, and you can force SSL. Yippee. I mean, that was one of the must-have features in the first place.
So, here's a 'how to use MailChimp to create a "Contact Me" form using their List builder Form thingy' and later, force a secure connection.
- Log in to MailChimp (it's here by-the-way -> http://mailchimp.com/).
- If you've just created an account, you can probably skip to 5. You'll be forced to create a list about now, and that starts at 5.
- There's a menu at the top of MailChimp that includes a menu option called "Lists". Click this one.
- If you need to or want to, click on the "Create List" button. Or, you can work with an existing list if you're already using MailChimp.
- When your list is created (or opened), you'll then be presented with another menu, which includes the option "Sign-up forms" (without the quotes). If you're not sure, click this option. You'll then be presented with options for creating various types of forms. You want "Embedded Forms". Click the button called "Select" to the immediate right of "Embedded Forms". You'll then be presented with your Form. Which you'll be able to use onWIX. But use my secret way. You'll like it.
So, once you've gotten into the form builder, you'll want to add the fields of information that you want to collect. In the interest of saving you time, find the option "Edit required fields in the form builder." Click "the form builder" link. Here, you'll want to add and maybe remove some fields.
I wanted to build a "Contact Me" form. So, I included a text field that I used as a Message holder. You know, so that if someone contacted me they could let me know why they were contacting me. I also created a Check Boxes field. The title I made "Subscribe to our Newsletter?" and the one option was given the value "Yes Please! (I know you'll send me no more than one per week...)". And the option is not filled in. Meaning that a person has to "Opt-In" in order to receive the newsletter. This is called Confirmed Opt-In or COI (because it is coupled with MailChimp's built-in email confirmation process). I also include reCAPTCHA and the option to allow the end-user to receive HTML or text newsletters. Leave the preferred format as HTML. The reCAPTCHA one is useful to help prevent spam-bots from messing with your life.
Embedding Your MailChimp Form into a WIX HTML App
Just a quick note: MailChimp is pretty cool, but a lot of its features are hidden in plain site. You might have worked this out already by now.
Once you have your contact form built to your satisfaction, the next step is to take the URL (you'll find it in the MailChimp form builder), and copy it into a new tab of your browser. From here, the URL will magically unfold. I'm going to give you an example URL to show you what to change:
It starts like this:
http://eepurl.com/XXXXXX (where XXXXXX is the link to your form that you just made).
When it's pasted into a tab in your browser, it unfolds to look like this (remember, this is for a WIX site - if you're building for a different web host platform, expect something different around about now):
http://wix.us10.list-manage1.com/subscribe?u=XXXXXXXXXXXXXXXXXXXXXXXXX&id=XXXXXXXXXX (where u=XXXXXXXXXXXXXXXXXXXXXXXXX&id=XXXXXXXXXX is the expanded link to your form.
This is what you need to change to secure your happiness:
Add an "s" to the protocol do-hicky, and remove the 1 from list-manage1.com portion of the URL. Once you've done that, you can then take that URL and add it to an HTML App on your WIX site (the URL-only version of the HTML App).
Then click-and-drag-and size the form. The https part is SSL. Yes. WIX does have SSL. Thanks WIX Support. Not!
Oh No. It isn't perfect. Well, here's how to make it the best you can:
On the mobile version of your WIX site, drag the form to the edges of the mobile phone display. It's the best that can be done. I've found that I have to put my phone on it's side in order to really be able to use the form effectively. Not ideal. (Anyone know better, you know how to reach me right?)
In MailChimp, I have some more tasks for you. Since this is a "Contact Me" form, and MailChimp has "Subscription" on the brain, there's a few things you need to customise to send a consistent message.
Sign-Up Thank You Page
Since the form is embedded in an iFrame on WIX and MailChimp forces the inclusion of a '<< return to our website' button on it's thank you form, clicking on that button will launch your site within your site (you read that right).
You need to create a custom Thank You form.
The way I did this was to create a copy of the Contact Me page in WIX, and then:
- name it appropriately, set it's SEO and such
- remove it from the site menu
- remove the MailChimp form
- replace the MailChimp form with a thank you statement (I based mine on the standard MailChimp text - that way I didn't have to think too much harder).
- Then publish your site and grab the address of this new form. You then take the URL from your browser from this thank you form and paste it into a field back in MailChimp's configuration for their Thank You form.
It works great. It's tricky though.
Opt-in confirmation email
First change the body text to be something you prefer. Copy your body text before you click OK. You'll be needing this text that you've just copied to clipboard in a step coming up.
Now go to the translation page. In the fourth field down (the Body field, at time of writing), replaced the text that's there with whatever you have in your clipboard (ie. paste over the existing text).
Change the default button name to "Click Me" (or whatever you prefer).
I change any "Subscription" message to "Confirm your email address" (more-or-less).
Save your changes, and go back to the basic version of this form. If anything else needs changing, go ahead and do it now (don't forget to save the changes).
Confirmation "thank you" page
Here you want to change all references to "Subscription" to "eMail Confirmed". Or similar. And I thank the person for contacting us and that we'll get back to them shortly. Don't forget the translation page.
Final "welcome" email
Again, change subscription where you can to "eMail Confirmed". Or similar. I leave the "unsubscribe" button on this email "as is" presently. This is because I can't think of a better way to convey the message of enabling the person to remove themselves from the list (whether or not they opted-in to the newsletter or not...). If you've got ideas, let me know. I'm drained of inspiration right now...
I think that's all of it. Phew!
You know what, I'd have liked all of this to be easier and just a bit more flexible. On both the WIX side and the MailChimp side.
But it's great value for free!