Automate WordPress Forms with the Custom App Builder

The Custom App Builder lets you connect and automate your forms with external apps using SureTriggers, directly from your SureForms dashboard.

Here’s how it works:

• When someone submits a form, SureTriggers sends the data to an external app (e.g., for calculations or content generation).
• Once the app completes its task, the result is sent back to SureForms and displayed in realtime.

For example, here’s an example SEO product description generator form we created using the custom app builder.

Here are more ways you can use this feature:

• Survey Forms: Calculate and display the survey percentage right after submission.
• Booking Forms: Check external calendars for availability and show open dates.
• Quote Request Forms: Generate cost estimates based on selected options, saving time for both vendors and customers.

In this article, you’ll learn how the custom app builder works, how it processes and returns data to SureForms, and how you can use it to automate tasks in your forms.

Prerequisites 

Before starting, ensure the following:

• SureForms Business Plan is installed and activated.
• You’ve signed up for a free SureTriggers account.
• The form you want to automate is already published.

Once you have these setup, follow the next steps.

Automating SureForms Forms With Custom App Builder

We’ll create a form that generates an AI-powered SEO description based on user-provided product details. This is just one example, but you can use the Custom App Builder for a variety of workflows.

To do this:

• Create or go to the form where you want to use the custom app builder.

Deciding Where To Display the Returned Form Data

Before you start using the custom app builder, you need to decide where to display the data that’ll be returned. To do this:

• Go to “Form Confirmation”.

• Under SureTriggers Response, select where the data will be shown.

For our SEO product description example:

• Below Form: This option will display the generated product description right below your form. 
• Confirmation Page: This will display the generated product description after the user clicks the “Submit” button.

Note: For more information on how form confirmation works in SureForms, click here.

Here, you can also change the text that shows up while your response is being generated and choose to hide the “Copy” or “Download All” button.

Once done, save your form and follow the next steps.

Configuring The Custom App Builder

Now, you can start connecting your form to external apps:

• Go to “Integrations”.

• Click on the “View Integrations” button here. If you haven’t set up SureTriggers yet, you’ll be prompted to do so.

Once your SureTriggers account is connected, follow these steps:

• Click the “Create Workflow” button.

• Provide any name to your workflow.

Note: If you aren’t familiar with these SureTriggers concepts, ensure you read the basics from our documentation here.

Click the “Create” button once done.

Configuring Your Action 

The SureForms form you’re on will be your default trigger event. You’ll need to select an action app that passes the data from this trigger event.

To do this:

• Select an action app to handle the data. For this example, we’ll choose OpenAI to generate product descriptions.

You can select the action app appropriate for your workflow.

• Select the action event you want the workflow to perform. We’ll select “Create Chat Completion” since we want the AI to create a product description.

• Connect your existing OpenAI account here or create a new one using the “Create New Connection” button.

Click “Continue” once you’re done here.

Next, you’ll need to configure how the AI is going to process your data. To do this, configure these fields according to your needs. Here’s what we’ve used in our example:

In the message field, type “@” and choose the form field data you want to send to OpenAI. For example:

Note: These fields might not appear in the dropdown if you haven’t published your form yet.

Finally, you need to test your action to ensure everything works well. SureTriggers will use test data to test your workflow. To do this:

• Click the “Test Action” button here.

If everything goes as expected, you’ll get the above test response. After that, simply click the “Save” button.

Sending the Data Back to SureForms

After processing is done, you can send the result back to your SureForms form. To do this, you need to create another action event. Here’s how you can do it:

• Click on the “Edit Workflow”.

• Click “Add New Action” here.

• Here, you need to select SureForms as your action app.

• Under “Select Connection”, select the WordPress site you’re currently on and click “Continue”.

• Now, type “@Response URL” and select the unique response URL SureForms has created for your form.

Under “Response Text”, you’ll need to enter the data that’ll be displayed below or after your form submission. If you want to fetch and display the SEO product description generated by OpenAI:

• Click on the following “Database” icon.

After that, you can embed the dynamic data from the previous trigger or actions in the dropdown. 

Click the “Continue” button once done. In the next step, you’ll again need to test your action and save your changes once the test action is successful.

Publishing Your Workflow

To make the workflow live:

• Toggle the Status switch next to your workflow name.

That’s all! Now, whenever someone submits your form, the above workflow created by the custom app builder will be automatically fired.

Submit a form on your site to test the live setup.

And if you face any issues during the process or have any doubts regarding the same, please feel free to reach out to us.