In order to connect Zapier, please make sure that you have added a new contact form on your Your Web Design Studio Builder site. This has to be one of the custom forms:
Then follow the instructions below.
1. Logging in to Zapier.
2. Adding Your Web Design Studio Builder app to Zapier.
You will need to add Your Web Design Studio Builder to your Zapier account. For that follow the link below and click “Accept invite & build a Zap”.
Here's how it will look like:
3. Connecting the apps.
3.1. After you've added Your Web Design Studio Builder to Zapier, you'll need to connect the services. Click on Make a Zap!
3.2. Search for Your Web Design Studio Builder in the list of available apps. Paste Your Web Design Studio Builder in the search field and select it:
3.3. After you've chosen Your Web Design Studio Builder, you'll be offered a trigger to connect with another service. We have one - tracking form submission. Click save to continue:
3.4. Indicate which site and form on Your Web Design Studio Builder you'll be receiving the data from. Click Connect an account:
You'll be asked to enter the unique IDs which will help Zapier set a connection with the relevant site:
Copy Site ID and Secret key from your Your Web Design Studio Builder account:
...and paste them in the pop-up window on Zapier's end. Click Yes, continue:
3.5. You have now linked Your Web Design Studio Builder and Zapier for a selected website. Click Save + continue:
Great! We have connected Zapier, and now it's time to test it.
4. Test form submission
4.1. Connecting a contact form on Your Web Design Studio Builder to Zapier.
First please make sure that the contact form is set to send data to Zapier. For that enter the site editor, open the form settings and navigate to the Action tab. In the Connected Services section choose the newly created Zapier integration from the dropdown list:
4.2. Enter the name of the form in the Form label field:
4.3. Receiving the data from the form.
Return to the tab with the Zapier and select the form by the name you just entered in the editor. If there is no such name yet, click on Refresh field:
4.4. The system will display demo data according to the form fields. Make sure that all the required fields are there and click Continue:
5. Adding the app to process the form submission data
This is the key stage of the whole setup process!
Here you will be able to connect another service on Zapier to process the data, depending on your needs. This may be sending notifications to Slack, creating a lead in CRM, sending the data from the form to a spreadsheet etc.
Let's try and send the form submissions to Google Sheets.
As an example, we'll configure the table in a way that each new form submission creates a new row in the table.
5.1. Choose Google Sheets from the list of available apps:
5.2. Set an action “Create Spreadsheet Row”:
5.3. Connect your Google account. Click Connect an Account and follow the instructions, then click Continue.
5.4. Create a spreadsheet where you'd like to receive the data; the names of the columns have to correspond to the names of the form fields. See an example below:
5.5. Select Google drive, spreadsheet and worksheet which you created to collect data:
5.6. Then the system will ask you to select which column each form field is related to:
After you have linked the columns and the form fields, click Continue:
5.7. Click Test this step. If you did everything right, you will see a success message like on screenshot below:
Check that the data has been sent to the spreadsheet:
5.8. Name your Zap and turn it on:
Now publish your website to start gathering Your Web Design Studio Builder form submissions!
Additionally, connect Telegram to the contact form to receive instant notifications when a form is submitted: