Browse topics below or jump straight to a section.
Installing, configuring, and wiring up the plugin in your Bubble app
In your Bubble editor, go to Plugins → Add Plugins and search for Survey Kiln. Click Install and confirm the $15/month subscription through Bubble's billing.
Once installed, the Survey Kiln Form element will appear in your Elements panel on the left side of the editor.
After installing the plugin, drag the Survey Kiln Form element from the Elements panel onto your page — just like any other Bubble element.
In the element's properties panel, paste in your Survey JSON (exported from the Survey Kiln builder) and configure the display options. The survey will render exactly as designed when your page loads.
The Survey Kiln element exposes a Show Survey action in your workflow editor. You can trigger it from any Bubble event — a button click, page load, a custom state change, or any other workflow trigger.
You can also conditionally show or hide the element using Bubble's standard conditional logic on the element itself.
The Survey Kiln element fires a Survey Completed event when a user submits a survey. In your Bubble workflow editor, add a trigger on this event and use a Create a new thing action to save the response data to your database.
The response object contains all answers keyed by question ID, plus metadata like completion timestamp and survey ID. You can map any field to your Bubble data types.
A few things to check:
If the issue persists, contact support with your app name and a screenshot.
Yes. The Survey JSON property on the element can be set dynamically using Bubble's expression editor. You can store multiple survey definitions in your database and pass the appropriate one to the element based on user properties, page parameters, or any other condition.
Creating surveys, question types, and conditional logic
Open the Survey Kiln builder and create a new survey. Use the Components pane to add questions to your survey canvas. Each question can be configured — label, placeholder, whether it's required, help text, and more — in the properties panel.
The builder uses Bubble states to pass the survey definition to your app — there is no manual JSON export step.
Drag the handle icon () on the left side of any question card up or down to reorder it. The survey will render in exactly the order shown in the builder.
Select any question and open the Logic tab in its properties panel. You can set rules like "show this question only if Question 2 answer equals 'Yes'".
Conditions support equals, does not equal, contains, is answered, is not answered — and you can chain multiple conditions with AND / OR logic. The renderer evaluates these rules in real time as the respondent moves through the survey.
In the Components pane, click Add a Page to add a new page to your survey. Questions on each page are shown to the respondent one page at a time, with navigation controls to move forward and back.
The progress bar in the rendered survey automatically reflects the total number of pages.
Survey Kiln includes 27 question types across four categories:
Yes. Click Preview in the builder to open a live preview of your survey exactly as respondents will see it — including conditional logic, multi-page navigation, and validation. Preview mode does not submit any data.
How surveys are displayed, styled, and submitted to your app
The renderer is the component that reads your Survey JSON definition and displays it as an interactive form for your users. In the Bubble.io plugin, the renderer runs inside the plugin element — you don't configure it separately.
It handles question rendering, validation, conditional logic evaluation, page navigation, progress tracking, and firing the completion event with the full response object.
Yes. The Survey JSON includes a theme block where you can set your primary color, font, button style, border radius, and background color. Changes made in the builder's Theme panel are reflected in real time in the preview and carried through to the exported JSON.
For Bubble.io apps, theme properties can also be overridden in the plugin element's properties panel if you want to match your app's branding without editing the JSON.
Yes. The renderer is built to WCAG 2.1 AA standards. All interactive elements have proper ARIA labels, focus states are clearly visible, keyboard navigation works across all question types, and color contrast meets the AA threshold.
Screen reader compatibility is tested against VoiceOver and NVDA.
When a user submits, the renderer fires a completion event with a response object structured like this:
// Response object
{
surveyId: "your-survey-id",
completedAt: "2026-03-02T14:32:00Z",
answers: {
"q_001": "Very Good",
"q_002": 8,
"q_003": "The onboarding was seamless."
}
}Each key in answers corresponds to the question ID you set in the builder. You can map these directly to fields in your Bubble database.
Yes. The renderer is fully responsive. On smaller screens, multi-column layouts stack vertically, touch targets are sized appropriately, and the keyboard does not unexpectedly obscure the active question. It has been tested on iOS Safari and Android Chrome.
Have an idea that would make Survey Kiln better for your Bubble.io app? We read every submission and use them to drive the roadmap.
Thanks for the idea. We'll review it and add it to our consideration list.
Can't find what you're looking for? Reach us directly.