Creating Dynamic Web Pages and Redirecting Users with Pabbly Connect

Learn how to create dynamic web pages and redirect users using form submission data with Pabbly Connect in this detailed tutorial. Follow this definitive guide to creating powerful automated workflows with straightforward, efficiency-focused solutions that save valuable time.

Watch Step By Step Video Tutorial Below

Accessing Pabbly Connect for Dynamic Web Pages

To create dynamic web pages and redirect users using form submission data, you need to access Pabbly Connect. Start by opening your web browser and navigating to the Pabbly Connect landing page at Pabbly.com/connect.

Once there, you will see options to sign in or sign up. If you’re new, click on ‘Sign Up Free’ to create your account. After signing up or signing in, you will reach the ‘All Apps’ page. Click on ‘Access Now’ below Pabbly Connect to enter the dashboard.

Creating an Automation Workflow in Pabbly Connect

In the Pabbly Connect dashboard, click on the ‘Create Workflow’ button to start setting up your automation. Name your workflow something descriptive, such as ‘Redirect User on Elementor Form Submission’. After naming it, select the folder where you want to save this workflow and click ‘Create’. using Pabbly Connect

Now you will see two windows: the trigger window and the action window. The trigger window is where you will set up the event that starts the automation. In this case, you will choose Elementor as the trigger app and select ‘New Form Submission’ as the trigger event.

• Click on the trigger window to search for Elementor.
• Select ‘New Form Submission’ from the dropdown.
• Copy the webhook URL provided by Pabbly Connect.

After copying the webhook URL, you will need to integrate it into your Elementor form. This integration will allow Pabbly Connect to receive the form submission data automatically.

Integrating Elementor Form with Pabbly Connect

To integrate your Elementor form with Pabbly Connect, edit your form in Elementor. Click on the form, then navigate to the ‘Actions After Submit’ section in the left sidebar. Click on the plus button and select ‘Redirect’ from the dropdown menu.

In the redirect field, paste the webhook URL that you copied earlier. You will also need to append the form submission data to this URL. This is done by adding a question mark followed by the field IDs and their corresponding shortcodes.

• Add a question mark after the webhook URL.
• Include the ID and shortcode for each field in the format: `ID=shortcode`.
• Separate each field with an ampersand (&).

Once you have entered all the necessary details, click on ‘Update’ to save your changes in Elementor. This setup will ensure that when a user submits the form, they will be redirected to the dynamic web page created through Pabbly Connect.

Creating a Dynamic Web Page with Pabbly Connect

After successfully setting up the Elementor form, the next step is to create a dynamic web page using Pabbly Connect. In the action window of your workflow, search for the ‘Dynamic Web Page’ module and select it.

Choose ‘Generate Web Page URL’ as the action event. In the HTML content field, you will need to input the HTML structure of the dynamic web page. You can use ChatGPT or any other HTML generator to create this structure.

Copy the HTML body generated and paste it into the HTML content field. Use mapping to insert form responses into the HTML body. Click on ‘Save and Send Test Request’ to generate the web page.

After generating the web page, you will receive a URL. This URL will be used to redirect users after form submission, displaying the details they entered in the form.

Redirecting Users to the Dynamic Page

The final step involves redirecting users to the dynamic web page created by Pabbly Connect. In the action step, add another action by searching for ‘Data Forwarder’ and selecting it.

In the Data Forwarder action, choose ‘Redirect To’ as the action event. You will need to map the URL from the Dynamic Web Page module to ensure users are redirected to the correct page.

Select the URL response from the Dynamic Web Page module. Set the redirect status as ‘301 Moved Permanently’. Click on ‘Save and Send Test Request’ to finalize the setup.

Once this is completed, your automation workflow will be fully functional. Users who submit the form will be redirected to a dynamic web page displaying their submitted information.

Conclusion

In this tutorial, we explored how to create dynamic web pages and redirect users using form submission data with Pabbly Connect. By following the steps outlined, you can efficiently set up an automation workflow that enhances user experience and streamlines data handling.