Step 1: Set Up Your FlutterFlow Project
- Create a new FlutterFlow project:
- Navigate to FlutterFlow and login or sign up if you don't have an account.
- Create a new project by clicking on “Create New Project”.
- Follow the setup wizard to name your project and choose your project’s specifications.
- Design your app or web page:
- Use the FlutterFlow interface to drag and drop widgets and design your user interface.
- Make sure to include forms or buttons that will be used to capture user data you want to send to Pardot.
Step 2: Set Up Pardot (Salesforce Pardot)
- Create a Pardot Account:
- Sign up or login into your Salesforce Pardot account.
- Navigate to the Pardot dashboard.
- Create a Campaign:
- On the Pardot dashboard, navigate to "Marketing" > "Campaigns".
- Click “+ Add Campaign” to create a new campaign.
- Name your campaign and take note of the campaign ID or other relevant identifiers.
Step 3: Create Form Handlers in Pardot
- Navigate to Form Handlers:
- In Pardot, go to "Marketing" > "Forms" > "Form Handlers".
- Click “+ Add Form Handler”.
- Configure the Form Handler:
- Fill in the basic information such as name and folder.
- Under “Campaign”, select the campaign you created earlier.
- Set the success location URL and error location URL.
- Configure the fields to match the data you will be receiving from the FlutterFlow form, such as first name, last name, email, etc.
- Save the form handler and take note of the endpoint URL (e.g.,
https://go.pardot.com/l/12345/2021-01-01/2abc).
Step 4: Connect FlutterFlow to Pardot via API
- Enable API in Pardot:
- Make sure the API is enabled in Pardot. You may need to check your Settings and API settings in Pardot.
- Gather Pardot API Credentials:
- Obtain your API credentials from the Pardot account. This typically involves the API key, client ID, client secret, and user key.
Step 5: Configure API Request in FlutterFlow
- Navigate to the Backend Section:
- In your FlutterFlow project, navigate to the “Backend” section in the left-hand menu.
- Add a New API Call:
- Click “+ Add API Call” and configure the details:
- Name: Name your API call (e.g., "Submit to Pardot").
- Request URL: Paste the endpoint URL from your Pardot form handler.
- Request Type: Select POST as the request type.
- Authorization: If needed, use the API credentials gathered earlier for authentication headers.
- Map the Request Fields:
- Match the request body fields to your form fields. For example, if you have a "name" and "email" input in your FlutterFlow form, map these to the corresponding fields in Pardot.
Step 6: Integrating the Form Submission in FlutterFlow
- Set Up Form Submission Logic:
- On the FlutterFlow page where your form is located, set up the submission logic by navigating to the "Actions" tab.
- Add a new action for the form’s submit button.
- Select "API Call" and choose the API call you set up earlier (e.g., "Submit to Pardot").
- Ensure the correct data from the form inputs is being sent in the API request.
- Handle Success/Error Responses:
- Add logic to handle success and error cases to provide user feedback:
- On success, you can navigate to a "Thank You" page or display a success message.
- On error, display an appropriate error message to the user.
Step 7: Testing the Integration
- Run Your FlutterFlow Project:
- Test your app or webpage by entering data in the form and submitting it.
- Ensure that the data is being captured in Pardot by checking your Pardot Campaigns and Form Handlers data tables.
Step 8: Finalizing
- Deploy your FlutterFlow App:
- Once you’ve thoroughly tested your integration, proceed to deploy your app or webpage.
- Monitor your Pardot dashboard to verify that the user data continues to be captured correctly.
.png)
.png)
