Improve example

This commit is contained in:
Harshil 2021-02-02 16:45:25 +05:30
parent 64545beaef
commit 65796c9bb5
8 changed files with 88 additions and 9 deletions

View File

@ -28,11 +28,19 @@ Create a [Typeform](https://typeform.com/) account.
## Using Access Token
1. Access your Typeform dashboard.
2. Go to your user profile in the top right.
3. Click on 'Settings' and then click on 'Personal tokens' in the sidebar.
1. Open the Typeform [dashboard](https://admin.typeform.com).
2. Click on your avatar on the top right and select 'Settings'.
3. Click on ***Personal tokens*** under the ***Profile*** section in the sidebar.
4. Click on the ***Generate a new token*** button.
5. Enter a name in the ***Token name*** field and click on the ***Generate token*** button.
6. Use the displayed ***Personal access token*** with your Typeform API credentials in n8n.
5. Enter a name in the ***Token name*** field.
6. Click on the ***Generate token*** button.
7. Click on the ***Copy*** button to copy the access token.
9. Enter a name for your credentials in the ***Credentials Name*** field in the 'Typeform API' credentials in n8n.
10. Paste the access token in the ***Access Token*** field in the 'Typeform API' credentials in n8n.
11. Click the ***Create*** button to save your credentials in n8n.
![Getting TypeForm Access Token](./using-access-token.gif)
The following video demonstrates the steps mentioned above.
<div class="video-container">
<iframe width="840" height="472.5" src="https://www.youtube.com/embed/K7UxD2jG_CI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 699 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

View File

@ -14,8 +14,11 @@ You can find authentication information for this node [here](../../../credential
## Example Usage
This workflow allows you to get the answers from a form submission in Typeform. You can also find the [workflow](https://n8n.io/workflows/457) on the website. This example usage workflow would use the following node.
This workflow allows you to store the response of a form submission to Airtable and send a message on Slack. You can also find the [workflow](https://n8n.io/workflows/916) on the website. This example usage workflow would use the following node.
- [Typeform Trigger]()
- [Set](../../core-nodes/Set/README.md)
- [Airtable](../../nodes/Airtable/README.md)
- [Slack](../../nodes/Slack/README.md)
The final workflow should look like the following image.
@ -24,9 +27,77 @@ The final workflow should look like the following image.
### 1. Typeform Trigger node
This node will trigger the workflow when a form response is submitted.
1. First of all, you'll have to enter credentials for the Typeform Trigger node. You can find out how to do that [here](../../../credentials/Typeform/README.md).
2. Select the form you want to receive the answers from in the *Form* field.
3. Click on *Execute Node* to run the workflow.
2. Select your form from the ***Form*** dropdown list.
3. Click on ***Execute Node*** to run the workflow.
In the screenshot below, you will notice that the Typeform Trigger node triggers the workflow and returns the response submitted by a user.
![Using the Typeform Trigger node to trigger the workflow](./TypeformTrigger_node.png)
### 2. Set node
We will use the Set node to ensure that only the data that we set in this node gets passed on to the next nodes in the workflow. We will set the value of `Name`, `Email`, `Interest`, and `Country` in this node.
::: v-pre
1. Click on ***Add Value*** and select 'String' from the dropdown list.
2. Enter `Name` in the ***Name*** field.
3. Click on the gears icon next to the ***Value*** field and click on ***Add Expression***.
4. Select the following in the ***Variable Selector*** section: Current Node > Input Data > JSON > Let's start with your *name.*. You can also add the following expression: `{{$json["Let's start with your *name.*"]}}`.
5. Click on ***Add Value*** and select 'String' from the dropdown list.
6. Enter `Email` in the ***Name*** field.
7. Click on the gears icon next to the ***Value*** field and click on ***Add Expression***.
8. Select the following in the ***Variable Selector*** section: Current Node > Input Data > JSON > [field:d566770d2197a78b] what's your email address?. You can also add the following expression: `{{$json["[field:d566770d2197a78b] what's your email address?"]}}`.
9. Click on ***Add Value*** and select 'String' from the dropdown list.
10. Enter `Interest` in the ***Name*** field.
11. Click on the gears icon next to the ***Value*** field and click on ***Add Expression***.
12. In the ***Variable Selector*** section, click on the circle button next to Current Node > Input Data > JSON > Let us know about your interest..
13. Select 'Values' from the dropdown list. You can also add the following expression: `{{$json["Let us know about your interest."].join(', ')}}`. This will add all the options selected by the user.
14. Click on ***Add Value*** and select 'String' from the dropdown list.
15. Enter `Country` in the ***Name*** field.
16. Click on the gears icon next to the ***Value*** field and click on ***Add Expression***.
17. Select the following in the ***Variable Selector*** section: Current Node > Input Data > JSON > From which country will you attend the meetup?. You can also add the following expression: `{{$json["From which country will you attend the meetup?"]}}`.
18. Toggle ***Keep Only Set*** to `true`. We set this option to true to ensure that only the data that we have set in this node get passed on to the next nodes in the workflow.
19. Click on ***Execute Node*** to run the node.
:::
In the screenshot below, you will notice that the node sets the values of `Name`, `Email`, `Interest`, and `Country`. These values are passed to the next node in the workflow.
![Using the Set node to set the values](./Set_node.png)
### 4. Airtable node (Append)
This node will append the data that we set in the previous node to a table. Create a table like [this](https://airtable.com/shreoj1AmTE6S6Eep) in your Airtable base.
1. First of all, you'll have to enter credentials for the Airtable node. You can find out how to do that [here](../../../credentials/Airtable/README.md).
2. Select 'Append' from the ***Operation*** dropdown list.
3. Enter the Base ID in the ***Base ID*** field. For obtaining the Base ID, head over to their [API page](https://airtable.com/api) and select the correct base. Youll find the Base ID there.
4. Enter the name of your table in the ***Table*** field.
5. Click on ***Execute Node*** to run the node.
In the screenshot below, you will notice that the node appends the data that we had set in the previous node.
![Using the Airtable node to insert data into an Airtable table](./Airtable_node.png)
### 5. Slack node (post: message)
This node will send a message about the new form submission to a channel in a Slack workspace.
1. First of all, you'll have to enter credentials for the Slack node. You can find out how to do that [here](../../../credentials/Slac/README.md).
2. Enter the name of a channel in the ***Channel*** field.
3. Click on the gears icon next to the ***Text*** field and click on ***Add Expression***.
4. Enter the following text in the ***Expression Editor***
```
*New Submission* 🙌
Name: {{$node["Set"].json["Name"]}}
Interests: {{$node["Set"].json["Interest"]}}
Country: {{$node["Set"].json["Country"]}}
```
5. Click on ***Execute Node*** to run the node.
In the screenshot below, you will notice that the node sends a message with the new form response on Slack.
![Using the Slack node to send a message to channel](./Slack_node.png)
::: tip 💡 Activate workflow for production
You'll need to save the workflow and then click on the Activate toggle on the top right of the screen to activate the workflow. Your workflow will then be triggered as specified by the settings in the Typeform Trigger node.

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 266 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 260 KiB

After

Width:  |  Height:  |  Size: 153 KiB