Access to the Gatsby Form Field API is available to customers on our Brand and Enterprise tiers. 

This functionality is useful for collecting Instagram intel from a form on your Cart, Checkout, or Contact pages, and then automatically sending that intel to your Gatsby account for enrichment / marketing automation.

Example:

There are 3 steps to Integrate with the Shopify Cart Page:

  1. Adding the <div>
  2. Calling the function
  3. Customizing the css

First make sure your primary Gatsby script is installed in your theme.liquid file. If you're not sure, see this guide

You will want to head into Shopify >> Online Store >> Edit code

Now open theme.liquid, theme.scss.liquid and static-cart.liquid

Within static-cart.liquid:

Add <form id="gatsbyform">  to whichever new or existing form you want to include the Instagram field in.

Add <div id="gatsby_handle"></div> where you want the Instagram form field to appear

Make sure there are also fields in that form to capture first name and email as well. If not, you can create new & custom form fields in Shopify with Cart Attributes, as explained here

To generate the code for those custom fields / Cart Attributes, use the Shopify UI Elements Generator or copy my template for Name and Email below:

   <p class="cart-attribute__field">
              <label for="your-email">Your Email</label>
              <input id="email" type="text" name="attributes[Your Email]" value="{{ cart.attributes["Your Email"] }}">
            </p>
            <p class="cart-attribute__field">
              <label for="your-email">Your Name</label>
              <input id="name" type="text" name="attributes[Your Name]" value="{{ cart.attributes["Your Name"] }}">
            </p> 

(Now you have a form with at least Name, Email, and @Instagram.)

The next step is to call the function:

handle_instahandle('email','name',’lastname’)

"email", "name" and "lastname" are their respective div ids, and note: the lastname field is optional

In jQuery, Option 1:

$(“button”).click(function(){

handle_instahandle('email','name',’lastname’)

}) 

Replace "button" either with div class or id

In jQuery Option 2, with Form Submission:

$(“gatsbyform”).submit(function(){

handle_instahandle('email','name',’lastname’)

}) 

Option 3, JavaScript (no need to add jQuery):

In your script file, use this:

And then the last step is to design the @instagram field by specifying it in the theme.scss.liquid file or other css file depending on your theme,  with id=gatsby_handle. For example:

# gatsby_handle{

color:#f7f7f7;

}

Did this answer your question?