diff --git a/docs/nodes/credentials/Typeform/README.md b/docs/nodes/credentials/Typeform/README.md index f9a1716f6..2f822620a 100644 --- a/docs/nodes/credentials/Typeform/README.md +++ b/docs/nodes/credentials/Typeform/README.md @@ -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. + +
+ +
diff --git a/docs/nodes/credentials/Typeform/using-access-token.gif b/docs/nodes/credentials/Typeform/using-access-token.gif deleted file mode 100644 index d908b9b3e..000000000 Binary files a/docs/nodes/credentials/Typeform/using-access-token.gif and /dev/null differ diff --git a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Airtable_node.png b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Airtable_node.png new file mode 100644 index 000000000..41c3ac599 Binary files /dev/null and b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Airtable_node.png differ diff --git a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/README.md b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/README.md index 78866cd94..ad29ac0c5 100644 --- a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/README.md +++ b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/README.md @@ -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. You’ll 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. diff --git a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Set_node.png b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Set_node.png new file mode 100644 index 000000000..045296e15 Binary files /dev/null and b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Set_node.png differ diff --git a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Slack_node.png b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Slack_node.png new file mode 100644 index 000000000..44fece75f Binary files /dev/null and b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/Slack_node.png differ diff --git a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/TypeformTrigger_node.png b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/TypeformTrigger_node.png new file mode 100644 index 000000000..3ceacc36b Binary files /dev/null and b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/TypeformTrigger_node.png differ diff --git a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/workflow.png b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/workflow.png index df521b558..3753d6022 100644 Binary files a/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/workflow.png and b/docs/nodes/nodes-library/trigger-nodes/TypeformTrigger/workflow.png differ