These steps will add a special Instagram field to an existing form on your website. The instagram handle, email and name (optional) will automatically pass to your Gatsby account for enrichment & automation.

The Instagram field is optional for your customer to fill out.

Every installation is a little bit different, but here is the main 3-step guide:

Step 1: 

Make sure you have your main Gatsby tag already added to your website, and then:

Add this to the main theme:

<script src=""></script>

<script type="text/javascript">$(document).ready(function(){
$('#form name . button name').click(function(event){
$('#form name').trigger('submit')

note: the bold italics are variables for you to insert

Step 2:

Add the following <div> to where you want the Instagram capture field to appear:

<div id="gatsby_handle"></div>
<style>#gatsby_handle{ }</style>

note: Shopify users, if you're trying to add this to checkout.liquid, you need to be on Shopify Plus

Step 3: 

Style the Instagram field, example:

    height: 50px !Important;
    border: 2px solid #59c19d !Important;
    border-radius: 6px !Important;
    font-size: 17px !Important;
    line-height: 30px !Important;
    font-weight: 300 !Important;
    text-align: left !Important;
    margin-bottom: 10px;
    padding: 10px 12px !important;

Check out the source code on our demo at or a very simple HTML form demo example, here:

Contact us with questions, we're happy to help hands on.

Did this answer your question?