Send form input to a database

Upgrade your free account to Solo plan to use this feature.

This tutorial is a continuation after you have set up a POST request to create data to a database.

If you haven't done that yet, check out:

👉 Connect to any API: POST request 💡 We're using this design file and this Airtable for the tutorial.

How to bind POST request to form input design

Connecting functionality to your app design is done in the Binding Setup of an app project. Binding is the action of connecting an API request to an app element (i.e. text, rectangle, etc.)

1. In your form design, add the Bravo Tags for input fields and submit button. The example design file already includes these tags.

Single-line text field: [component:input-text] Number field: [component:input-number] Submit button: [action:submit]

2. Import the design file into Bravo to create a project. 🚀

3. In your app project page, click on the app screen with the form to enter Data Binding mode.

4. Select the collection and POST request you previously created in the Data Library. (In this example, we're selecting the collection "POST demo" and the request "Add Scores".)

5. In the Visual Elements list, select your input field layer.

6. In the Element Binding side panel, you will see 2 selectable options for the input field: Value and Input Destination. In case you want to learn more on how to bind these two fields, check out this page.

Value: The data that is replacing the placeholder content. Input Destination: Where the input data is sent to.

7. Since the POST request is for creating (sending) data to the database, you only need to select the input for Content Destination.

Notice the Content Destination choices come from the inputs in the Body of your POST request setup.

8. Repeat step #5-7 until all of your input fields are bound. (No binding is needed for the submit button, just make sure you have the submit Tag on that element)

9. Scroll down to Response Actions to configure the action that happens when the user presses the Submit button. By default, the app will show an alert message.

Show Alert: Display a pop-up message. Go To Page: Redirects user to another page in the app. Open URL: Opens the web browser on the phone with the specified URL.

10. Test out your native form page with Bravo Vision! 📱

That's it! 🎉