Pabbly Forms and Pabbly Connect are now tightly integrated together.
By adding that shortcode, any JSON data returned back to Pabbly Forms via Pabbly Connect will be shown as a result after the form is submitted.
See the example below of how the thank you page settings are added with the shortcode.
This is the step by step flow:
Step 1. Form created inside Pabbly Connect.
Step 2: Setup the webhook inside this form settings to send the data to Pabbly Connect.
Step 3: Build the workflow inside Pabbly Connect to process that incoming data. In this case, we are doing the BMI calculation using Number Formatter -> Spreadsheet Formulas.
The full screenshot of the workflow above is here:
Step 4: The last step of this workflow is important as it sends the data back to the Pabbly Forms submitter.
See Image of the Data Forwarder. It includes the Key and Value pair.
The sample JSON structure is written like this
{"Key": "Value"}
In the image below the key is "Your BMI Index is"
and the value is "22.1"
This will be displayed as it is after the form is submitted.
To show the result on the Pabbly Forms itself. You have to add a shortcode [show_webhook_response] to the Thank you page inside Pabbly Forms settings.
See the demo in action after all the workflow settings inside Pabbly Connect and Thank you page settings inside Pabbly Forms are done.
The below form is submitted by the user.
A loader appears with the Please wait, your BMI Index is being calculated message.
The forwarded data from Pabbly Connect in Key value pair is displayed below.
The above segment is completed and will work fine.
However, some users do not want to display the data on the Thank you page itself but instead, they want to create a dynamic HTML page and want to redirect the user to that dynamic page.
In that case, you can use the Dynamic Web Page by Pabbly module in your workflow to dynamically create an HTML page. It includes dynamic BMI index data based on our sample usage.
Once you supply the HTML, it will always generate a dynamic URL in the response to which you can redirect the user after the form submission.
The sample page looks like below after it is generated and the URL is opened.
In the last step of the workflow, instead of sending the key-value pair data to the Pabbly Form Builder. This time we will be sending the URL of the dynamically generated page back to the form builder.
The Pabbly form builder Thank You page settings will be written as usual with the [show_webhook_response] shortcode.
But the last step of the Pabbly Connect workflow will include the JSON as shown below.
The key this time will be pc_redirect_to and the value will be the URL to which you want to redirect the user.
For example:
{"pc_redirect_to":"https://example.com"}
Check the screenshot below, we have mapped the dynamic URL coming from the previous step to the Data Forwarder module. The form submitter will be redirected to this page after submitting the form.
This dynamic page URL is generated by the HTML that we supplied to the Dynamic Web Page by the Pabbly module.
This time after submitting the form, the form submitter will be redirected and sent in real-time to the URL that is added to the pc_redirect_to value.
- This means if someone submits the form inside Pabbly Forms.
- You can send the data to Pabbly Connect in real-time via Webhooks for processing.
- You can then process that form data internally inside Pabbly Connect.
- You can later send the data back to Pabbly Forms in real-time where the user can see the result of their submission after pressing the Submit button.
By adding that shortcode, any JSON data returned back to Pabbly Forms via Pabbly Connect will be shown as a result after the form is submitted.
See the example below of how the thank you page settings are added with the shortcode.
This is the step by step flow:
Step 1. Form created inside Pabbly Connect.
Step 2: Setup the webhook inside this form settings to send the data to Pabbly Connect.
Step 3: Build the workflow inside Pabbly Connect to process that incoming data. In this case, we are doing the BMI calculation using Number Formatter -> Spreadsheet Formulas.
The full screenshot of the workflow above is here:
Step 4: The last step of this workflow is important as it sends the data back to the Pabbly Forms submitter.
See Image of the Data Forwarder. It includes the Key and Value pair.
The sample JSON structure is written like this
{"Key": "Value"}
In the image below the key is "Your BMI Index is"
and the value is "22.1"
This will be displayed as it is after the form is submitted.
To show the result on the Pabbly Forms itself. You have to add a shortcode [show_webhook_response] to the Thank you page inside Pabbly Forms settings.
See the demo in action after all the workflow settings inside Pabbly Connect and Thank you page settings inside Pabbly Forms are done.
The below form is submitted by the user.
A loader appears with the Please wait, your BMI Index is being calculated message.
The forwarded data from Pabbly Connect in Key value pair is displayed below.
The above segment is completed and will work fine.
However, some users do not want to display the data on the Thank you page itself but instead, they want to create a dynamic HTML page and want to redirect the user to that dynamic page.
In that case, you can use the Dynamic Web Page by Pabbly module in your workflow to dynamically create an HTML page. It includes dynamic BMI index data based on our sample usage.
Once you supply the HTML, it will always generate a dynamic URL in the response to which you can redirect the user after the form submission.
The sample page looks like below after it is generated and the URL is opened.
In the last step of the workflow, instead of sending the key-value pair data to the Pabbly Form Builder. This time we will be sending the URL of the dynamically generated page back to the form builder.
The Pabbly form builder Thank You page settings will be written as usual with the [show_webhook_response] shortcode.
But the last step of the Pabbly Connect workflow will include the JSON as shown below.
The key this time will be pc_redirect_to and the value will be the URL to which you want to redirect the user.
For example:
{"pc_redirect_to":"https://example.com"}
Check the screenshot below, we have mapped the dynamic URL coming from the previous step to the Data Forwarder module. The form submitter will be redirected to this page after submitting the form.
This dynamic page URL is generated by the HTML that we supplied to the Dynamic Web Page by the Pabbly module.
This time after submitting the form, the form submitter will be redirected and sent in real-time to the URL that is added to the pc_redirect_to value.
Attachments
Last edited:
