Archived from the Bravo community forum (2021ā2026). Some answers may refer to older versions of Bravo.
Been trying to setup my inputs to post data to a google sheet form (basically just sign up process, some info collected then you sign up), i think connecting is not the problem, but me finding the right tags to use on my figma elements is killing me. I donāt know what to do anymore. Thought i got it, cause i could type at some point but no data was being transmitted
Please help a newbie
6 replies
Use the figma to bravo plugin. It shows you what tags to use for whatever functionality. Alternativelyā¦https://docs.bravostudio.app/
@Andrew Ogwang Thatās the thing, I connected my google sheets and i literally copied what the figma to bravo plugin had, nothing still worked Andrew
I asked chatgpt, it told me my input forms had to have a tag for the input box and rectangle (input area). I have my inputs looking like that, a rectangle element and a text box inside. So for where email text label is, it would have a tag [input.email] for bravo to recognize it, and the rectangle has [component:input-email]
My Post request has a json that looks like this
{
"data": {
"email": "[variable.email]",
"password": "[variable.password]"
}
}
I donāt understand anything again
Hi, Ayomide.
Donāt give up just yet š¤ Lets try to see if we can solve this.
What You are doing right:
You are using the Figma to Bravo plugin: amazing!
You have inputs built as a rectangle with a text layer inside: this is correct.
You are tagging fields with Bravo tags like [input.email] and [component:input-email] : thatās on the right track.
You have set up a POST request with a JSON body using [variable.email] :also good š
What Might Be Going Wrong:
1. Bravo Tag Usage - Only One Tag Is Needed Per Field
For an email input:
Tag the rectangle (the component wrapper) with:
csharp [component:input-email]
Do NOT add a separate [input.email] tag. Bravo only reads the [component:input-*] tag on the wrapper to know what kind of field it is.
So for your input box in Figma:
Rectangle: [component:input-email]
Inside it: just regular text (no extra tag).
Repeat for password:
- Rectangle: [component:input-password]
ā No need to add [input.email] or [input.password].
2. Variable Binding in Bravo
In Bravo Studio, you must bind those inputs to variables:
Go to your form screen in Bravo.
Select the button (e.g., Sign Up).
Go to āActionsā ā āForm Submissionā:
Set the endpoint to your POST request.
Under "Form Inputs", link:
email ā [component:input-email]
password ā [component:input-password]
Bravo will now replace [variable.email] with the actual user input when making the request.
Google forms: your example is correct if you sending data to a service like Xano or a Firebase function that expects JSON.
BUTā¦ Google Forms do NOT accept JSON. They only accept x-www-form-urlencoded format and expect key-value pairs like:
entry.1234567890 = [variable.email]
entry.0987654321 = [variable.password]
So if you're using Google Forms:
In the request body (in Bravo), use:
Type: x-www-form-urlencoded
Keys: entry IDs from the Google Form
Values: the variables from your inputs
Hope one of solutions above can help you fix it š
@Aurika Thank you very much, but I am using Google Sheets not Forms, i used sheety to convert it to an API endpoint, so it would be able to read json formats.
Why would you use Google Sheets instead a proper database @Ayomide Johnson?
Wrote something in this thread and want it removed? Request removal
Ask the community on Discord
This archive is read-only. New questions, office hours and product updates now happen in the Bravo Discord.
Join the Discord