Product Configurator — Setup Guide
Everything you need to adapt this component to your own product and connect it to your own form, in about 10 minutes.
1. Set up your categories, options and prices
Open "Option categories" to add or edit categories (Finish, Size, Color...) and their options. Each option has a label, a price add-on and a display color. Add your product photos separately under "Renders": for each row, the Key field must match the exact labels of the chosen options, in the same order as your categories, separated by a comma and a space, for example "Dark Oak, Medium" for the Finish then Size categories.
2. Connect your own form
The component does not send emails itself: it fills in and submits your own Framer form behind the scenes. Add a Framer Form to your page, then select it and give it an ID in Framer's layer panel (no code needed). In the component's "Form integration" section, set "Form selector" to that same ID with a # in front, for example #configurator-form. Add a text field to your form for each piece of information you want to receive (price, name, email, phone, message, a summary, and one per category), and give each field the same name shown under "Field: ..." in the panel. During testing, turn off "Contact step" temporarily if you just want to see the configurator without a live form.
3. Customize the look
The "Style" popup controls the accent color, background colors for light and dark, font, corner radius, container border and shadow, plus a light/dark theme switch (auto follows the visitor's system preference). Each of the three buttons (Continue, Back, Submit) has its own style popup with background, text color, font, corner radius and border. "Pricing" controls the base price, currency symbol and position, and decimal places (set to 2 for cents, e.g. 99.99).
4. Troubleshooting
"My form doesn't submit": the Form selector almost always doesn't match the form's actual ID, or a field name in "Form integration" doesn't match a field name on the form. "My photo doesn't show up": check that the Key in Renders matches the option labels exactly, including capitalization and spacing. "The button text shows through the wrong color": check the specific button's own style popup, each of the three buttons is independent.