When using BowTie’s profile data and Zapier integration, collecting and connecting user input is as simple as a few lines of javascript. In this tutorial I will show you how to covert our standard contact form component to use Zapier.

Set up your html form to connect to profile data.

I’m starting with the contact form found in BowTie’s aboutus.html component, but this method is applicable to any HTML form. If you’re repurposing a form as we are in this example, make sure to remove the form method and submit actions. You do not want the browser to submit the form. Submission will be handled through javascript.

Step 1: Our component is initially configured to submit to Formspree. Remove the action as follows:

before:

<form action="//formspree.io/info@bowtie.io" method="POST" class="text-left">

after:

<form class="text-left">

 

Step 2: Convert the submit input into an html button.

before:

<input id="Submit" class="button btn btn-info" name="Submit" type="submit" value="Create Email" />

after:

<button id="update_profile_submit" class="button btn btn-info"/>Submit</button>

 

Step 3: Make sure each of your input fields have an ID or selector you can easily reference in your javascript. For this example we will use the ID’s profile_name, profile_email, and profile_message

 

Step 4: Lastly, if you plan to user this information to build a marketing list, include an opt-in such as this example.

<label><input id="profile_listserve"  type="checkbox" checked > Yes, I would like to be added to your mailing list.</label>

 

Using Javascript to update the browser profile.

We will be using the bowtie.user.profile function to define the following data in the users profile. This is what will be available for use when we set up our connection in Zapier.

Add your Javascript

We want to collect the proper input values, and pass them into the object we’ll use to update the profile. Define the variables and tie them to the IDs you created for each input in the previous step. You can add additional data to the object (such as the name of the form) to help manage multiple forms and connections in Zapier. I’ve also added an alert pop up to follow the submission.

$(function(){
  $("#update_profile_submit").on("click", function(){
    var profileName = $('#profile_name').val();
    var profileEmail = $('#profile_email').val();
    var profileMessage = $('#profile_message').val();
    var profileListserve = $('#profile_listserve:checked').val();

    var profileData = {
      name: profileName,
      email: profileEmail,
      message: profileMessage,
      form: "contact form about page", // use this to filter in Zapier
      listserve: profileListserve ? true : false,
    };

    // Submit Contact Form on AboutUS
    bowtie.user.profile(profileData, function(){
      alert("Thank you for contacting us.  We will be in touch shortly.");
    });
    return false;
  });
});

 

Testing the Form

You can test the form in your local build by running $ bowtie serve

Example of Contact Form Updating Profile Browser Data

Visit your Project Dashboard on BowTie.io to find the user profile associated with your test session. If you are developing locally, make sure you have the test environment selected for your project.

Bowtie Browser Data attached to visitor

Note: If you update and resubmit the form, the visitor profile will be updated.

 

Configure Zapier

Zapier is a service designed to connect various applications through ‘Zaps’. Zaps at the most basic level contain a Trigger and an Action that results from that trigger. BowTie is able to trigger Zaps when a users profile is updated allowing us to push this data into other applications. Setup an account on Zapier.

Build a Zap

Set up BowTie as the trigger

Step 1: In Zapier, create a new Zap and select BowTie as the trigger app.

Choose Zapier as a Trigger

Step 2: Select “Update Profile” as the Trigger. This will push updated browser data to Zapier anytime a browser profile is updated.

Choose Update Profile as Trigger from BowTie

Step 3: Zapier will ask you which BowTie Account to use for this Zap. You can select a previously used account or setup a new one. It is important to note that each BowTie environment needs to be set up separately. For example: if you are testing locally, connect your test environment. You can always go back and connect the live environment later.

Connect BowTie Secret Key

Step 4: Test the connection and sample the most recent data from BowTie. Data output from the BowTie trigger is what we can connect to other applications actions.

Data Output from BowTie Trigger

 

Sending an Email using Zapier

For the second part of this Zap we need to select an Action. We are going to use Email by Zapier to send us an email with the BowTie data.

Step 1: Select ‘Email by Zapier’ as your action. Email by Zapier will provide an email template. This template will be used to build and send an email each time your BowTie trigger is fired.

Select Email by Zapier and send email as action

Step 2: Match the data output from the BowTie Trigger to any of the fields in the email template. In my example, I am connecting the profile name to the from field, profile email to the reply field, and profile message to the email message field.

Zapier Email Template

Step 3: Save the template. Zapier will show you the email action output and then test send an email.

zapier email dataout

Email received!

Email received

At this point you can test your form and look for the Zap output. Each time you submit new data through the browser profile, Zapier will trigger and send you an email.

 

Capture submitted email addresses into an email list using Multizap

A more powerful way to leverage Zapier with BowTie is to build Multizaps. Multizaps allow you to trigger multiple actions with the same trigger.

Lets extend what we just built to capture names and emails into a marketing list. For this example we will us Google Sheets to build our list, but you can replace the action with any number of supported apps. Here is a tutorial on connecting with mailchimp.

Set up a Filter to Verify User Opt-in

When setting up the form, we included a checkbox asking if users would like to be added to our marketing list. This passed through a true or false in the profile that we can use to filter further actions in this Zap. This way the action of adding a user to our list will only happen if they checked the opt-in box providing a true value.

Zapier Filter Option

Filters contain three parts. The data field to filter by -> The Condition -> The Value to check against. In our example the filter checks if data_profile_listserve contains (text) “true”. If these conditions are met, the multizap will continue to our next action, adding a spreadsheet row.

 

Create a new spreadsheet entry

Create new spreadsheet row

Add a new action to our zap, select Google sheets and Add a spreadsheet row. You will be prompted to connect your Google account, and then presented with a sheets template.

Google Sheets Template

Select the File and sheet you would like to create new rows in. Zapier will then pull in the various columns and allow you to map the Step 1 data output from BowTie to each column. Save and test the action. You can the new row in Google sheets.

Google Sheets Entry

Taking Integration Further

As you can see in this example, using BowTie profile data to collect, update and push data into other applications is easy when using our Zapier integration. Checkout common BowTie Zaps and feel free to get creative. If you have an interesting application of BowTie and Zapier, let us know in the comments below.

 


If you are new to BowTie, check out our other Getting Started guides.

Getting Started with BowTie:


To keep up to date, follow us on twitter at @bowtie_io

Questions? Please comment! Thanks for your support and feedback.