05/01/2012

Step by Step: @Formstack to @Madmimi Integration using WebHooks

We have been using Formstack and Madmimi for several years now and have marvelled at the power of both of these products. For some reason there has been no integration available from Formstack to load data into Madmimi, until today.

With the excellent help from Shawn over at Madmimi, we were able to put together a simple integration that allows Formstack forms to populate Madmimi "audience" lists quite easily. The secret is in the use of the "WebHooks" submit action in Formstack along with the Webform functionality available in Madmimi. Instead of using the webform that Madmimi generates, we created a beautiful newsletter registration page in Formstack and tied this form to a Madmimi list.

Here's how...

1. The first step is to activate and create a Madmimi webform. We are using the v2 version of Madmimi so your screen shots may vary. This should work with v1 although we did not test with v1.

Below is a screen shot of a new webform in Madmimi. The red boxes identify the parts of the system that can be used to modify the form to

a. Access the webform feature.


b. Give your new form a name.

c. Specify which Madmimi audience list you wish to populate. NOTE: You must include at least one list for this integration to work! Note that the screen shot has no lists attached, so one must be selected (we've asked Madmimi to fix this so one list must be selected before you save.)

d. Add which fields you wish to collect. For now this is a form that collects just the email address.

e. Save the form.

Webform1
2. Click the Embed tab to take note of a few very important items. I've highlighted our sample NewPath signup form so you can see a real example.

The URL and fields that you must use in your formstack form are red-boxed below. Take note of them. You should have 1 URL and a field name for each field of your subscription form.

The URL and field names are the key to getting Madmimi to accept external data. While this HTML is used normally used to embed a subscription form on your website, you will use the URL and the field names to create the necessary configuration into Formstack. You will not use the rest of the HTML as Formstack will become your registration form builder. Note these and make sure they are letter for letter perfect (copy and paste is your friend!). Make sure that the URL has a key. In this case it is 22164 (do not use this number, as it is our form - Madmimi will generate one for you when you save the form).

Npcformembed3. There are some new Advanced features in Madmimi v2 including the option to turn on a single opt-in feature.

Advancedmadmimiwebformsettings

This feature allows your registrants to avoid having to confirm their registration using a link in an automated email that is sent to each subscriber. We created a special list for this webform in Madmimi, so all subscriptions go into a special list separate from our master list without a confirmation from the subscriber. We can then merge/delete/update any registrations manually into the master list using list management.

If you leave this feature off, your subscribers will have to confirm by email before they are unsuppressed from this mailing list, although you can confirm them manually as well. We prefer no extra steps to email subscriptions. Double-opt in does prevent spammy subscriptions in some cases.

4. Ok we're done in Madmimi, let's switch to Formstack and setup a simple form with all the fields we wish to collect.

Here's an email field definition: it is a required field and the name is the same as the Madmimi field we retrieved in step# 2. This is a critical "binding" between Formstack and Madmimi. We have selected "hide label on form" because the binding is kind of ugly and we don't want to confuse our users. We use the "supporting text field" to actually label each part of the form.

Formstackemailfield

You will create one form field for each Madmimi webform. Make sure to remember to name the fields appropriately with the signup[] nomenclature.

Madmimi also will capitalize and split a full name (first name and last name) if you pass in a field with the name signup[name]. The split occurs before the last space character in a name (alex x sirota will be split as "Alex X" for first name and "Sirota" for last name. Do not use the "Name" Formstack field for full names -- these fields send extra data in the FORM POST and you will have to clear out the data. Just use a short answer field in Formstack to collect names.

5. Next, setup the Webhook step in the Email & Redirects section of the Settings part of a Formstack form. See the red-boxed fields below. Note the URL that was also retrieved from Step #2. This is where Formstack will send information after the user submits the form.

Formstackwebhook
6. Finally, you can have another step setup to send the user to a confirmation page that can be setup on your website. Formstack can process a step and then get control of the user to send them to another page. This is a very powerful concept in Formstack, multiple actions after the "Submit" step.

Formstackpostwebhookaction
The result is a nifty newsletter registration page that automatically flows data to Madmimi in real-time, and allows the list administrator to manage the subscriptions.

Webhooks are a brilliant little idea that uses FORM POST actions to send simple data streams between 2 systems. There are probably other integrations that can be done in this manner between 2 web apps that don't have a formal integration setup by the vendor. You can also register a "POST" listener at postbin.heroku.com and then call WebHooks from Formstack all day long to see exactly what Formstack is sending (good for debugging your WebHooks calls and seeing what is the payload).

The WebHooks wiki and blog are down but there is still a video!

 

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment