Jamie's Blog

Lessons from a life of startups, coding, countryside, and kids

Zapier Marketing Automation for Consultants

2015 04 07 at 18.38

I’m rebuilding my consulting site as part of a wider process of marketing my services. One crucial part is how people contact me: I like to have a form because the typical emails I get are usually pretty vague, leading to even more vague and confusing initial conversations.

From: bill-the-guy@gmail.com
Hi,
I’m building a startup and looking for Rails developers. Are you available?

Thanks,
Bill

This gives me nothing to work with. I’ve no idea if they’re a good fit, an interesting project, or what advice I can offer them. So, I prefer a structured form with a few questions just so I can do some preparation before an initial call.

My old contact form was an embedded Wufoo form. That was ok but I feel the Wufoo styling had become very recognisable and the forms can be slow to load. My current form is an embedded TypeForm. Now, Typeform is just gorgeous but it’s also slow to load (I never want my prospects to see a loading spinner!) and I have some anecdotal experience that non-technical people find it confusing.

It was time to go back to basics and just use a HTML form. My CMS, Statamic, has a forms add-on but it’s overkill. Did you know that you can submit a HTML form to any site? This is often a web application security hole (called a Cross-site request forgery) but some sites like FormKeep and (d-d-duh! getting to the point…) Zapier, are designed to accept form posts from any source. Here’s how we can use Zapier to process our form data…

Setting up Zapier

Receiving Form Input

Incoming HTTP requests are called “webhooks” so that’s what you’re going to use as our trigger. Zapier will give you a URL for you so you’re form will look something like this (note the action attribute which points to our Zapier url):

<form accept-charset="UTF-8" action="https://zapier.com/hooks/catch/yourwebhook/" method="POST" id="contact">
    <label for="name">Your name</label>
    <input type="text" name="name" id="name">

    <label for="from">The best email to contact you on</label>
    <input type="email" name="email" id="from">

    <label for="url">Your website</label>
    <input type="url" name="url" id="url">

    <label for="project">Tell me about your project</label>
    <textarea name="project" id="project"></textarea>

    <button type="submit">Submit</button>
  </form>

But… the response the your contact will get from Zapier isn’t very friendly or pretty so it’s probably best to wrap the form in an AJAX request, handle the response yourself, and update the form UI appropriately. Something like this will do the job:

 $('form#contact').on('submit', '', function(event){
    $.ajax({
      type: "POST",
      url: "https://zapier.com/hooks/catch/b2bxk1/",
      data: $("this").serialize(),
      success: function(_data) {
        var msg = "<p class='success'>Thanks! I'll be in touch soon</p>";
        $("form#contact").replaceWith(msg);
      },
      error: function() {
        var mailto = "mailto:jamie@ideasasylum.com?subject=Ideas Asylum Project";
        var msg = "<p class='error'>Oh, drat. Something went horribly wrong. Please just <a href='"+mailto+"'>email me</a> instead</p>";
        $("form#contact").append(msg);
      }
    });
    event.preventDefault();
  });

Zapier will capture all the form data and we can pass that to our action. You could directly trigger an action like adding the information to a Google spreadsheet, or a contact in your CRM, but you’ll almost certainly want to trigger multiple actions from the one form input…

Triggering Multiple Actions

It wasn’t immediately clear how I’d get Zapier to trigger multiple actions and the trick comes in the form of “delayed triggers”. Your first ‘zap’ will receive the webhook and setup the ‘delayed trigger’. The name of the delayed trigger is important so remember it! (I’ve no idea why Zapier can’t give you a list of delayed triggers to choose from)

First Zap

Next, you setup a zap to fire based on the delayed trigger, giving it the name you remembered above.

Setup the Delayed Trigger

That’s it. You can have as many zaps run for each delayed trigger. The full documentation is here.

The final system…

Here’s my current setup which can easily be extended with new actions:

Final System

  1. Form input (webhook) -> delayed trigger
  2. Send an email to myself, from the contact with the project details so I can reply directly
  3. Add the contact to Contactually as a contact
  4. Add the contact to Drip as a subscriber (but not subscribed to a campaign yet)