Automate Image Creation on Webflow Forms Submission Using Pabbly Connect

Learn how to automate image creation from Webflow form submissions using Pabbly Connect and AI Agent. Step-by-step tutorial for seamless integration. This comprehensive guide reveals exactly how to connect your applications and automate repetitive tasks — accessible for professionals of all technical backgrounds.

Watch Step By Step Video Tutorial Below

1. Accessing Pabbly Connect for Automation

To start automating image creation on Webflow forms submission, you first need to access Pabbly Connect. Open your browser and navigate to pabby.com/connect. This will take you to the Pabbly Connect landing page.

Here, you can either sign in if you already have an account or sign up for free. Signing up provides you with 100 free tasks each month, allowing you to explore the platform’s capabilities. Once logged in, you will be directed to the Pabbly Connect dashboard, where you can create and manage your workflows.

2. Creating a New Workflow in Pabbly Connect

To create a new workflow, click on the ‘Create Workflow’ option on the dashboard. You will be prompted to name your workflow. Enter a descriptive name, such as ‘Create Images on Webflow Form Submission using AI Agent’. using Pabbly Connect

• Choose a relevant folder for your workflow.
• Click ‘Create’ to proceed to the next step.

This action will open a new screen displaying two main sections: Trigger and Action. The trigger indicates what starts the automation, while the action is what happens as a result. In this case, the trigger will be a submission from the Webflow form.

3. Setting Up the Trigger with Webflow

In the trigger section, select Webflow as your application. Choose the trigger event as ‘Form Submitted’ to ensure the workflow starts when a client submits the project request form.

Next, click on ‘Connect’ to establish a connection between Webflow and Pabbly Connect. You can either add a new connection or select an existing one. If creating a new connection, you will need to provide an API token from your Webflow account. This token can be generated in the API Access section of your Webflow site settings.

4. Configuring AI Agent for Image Generation

Once your trigger is set up, you need to configure the action step using your AI agent, which in this case is OpenAI. Select OpenAI as your action application and choose the action event as ‘DAL E’ to generate images based on the project request. using Pabbly Connect

• Map the project details from the Webflow form submission into the prompt for the AI agent.
• Specify the number of images to generate and their desired size and quality.

By mapping the client name, business name, and project title into the prompt, you ensure that each generated image is tailored to the specific request. After configuring the prompt, click on ‘Save and Send Test Request’ to generate the image and verify the setup.

5. Uploading the Generated Image to Google Drive

Now that you have generated the image using your AI agent, the next step is to upload this image to your Google Drive. Select Google Drive as your action application and choose the action event as ‘Upload a File’. using Pabbly Connect

Connect to Google Drive by selecting an existing connection or creating a new one. Once connected, provide the URL of the generated image and specify the folder ID where you want to upload the image. Finally, set the file name using a dynamic mapping of the client name and project title.

Click ‘Save and Send Test Request’ to complete the process. You should see a success response indicating that the image has been uploaded successfully to your specified Google Drive folder, ready for your team members to use.

Conclusion

By following this tutorial, you can effectively automate image creation for Webflow form submissions using Pabbly Connect and AI Agent. This integration streamlines your workflow, allowing for efficient project management and creativity in your marketing strategies.