What is the best way to submit form data to an external API and display the returned result as a popup modal in webflow?

Design help Custom code
1

I have a form developed that consists of a set of checkboxes. When the user hits submit I want the form data to be sent to an external API (POST) which will return a text string for the results.

The results should be displayed to the user as a popup modal or by replacing the form with a div and text (response of the API).

I’ve tried Integrations but it keeps emailing me the results? Using the buttons action settings I can get it to submit the form but the result is displayed as raw JSON.

Is there another way to tie and action (form submission via API) to the submit button and handle the results?

2

Hi Andrew,

For a dynamic integration like this, you need a bit of javascript to capture the form submit event, do your POST, capture the result, and display it. It will all be custom code.

If your API is CORS-compatible and has no api-key requirements, you may be able to call it directly or else you can build a middle tier such as a serverless function to proxy that.

I’m not clear on how you’re wanting to build the response. If the API is returning data and you just want to display it, then you can do that by creating your HTML inside of an interactions-based modal, and then invoke the modal ( hidden button click, triggered by your JS ).

3

You’ll want to use Javascript to capture the form submit and handle it yourself. Here is some example code that does just this.

Here is some example Javascript code parsing the response.

Instead of redirecting the user to a new page, as is shown on the next line, show your hidden popup modal (something you’ve already created, with he proper z-index, shadowing, etc…).

You have to capture the form submission and handle it yourself. This will bypass anything built into Webflow (like emailing you of the form submission).

Try taking that approach and see what happens.

Good luck!