Integrating Elementor and SendGrid with Pabbly Connect: A Step-by-Step Guide

Learn how to integrate Elementor with SendGrid using Pabbly Connect. Follow this detailed tutorial to automate contact creation and updates effortlessly. Explore efficient methods for automating routine tasks with clear, concise instructions suited for both newcomers and experienced professionals.

Watch Step By Step Video Tutorial Below

1. Accessing Pabbly Connect for Integration

To start using Pabbly Connect, first, open your browser and search for Pabbly Connect. This platform allows you to automate workflows between different applications seamlessly.

As an existing user, click on the ‘Sign In’ option. If you are new, you can sign up for free and get 100 tasks to explore the application. Once signed in, access your dashboard and click on the ‘Create Workflow’ button to begin your integration process.

2. Creating a Workflow with Elementor in Pabbly Connect

In this step, you will create a workflow that connects Elementor and SendGrid through Pabbly Connect. After clicking ‘Create Workflow’, name it appropriately, such as ‘Create or Update Contact on Elementor Form Submission’. This will help you identify the workflow later.

• Click on the ‘Create’ button to open the workflow window.
• Select ‘Elementor’ as the trigger application.
• Choose ‘New Form Submission’ as the trigger event.

Once selected, Pabbly Connect will generate a webhook URL. Copy this URL as it will be used to connect Elementor with your workflow.

3. Setting Up Elementor for Integration

To set up Elementor, log in to your WordPress account where Elementor is installed. Locate the form you want to integrate and click on ‘Edit with Elementor’. This will direct you to the form settings.

• Go to ‘Actions After Submit’ in the form settings.
• Add a new action and select ‘Webhook’.
• Paste the webhook URL copied from Pabbly Connect into the URL field.

Finally, click ‘Publish’ to save the changes. Now, your Elementor form is connected to Pabbly Connect, ready to send data upon submission.

4. Testing the Webhook Response in Pabbly Connect

After setting up the webhook in Elementor, you need to test the connection. Go back to Pabbly Connect and check the workflow status, which should indicate it is waiting for a webhook response.

Now, fill out the Elementor form with test data and click ‘Submit’. Once submitted, return to Pabbly Connect to see if the data was captured successfully. This confirms that the integration is working correctly.

Check for the captured response details in your workflow. Ensure all fields from the form are correctly mapped to the response.

This step is crucial as it verifies that the data from Elementor is flowing into Pabbly Connect as intended.

5. Integrating SendGrid with Pabbly Connect

The final step is to integrate SendGrid to add or update contacts based on the form submissions. In your Pabbly Connect workflow, select SendGrid as the action application.

Choose ‘Add or Update a Contact’ as the action event. If you haven’t connected your SendGrid account yet, click on ‘Add New Connection’ and enter the API key obtained from your SendGrid account settings.

Select the list where contacts will be added (e.g., ‘Elementor Leads’). Map the fields from the Elementor submission to the corresponding fields in SendGrid.

After mapping all necessary fields, click on ‘Save and Send Test Request’. This action will create or update a contact in SendGrid based on the form submission, completing the integration process.

Conclusion

This tutorial demonstrates how to effectively use Pabbly Connect to integrate Elementor with SendGrid for automated contact management. By following these steps, you can streamline your email marketing efforts and ensure your contact list is always up to date.