How to Save Shopify Contact Form Data to Google Sheets #Shopify

hello everyone we are here with another video tutorial in which I'm just gonna show you how to save Shopify contact form data to Google sheets everyone knows how Shopify work is this send the contact forming concrete enquiry form data to the admin email which you provide when you create the store it doesn't save this data into any kind of database like Shopify admin panel or there isn't any plug-in as well which can capture the data and save it we to any database you have so the best way to keep this data safe just in case you lost those inquiry emails is to save them into Google sheets and I'm gonna show you how to integrate that today with my test Shopify store and make sure you follow this video till the end exactly as I do just to make sure everything is working on your end and one thing for sure just make sure your store is jQuery enabled because the setup needs some JavaScript integration plus jqd as well so I believe when my store jQuery is already installed so I'm just gonna go ahead and setup everything as we need to so just need to make sure that you have the jQuery in order to make this work and the rest of the stuff I will just show you in this video so now if you look at this my github project you can see there are two steps we need to follow which is setup Google sheet to accept the data and set up shop if I contact form to send the data to Google sheet we will begin with setting up our Google sheet first so I need to go into my drive and create a new sheet I'm gonna name it test sheet to see Shopify contact form and data okay so once that what we need to do is do we need to work on the first row on the very first row we need to input the name of those fields the form data we need to save in here so what I'm gonna go ahead and what I'm gonna do is go ahead and copy the names of those inputs which are just right here in that Google sheet well I'm gonna start from here I will show you why since I have only four fields in my this Shopify form so I'm gonna save those for plus one another in which I'm gonna store the time when someone exactly submit that form just to make sure I know when this inquiry was submitted there is no other way you can track that otherwise it will only store the contact name contact phone email and stuff whatever you add in there but in that case you are you never knew when this inquiry was submitted and in order to get rid of that I just set up another field which is hidden which we need to add in to our Shopify form later on but its name I'm just going to copy it over into my Shopify sheet right now just to make sure everything is set up okay so once they those filters set up you'd doesn't need to play with it any time later on because if you change something which is not here like the name of the field which we sends from here and which is here if it's different even a single it's not never it's not going to save that field in here so since I just created a new sheet with the names I need to store in here what I need to do is to go to tools and click on script editor and once I am on that you can see the default function my function I need to replace it with this file I just have right here google scripts drawer GS do not change anything in it you just need to copy the raw data which we have just right here copy everything and paste to it basically replace with what we already have in there done so let's save it and call something Shopify contact from inject submit okay so once it's done what you need to do is to go to run run function and click on setup ok so wait a second something went wrong review permission and you need to select your account and allow the permission this us click on allow okay so yeah it's done so next thing you need to do is to click on the publish and click on deploy as web app and yeah you need to check this third option which is n anyone even anonymous that's very important if you do not do that you can get an error and your data will never process so just select this option click on deploy and once it's done you need to copy that link there's the most important part that's how we the script know where we are sending the data ok so click OK then then you can close this one if you want ok since Google is already set up everything is done here we got what we needed which is basically this link where we are going to send that data so next step will be to set up Shopify contact form to send the data ok and in order to do that you need to access the theme code like I have this life theme just right here and what I need to do is to go to edit code okay and in edit gold you need to find the template or where you have your contact form code in the backend so first thing you need to go to paydirt contact in most themes all that it is in here but since my team is section ready so it's in contact - templates so I'm gonna go right here and there you can see I have the contact form code in the shop if I just write here okay so by default Shopify contact form have the ID as you can just see right here contact underscore form okay just remember this so what we need to do is to now first of all you need to install this jQuery library in there so what I'm gonna do is click on this one and just copy the name the name of this sorry till that point don't you need to go in here create a new Sh black file to Archie's like this and after that you have copy everything which is in there to your newly-created JS file it's just right here I'm gonna save it so once it's done what you need to do is to go to contact template okay and at the end of the code you need to add the script tag so you can add the gqt in here and the jQuery is also in my github repository which you need to go to this one you got it just copy the wallet of this one copy everything from there go back here and paste it just in here okay so that's the important part since I told you that default shop if I contact him forum have the ideas contact underscore form so you are good with that because I already have edit in this coach and next thing you need to do is remember the URL we copied from that script file you need to paste it in here replace it with this one like this and after that there is another option mmm that's how it's gonna work when you click on that submit button it's supposed to trigger and event a function on click event it is gonna trigger that function which is just right here okay so there are two options sorry three options first thing which happened by default when you click on the submit button it sends the data to the admin email you provide when you create the store the second thing with this script we can do it's going to send the data to the Google sheet but it's not gonna send the data to the Shopify admin but if you want both enabled you need to do is to remove this line do eat this if you want to send data to admin email address okay since I want to set up there so I'm gonna remove that line and the next thing you need to do is to save it just right here okay since let's see if I need to locate the input button and you need to check if there is an ID already assigned to your submit button since in my case it's not assigned so I need to assign the ID because that's how this function is going to be trigger when we click on that button and in jQuery we need to capture that I'm gonna give the same idea you have here to this input button like this if the ID is already assigned what you need to do is to use that same ID just right here okay you do not need to change the ID existing ID because it can break other functions which are assigned with that ID so I already have done that and the next thing you remember in the Google sheet I'd added date and time and in order to get that working you need to copy this hidden field which I just have right here into your form tag of shop if Y you just make sure you enter it after that this form starting tag anywhere okay so in that case I'm just gonna do it right here or maybe just after the errors so what's it it's gonna do it's a hidden field it will send the date and time with this name the current time when someone submits the form to that Google sheet so we can crack it's working okay and the last thing here what we need to do is to we need to add that script file because since we need it only on this base so there is no need to add it into the default team dot liquid okay it's good it can just make some it can basically break your stuff but I hope it's not but since we need it so we're gonna do it on the contact page only then that's we're gonna do bye you need to copy existing script file place yesterday to do is to find it in here like this and enjoy just right here okay and then you need to copy the name of this one like this save it and I believe we are all set so let's go here then test if it's gonna work or not and before that I'm gonna verify a few things by inspecting the court if my stuff is in there or not so if you inspect the code you can see that hidden field which says date/time radio is just right here that's what is going to send to the Google sheet when I click on the submit button and you can see the ID is there and our sheet is just right here you can click open a new tab just to make sure if it's live or not and you can see our script is also there and now what we are gonna do is go ahead and run a test by Walker mind I'm gonna use your phone Elle's blah blah blah anything okay so let's hit it and see how it works okay I need to verify because I already submitted some straps okay it says thank you for contacting us we will get back to you as soon as possible which means the formulator is sent already and there should be an email which you can see just right here the car and the phone and my email address interesting something out it means we got that on our Shopify admin now we need to go in here and yeah there you go now you can see you have this data just right here which was the date and time when we submitted and contact name and contact phone contact email and contact body so I hope you followed everything you can style your sheet any way you like it it's totally up to you I'm just going to submit another test data by a name of LAX and phone number is one two three and email is email and email comm and comment is blah blah blah doesn't need to make any sense I hope there isn't any other bus yeah it is so let's submit and the foam that goes through and I should also get an email like this one and when you go back in here it's also supposed to be in here as well I'm breathing for it let me see if there is any thing missing store files it goes through the email event received on my email yet yes it does okay yeah and now you can see you have this data just right here you can format your sheet any way you like it it's totally up to you Phil colored this and this in here like this yep so these are just the things you can do on your sheet it's totally up to you it doesn't matter you can keep it clean or you can store it anywhere any way you'd like but that's how it works and I just showed you everything from start to scratch from start until the end and I hope it makes sense bird if you feel difficult to get it done you can contact me through my email address you can contact me through my website you can contact me through my upper profile and just let me know if you want me to setup it for you I will do it but that's the easiest way and simple way to do it get to get it done to save your shopify contact form letter to Google sheets like how I showed you just right here thank you so much for watching and please give it a thumbs up if you find this useful for you thank you so much and have a nice day bye bye

Channel: Alex Brown - WAQAR

Views: 2,736

Keywords: Web Development, Google Forms, Html Forms, Google Sheets, Google Scripts, Shopify Contact Form, Contact form, Shopify Contact Form Data, Save Shopify Contact Form Data, Save Shopify Contact, Save Shopify Contact Form, Save Shopify Contact Form Data to Google Sheets, Shopify Contact Form Data to Google Sheets, Shopify template, Shopify themes, 2021

Id: ENtbd0Qp5RY

Length: 19min 37sec (1177 seconds)

Published: Mon Nov 26 2018