Connecting Zapier to your site
Zapier is a tool which allows you to connect your apps so they can work together. Zaps start with a trigger — an event in one of your apps that kicks off your workflow. When the trigger event goes off, Zap performs an action in another app you've chosen.
Thus, you can connect Zapier to a contact form on your site to collect and manage all notifications in the custom app (Google Sheets, Slack, etc). For that, you should set a form submission on your site as a trigger event, and the custom app should be defined as an action.
However, that is not the only convenience you can gain using Zapier at your site at Weblium! You can also track Your Store's performance and keep records on the orders you get there.
Contents:
Connecting Zapier to a contact form
Connecting Zapier to Your Store
Important: These options are available to a Pro site only.
To enable Zapier for your site forms, enter your site settings, navigate to the Form management section (1) and open the Integrations tab (2):
Press on the Zapier field and click on New service:
Copy the generated Site ID and Secret Key to your clipboard:
Sign up or login to your existing Zapier account.
Then, you will need to add your site to your Zapier account. For that, open this link and click on Accept Invite & Build a Zap to be redirected to your Zaps dashboard:
Click on Create Zap at the top right corner:
Give your Zap a distinctive name:
At this stage, select Trigger, enter Form Submission in the search field, and select Sitebuilder Form (1.0.3):
Choose Form Submission as your trigger event:
click Sign in to continue creating the Zap:
In the pop-up, enter the retrieved Site ID and Secret key from your site settings, and then click on Yes, Continue to connect your website to this Zap:
This way, your site will get linked to Zapier. Click Continue:
In the drop-down, choose the relevant contact form on your site and click Continue:
Tip: The form name at Zapier corresponds to the form label in the contact form settings. We recommend you to set a custom name for your form for easier differentiation. For that, check the Changing the form label article.
You will be asked whether you want to test the trigger. We recommend you to run this test to confirm that the right account is connected to your Zap and that the trigger is set up correctly:
If everything is set successfully, you will see the following message. Click Continue with selected record to proceed with setting up the connection between the apps:
Now, choose the app that you will be working with and set it up — select the action event, customize the data that you want to send over to your action app and so on. The instructions on how to set up your action event can be found in the Zapier guide on creating Zaps.
When you reach the testing stage, leave it for a while — you'll come back to it in a few minutes. Instead, go to the Integrations tab in the contact form settings to enable your Zapier automation you have just set up and choose the relevant connection ID in the dropdown:
After that, publish your site:
Go back to your Zapier account and click on Test Step:
View the test result to see how the Create Spreadsheet Row event is executed to Google Sheets:
If everything worked correctly, click Publish to activate the automation:
Done! Now the given contact form will send its data to Google Sheets through Zapier.
Go to Google Sheets and add two new columns “Date” and “Correct date” (you can rename them as you wish later):
Go back to your Zap and edit the Submit Contact Form event. Add the {{zap_meta_utc_iso}} trigger to the new field “Date”:
At this stage, the date and time will be transferred in UTC +0 format to the “Date” column. To transfer the time according to your time zone, you need to add the following formula to the first row of the “Correct date” column: =ARRAYFORMULA(IF(F2:F="", "", TEXT(F2:F + TIME(2,0,0), "yyyy-mm-dd hh:mm:ss"))):
Replace F2:F with the desired column, such as J2:J, if the data is in a different location. To take into account the time zone, adjust the TIME function:
For UTC+2: TIME(2,0,0)
For UTC-5: -TIME(5,0,0)
For a minute offset (for example, UTC-5:30): -TIME(5,30,0).
After that, you can hide the Date column to display only the correct time in the Correct date field. Now the contact form on your website will additionally send the date and time of submission to Google Sheets:
Create a new Excel Spreadsheet on your Google Drive. If you already have it prepared, move to Step 2.
Name the Sheet with the table (optional) and create column headings in the spreadsheet.
Sign up or log into your existing Zapier account.
After getting to your Zaps dashboard, click on Create Zap at the top right corner::
In the new window, name your Zap:
Search for the Webhooks and click it:
Note: Using a Webhook is a paid service at Zapier, but you will have a chance to try it for a week before deciding to upgrade there.
Choose the Catch Hook trigger event :
And double-click Continue to proceed with creating your Zap:
Now, copy your custom webhook URL - you will need it soon. Click Continue:
When you reach the testing stage, leave it for a while — you'll come back to it in a few minutes. Instead, go to Your Store notificaction setting, paste your custom webhook URL into the provided field to enable your Zapier integration and click Connect:
Return to your Zapier account tab and test your trigger - click the Test trigger button and then click Continue with selected record. If you see no errors - congrats! You have just set up your webhook's trigger:
The most convenient way to keep and analyze your data is using Google Sheets, so we will go with this option too:
Among the Action event options, select the Create Spreadsheet Row and click Continue:
Choose your Google account and the spreadsheet where you are going to add your order records to:
Once selected, you will see the field headings you added to your table and you will be able to indicate what data is to be shown in every column of your table. Once ready, click Continue.
You will be offered to try another test - for your Zap's action. Try it by clicking Test step:
After passing the test, you will be offered to turn your Zap on - do it. You can do it by clicking te corresponding Publish button:
Done! Now, Your Store on your site will be sending data to the selected spreadsheet you have set up on Zapier and you will have all your further orders recorded on your Google Drive:
By default, Order Customer Fields Value webhook submits information in the following format: Customer Name,Email,+380501234567,Customer's comment. In the example provided above, this information is submitted to the field E. To make the corresponding partial values to be sent to the next columns (F-G-H-I), you will need to use next formulas to the first rows of the F-I columns:
F column ( Customer name): =ARRAYFORMULA(IF(E2:E="", "", LEFT(E2:E, FIND(",", E2:E) - 1)))
G column ( Email): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E) + 1, FIND(",", E2:E, FIND(",", E2:E) + 1) - FIND(",", E2:E) - 1)))
H column ( Phone): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1, FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1) - FIND(",", E2:E, FIND(",", E2:E) + 1) - 1)))
I column ( Comment): =ARRAYFORMULA(IF(E2:E="", "", RIGHT(E2:E, LEN(E2:E) - FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1))))
Note: Replace the column letters in formulas with the desired column if the data is in a different location. Also, you can check how to submit date and time correctly in the section Submitting date and time to Google Sheets.
Tip: See how you can further manage and organize your Zaps in the Zapier Help Center.
Thus, you can connect Zapier to a contact form on your site to collect and manage all notifications in the custom app (Google Sheets, Slack, etc). For that, you should set a form submission on your site as a trigger event, and the custom app should be defined as an action.
However, that is not the only convenience you can gain using Zapier at your site at Weblium! You can also track Your Store's performance and keep records on the orders you get there.
Contents:
Connecting Zapier to a contact form
Connecting Zapier to Your Store
Important: These options are available to a Pro site only.
Connecting Zapier to a contact form
Step 1. Accessing the Site ID and the Secret key
To enable Zapier for your site forms, enter your site settings, navigate to the Form management section (1) and open the Integrations tab (2):
Press on the Zapier field and click on New service:
Copy the generated Site ID and Secret Key to your clipboard:
Step 2. Accessing your Zapier account
Sign up or login to your existing Zapier account.
Then, you will need to add your site to your Zapier account. For that, open this link and click on Accept Invite & Build a Zap to be redirected to your Zaps dashboard:
Step 3. Creating your Zap's trigger
Click on Create Zap at the top right corner:
Give your Zap a distinctive name:
At this stage, select Trigger, enter Form Submission in the search field, and select Sitebuilder Form (1.0.3):
Choose Form Submission as your trigger event:
click Sign in to continue creating the Zap:
In the pop-up, enter the retrieved Site ID and Secret key from your site settings, and then click on Yes, Continue to connect your website to this Zap:
This way, your site will get linked to Zapier. Click Continue:
In the drop-down, choose the relevant contact form on your site and click Continue:
Tip: The form name at Zapier corresponds to the form label in the contact form settings. We recommend you to set a custom name for your form for easier differentiation. For that, check the Changing the form label article.
You will be asked whether you want to test the trigger. We recommend you to run this test to confirm that the right account is connected to your Zap and that the trigger is set up correctly:
If everything is set successfully, you will see the following message. Click Continue with selected record to proceed with setting up the connection between the apps:
Step 4. Creating your Zap's action
Now, choose the app that you will be working with and set it up — select the action event, customize the data that you want to send over to your action app and so on. The instructions on how to set up your action event can be found in the Zapier guide on creating Zaps.
When you reach the testing stage, leave it for a while — you'll come back to it in a few minutes. Instead, go to the Integrations tab in the contact form settings to enable your Zapier automation you have just set up and choose the relevant connection ID in the dropdown:
After that, publish your site:
Go back to your Zapier account and click on Test Step:
View the test result to see how the Create Spreadsheet Row event is executed to Google Sheets:
If everything worked correctly, click Publish to activate the automation:
Done! Now the given contact form will send its data to Google Sheets through Zapier.
Submitting date and time to Google Sheets
Go to Google Sheets and add two new columns “Date” and “Correct date” (you can rename them as you wish later):
Go back to your Zap and edit the Submit Contact Form event. Add the {{zap_meta_utc_iso}} trigger to the new field “Date”:
At this stage, the date and time will be transferred in UTC +0 format to the “Date” column. To transfer the time according to your time zone, you need to add the following formula to the first row of the “Correct date” column: =ARRAYFORMULA(IF(F2:F="", "", TEXT(F2:F + TIME(2,0,0), "yyyy-mm-dd hh:mm:ss"))):
Replace F2:F with the desired column, such as J2:J, if the data is in a different location. To take into account the time zone, adjust the TIME function:
For UTC+2: TIME(2,0,0)
For UTC-5: -TIME(5,0,0)
For a minute offset (for example, UTC-5:30): -TIME(5,30,0).
After that, you can hide the Date column to display only the correct time in the Correct date field. Now the contact form on your website will additionally send the date and time of submission to Google Sheets:
Connecting Zapier to Your Store
Step 1. Getting prepared
Create a new Excel Spreadsheet on your Google Drive. If you already have it prepared, move to Step 2.
Name the Sheet with the table (optional) and create column headings in the spreadsheet.
Sign up or log into your existing Zapier account.
Step 2. Creating your Zap's trigger
After getting to your Zaps dashboard, click on Create Zap at the top right corner::
In the new window, name your Zap:
Search for the Webhooks and click it:
Note: Using a Webhook is a paid service at Zapier, but you will have a chance to try it for a week before deciding to upgrade there.
Choose the Catch Hook trigger event :
And double-click Continue to proceed with creating your Zap:
Now, copy your custom webhook URL - you will need it soon. Click Continue:
When you reach the testing stage, leave it for a while — you'll come back to it in a few minutes. Instead, go to Your Store notificaction setting, paste your custom webhook URL into the provided field to enable your Zapier integration and click Connect:
Return to your Zapier account tab and test your trigger - click the Test trigger button and then click Continue with selected record. If you see no errors - congrats! You have just set up your webhook's trigger:
Step 3. Creating your Zap's action
The most convenient way to keep and analyze your data is using Google Sheets, so we will go with this option too:
Among the Action event options, select the Create Spreadsheet Row and click Continue:
Choose your Google account and the spreadsheet where you are going to add your order records to:
Once selected, you will see the field headings you added to your table and you will be able to indicate what data is to be shown in every column of your table. Once ready, click Continue.
You will be offered to try another test - for your Zap's action. Try it by clicking Test step:
After passing the test, you will be offered to turn your Zap on - do it. You can do it by clicking te corresponding Publish button:
Done! Now, Your Store on your site will be sending data to the selected spreadsheet you have set up on Zapier and you will have all your further orders recorded on your Google Drive:
Step 4. Parsing data from the webhook "Order Customer Fields Value"
By default, Order Customer Fields Value webhook submits information in the following format: Customer Name,Email,+380501234567,Customer's comment. In the example provided above, this information is submitted to the field E. To make the corresponding partial values to be sent to the next columns (F-G-H-I), you will need to use next formulas to the first rows of the F-I columns:
F column ( Customer name): =ARRAYFORMULA(IF(E2:E="", "", LEFT(E2:E, FIND(",", E2:E) - 1)))
G column ( Email): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E) + 1, FIND(",", E2:E, FIND(",", E2:E) + 1) - FIND(",", E2:E) - 1)))
H column ( Phone): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1, FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1) - FIND(",", E2:E, FIND(",", E2:E) + 1) - 1)))
I column ( Comment): =ARRAYFORMULA(IF(E2:E="", "", RIGHT(E2:E, LEN(E2:E) - FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1))))
Note: Replace the column letters in formulas with the desired column if the data is in a different location. Also, you can check how to submit date and time correctly in the section Submitting date and time to Google Sheets.
Tip: See how you can further manage and organize your Zaps in the Zapier Help Center.
Updated on: 12/04/2024
Thank you!