External API Send Data as Form Data
This video tutorial explains how to make a rest API call to send data from a Form. This data is not stored anywhere in DrapCode.
1. Create a Form
Go to Components and choose Form. Then add fields as per your use case. Map the fields as per their unique identifiers by clicking the Settings and then Save them.
2. Create an External API
To get data from any third-party integration like Xano you need to create an External API. External APIs are modules that are used to create a Rest API such as GET API, POST API, DELETE, etc. Although you may also use an existing Create API too. APIs can be accessed from Settings → External API or from the top right hand-side. Then select the Create External API button.
Give a name to your external API. You need to choose a call to create. Then copy the URL from Swagger Documentation.
2.1 Define Form Data
This is needed to make a call to send any data that comes from form to send it as it is to Xano with the exact same parameters. Then choose Save Settings to finish this step.
3. Create an Event
You need to create a simple event to make the call to fetch data from form to Xano or any third-party integration. Go to Events and choose Create Event. Name your event and click Create.
3.1. Configure the Event
In the event mention what it is supposed to do. Here in this case it you can choose the external API and ask it to send data.
3.2 Add the Event Details
In the pop-up that opens select the external API you created. Then you can mention an alert message and how you want to save it. Then choose Save to finish. This will make the API call and store it in the collection.
4. Bind the Event to the Form
Open the Form settings and mention the event to which you want to bind it to. Then Save your settings.
5. Add details to the Form
Go to Preview and add details as per the fields in the form. Then click the Send button. This action will fetch the data from the form as it is and send it to Xano or any other third-party integration and display the alert message for this action.
6. Preview the Form Data
You can go to the Rest API and reload it. Your form data will appear here. Similarly, you can add more records and have them pushed to the Rest API.
