Euler Forms
Build referral, registration, and intake forms that talk directly to your CRM — no code, fully embeddable, with branching logic and a live preview.
Euler Forms lives in two places inside the Euler app:
- Settings › Forms — the list page where you create, duplicate, activate, and embed your forms. This is your home base.
- The Form Builder — a focused workspace that opens when you click Edit on a form. It has four tabs (Content, Design, Code, Conditionals) and a live preview.
Quick Start
Create your first form in about three minutes.
1. Open Settings › Forms
From the main Euler sidebar, click Settings, then select the Forms tab. If this is your first form, you'll see the empty state. Otherwise you'll land on the forms table.
No data found
You have no forms at the moment.
QS-1 — Empty state. Hit + New Form to start.
2. Click + New Form
A two-step modal opens. Step 1 captures the form name and type. Step 2 captures the CRM settings — but it's skipped automatically for Outbound Referral forms, which need no extra setup.
QS-2 — The button you're looking for.
3. Pick the right Form Type
For Acme, we want partners to submit deals to us, so we pick Referral From Partner. See Form Types Reference for when to choose each one.
Referral From Partner
Use this form when partners submit referrals. Partners keep their current program level unless you assign a different tier.
QS-3 — The Referral From Partner card selected (border + bg become brand-blue).
4. Click Create → you land in the Builder
The Builder is the workspace where you add questions, style the form, set conditional logic, and grab the embed code. Four tabs at the top: Content · Design · Code · Conditionals.
QS-4 — The Builder shell. Header on top with three buttons; four tabs below.
5. Add questions, Run Test, Publish
Add fields on the Content tab, click Run Test in the header to verify the CRM mapping, then hit Publish. Your form is live and embeddable.
QS-5 — Run Test first to verify CRM mapping, then Publish to go live.
Managing Forms
Find, create, duplicate, and embed your forms from the Settings › Forms page.
1.1 The Forms Table
Open Settings › Forms to see every form you've created. The page starts in an empty state; once you create your first form, it switches to a sortable, searchable table.
No data found
You have no forms at the moment.
Figure 1.1 — Empty state. Click + New Form to start.
| Form Name | Type | Last Updated | Embed | Status | |
|---|---|---|---|---|---|
| Acme Partner Referral | Referral From Partner | Oct 9, 2025 5:11 PM | Get Code |
Active
|
|
| Acme Partner Application | Partner Registration | Oct 9, 2025 5:11 PM | Get Code |
Inactive
|
|
| Outbound to Partners | Outbound Referral | Oct 9, 2025 5:11 PM | Get Code |
Active
|
|
| Q4 Deal Registration | Deal Registration | Oct 9, 2025 5:11 PM | Get Code |
Active
|
|
| Inbox Parse — Q3 leads | AI Email Parse | Oct 9, 2025 5:11 PM | Get Code |
Inactive
|
Figure 1.2 — Forms table with one of each type.
Column reference
Form Name
The display name. Click to open the Builder. Renaming a form keeps the same embed URL.
Type
One of the 5 form types. Color-coded pill. Set on creation, can't be changed later.
Last Updated
Timestamp of the most recent edit — question changes, design changes, status flips, all included.
Embed
Get Code opens the iframe snippet for embedding on your website. Same as the Builder's Code tab.
Status
The toggle gates the public URL. Active = live submissions. Inactive = the embed shows a "form unavailable" message instead of 404.
⋮ Row menu
Edit, Duplicate Form, Delete. See Row Actions.
1.2 Creating a New Form
Clicking + New Form opens a two-step modal. Step 1 collects the basics; Step 2 collects CRM settings. Outbound Referral is the exception — it has no Step 2.
Step 1 — Basic Information
The form name plus a radio-card selector for the form type. All five types are listed in this order: Referral From Partner, Partner Registration, Outbound Referral, AI Email Parse, Deal Registration.
New Form
Set up a form to collect partner or deal information.
Referral From Partner
Use this form when partners submit referrals. Partners keep their current program level unless you assign a different tier.
Partner Registration
Use this form to register new partners.
Outbound Referral
Use this form to initiate referrals on behalf of a partner. No additional form setup is required.
AI Email Parse
Use this form to extract and structure data from incoming emails using AI.
Deal Registration
Use this form to register new deals submitted by partners. Program level remains unchanged unless updated during the process.
Figure 1.3 — Step 1, empty (no type selected yet).
New Form
Set up a form to collect partner or deal information.
Referral From Partner
Use this form when partners submit referrals. Partners keep their current program level unless you assign a different tier.
Partner Registration
Use this form to register new partners.
Outbound Referral
Use this form to initiate referrals on behalf of a partner. No additional form setup is required.
AI Email Parse
Use this form to extract and structure data from incoming emails using AI.
Deal Registration
Use this form to register new deals submitted by partners. Program level remains unchanged unless updated during the process.
Figure 1.4 — Step 1 with Referral From Partner selected.
New Form
Set up a form to collect partner or deal information.
Referral From Partner
Use this form when partners submit referrals. Partners keep their current program level unless you assign a different tier.
Partner Registration
Use this form to register new partners.
Outbound Referral
Use this form to initiate referrals on behalf of a partner. No additional form setup is required.
AI Email Parse
Use this form to extract and structure data from incoming emails using AI.
Deal Registration
Use this form to register new deals submitted by partners. Program level remains unchanged unless updated during the process.
Figure 1.5 — Step 1 with Outbound Referral. Two key differences: (a) a new "Use pipeline from CRM" checkbox appears below the cards, and (b) the button changes from Next to Create — there is no Step 2.
Step 2 — Form Type Settings
Step 2 is where you bind the form to your CRM. The exact fields change per form type. Three variants follow.
Variant A — Referral From Partner
Includes a Referral Type dropdown that maps the inbound lead to a specific referral category in your program (e.g., Referral, Reseller, Influencer).
New Form
Set up a form to collect partner or deal information.
CRM settings
Advanced settings
Figure 1.6 — Step 2 for Referral From Partner.
Variant B — Partner Registration & Deal Registration
Same as Variant A, but without the Referral Type dropdown. For Partner Registration this makes sense (partners aren't categorized at signup); for Deal Registration the categorization is implicit (it's always a deal).
New Form
Set up a form to collect partner or deal information.
CRM settings
Advanced settings
Figure 1.7 — Step 2 for Partner Registration / Deal Registration. No Referral Type field.
Variant C — Outbound Referral (no Step 2)
The Outbound Referral form skips Step 2 entirely. The "Use pipeline from CRM" checkbox on Step 1 is the only extra setting. See Figure 1.5 above.
Step 2 field reference
Referral Type (Variant A only)
The referral category in your program: Referral, Reseller, Influencer, etc. Drives which Partner Tier the lead is eligible for and which auto-rules apply.
Standard Objects To Create
The native CRM objects the form pushes data into. Typically contact, company, deal for sales forms; just contact for application forms.
Custom CRM Objects
Optional. Any custom objects you've defined in your CRM beyond the standard ones. Each becomes an extra option in the Builder's per-question CRM Object picker.
Assign Partner Tags
Optional. Tags applied to the partner on submit. Useful for tiering, routing, and reporting — e.g., agency, reseller, tier_1.
Add Rejection Reason
Optional. Predefined reasons admins can pick when rejecting an inbound referral (duplicate_lead, out_of_region, etc.). Surfaces in the partner's portal too.
Use pipeline from CRM (Variant C only)
For outbound forms: when ON, deals submitted are automatically assigned to a CRM pipeline (HubSpot Deals Pipeline, Salesforce Opportunity Stage). When OFF, deals are created standalone.
1.3 Form Types Reference
Euler supports five form types. All appear as options in the Create Form modal, in this order: Referral From Partner · Partner Registration · Outbound Referral · AI Email Parse · Deal Registration.
Referral From Partner type-rfp
When to use: partners submit leads to your team. The most common form type and the entry point for most partner programs.
Step 2: Referral Type · Standard Objects · Custom CRM Objects · Partner Tags · Rejection Reasons.
Unique: can be marked as the workspace's primary referral form. Only one form can be primary at a time — Euler's partner portal uses the primary form as the default destination for referral submissions.
Partner Registration type-pr
When to use: intake for new partners applying to your program. Creates a new Partner record (not a deal).
Step 2: Standard Objects · Custom CRM Objects · Partner Tags · Rejection Reasons (no Referral Type).
Outbound Referral type-or
When to use: when your team sends a lead out to a partner. Filled internally; on submit, routed to the assigned partner.
Step 2: none. The "Use pipeline from CRM" checkbox on Step 1 is the only extra config.
Unique builder behavior: a per-question toggle "Hide answers from partner" appears, letting you keep internal-only fields out of the partner-facing view of the lead.
AI Email Parse type-aep
When to use: ingest referrals that arrive over email — forwarded threads, partner inbox blasts, MSP relationships. The form acts as a target schema; Euler's parser lifts structured data out of the unstructured email body.
Step 2: same as Variant B (Standard Objects + Advanced).
Builder difference: the Agreements sub-tab is hidden (no human respondent), and questions are typically configured as autofill-from-parser.
Deal Registration type-dr
When to use: formal deal registration programs where partners register an opportunity to get exclusivity (deal protection) for a window of time.
Step 2: same as Variant B (Standard Objects + Advanced).
Unique: creates a Deal Registration record with a status lifecycle (Pending · Approved · Expired) and an expiration date. After expiration, the deal returns to the open pool. Configure the default expiration window in Settings › General.
1.4 Row Actions
The ⋮ button at the end of each row opens an actions menu.
Figure 1.8 — Row menu.
Edit
Opens the form in the Builder. Same as clicking the form name in the first column.
Duplicate Form
Opens a small confirm modal pre-filled with "Duplicate <Original Name>". Keep that name or rename. The duplicate copies all questions, design settings, add-ins, agreements, and conditionals — and starts as Inactive so you can edit before going live.
Delete
Destructive. Soft-deletes the form. Existing submissions stay in your CRM; the form's public URL stops accepting new traffic. Cannot be undone from the UI.
Duplicate Form modal
Duplicate Form
A copy of this form will be created. You can edit it after duplicating.
Figure 1.9 — Duplicate Form modal.
Delete confirm modal
Deleting a form opens a destructive-action confirm modal:
Delete form?
This action cannot be undone. The form's public URL will stop accepting submissions immediately.
Figure 1.10 — Delete confirmation modal.
Builder Interface
Your workspace once a form is created. Header controls, four tabs, and the inline banners that surface state.
2.1 The Builder Shell
Clicking Edit on any form in the table opens the Builder — a focused workspace that lives inside an iframe in the Euler app. It has three parts that never move: a fixed header with the form name and three action buttons, a row of four tabs below, and the content area that swaps depending on the active tab.
Figure 2.1 — Builder shell. Header on top, four tabs underneath, content area below.
2.2 Header Controls
The header has one navigation element on the left and three action buttons on the right.
The title
Reads Form Builder / <form name>. The arrow icon on the far left takes you back to the previous Euler context (Settings › Forms, partner detail page, etc.) without losing in-progress changes.
Figure 2.6 — Title zoom: back-arrow (20×20) + "Form Builder" (semibold #15171e) + "/" (regular #9196a1) + form name (regular #546078). All at 20px / line-height 30px.
Edit button
Toggles the Bubble parent into "edit" mode for the form metadata (name, type config). Useful when you need to rename a form or adjust the CRM settings that were locked in at creation. Doesn't affect the questions or design — those stay editable from inside the Builder always.
Figure 2.7 — Edit button: secondary style (white bg, grey border, tertiary text, pencil icon).
Run Test button
Opens the form in a new tab with ?test=true appended to the URL. The viewer enters test mode:
Figure 2.8 — Run Test button: brand outline style (white bg, brand-blue border + text, play icon).
- Auto-fills sample values for every question. For URL-parameter questions, it generates realistic fake values and seeds them into the URL itself, so the test URL looks like the real thing (
/f/acme-001?test=true&utm_source=Test_a3f9&partner_id=Test_92b1). - Submits the form through your real CRM pipeline.
- Returns a result modal showing every CRM object created, the status code from your CRM API, and any questions that failed to map.
- Automatically cleans up the test records from your CRM. Detailed walkthrough in Chapter 6 — Test & Publish.
Publish / Unpublish button
Toggles the form's Active state. The button label and color change based on the current status:
Unpublished (default for new forms)
Button reads Publish · secondary style (white background, gray border). Clicking publishes — moves the form to Active.
Published (live)
Button reads Unpublish · primary style (blue background, white text). Clicking unpublishes — moves the form back to Inactive.
If you click Publish on a form that hasn't passed a successful test, Euler shows a Test Warning Modal first (see 2.4 below). You can run the test, publish anyway, or cancel.
2.3 The Four Tabs
Every form's configuration lives across four tabs. Switching tabs preserves your unsaved work — Euler saves changes automatically as you make them.
Content
The default tab when you open the Builder. Add and edit questions, add-ins, and agreements. Live preview in the center, settings sidebar on the left. See Chapter 3.
Design
Visual styling: logo, fonts, colors, layout, button text. Three sub-tabs (Details · Style · Layout). Device preview switcher (desktop / tablet / mobile) on the right. See Chapter 4.
Code
The embed snippet — iframe HTML + JavaScript ready to paste on your site. Copy or download. Forwards URL parameters automatically. See Chapter 7.
Conditionals
Visual flow chart of show/hide logic. Pick a source question, define conditions (AND/OR, 10 operators), specify the questions to show or hide. See Chapter 5.
Content
Add and edit questions, manage add-ins and consent agreements, configure dropdowns directly from your CRM.
3.1 The Content Tab
The Content tab is your day-to-day workspace. The screen is split in two:
- Left sidebar (320px) — the Questions Settings panel. Swaps between three views: Add Question (no question selected), Edit Question (a question is selected), and Edit Add-in / Edit Agreement (when those sub-tabs are active).
- Center preview — a live, interactive mock of how your form will look. Click any question to edit it. Drag to reorder. Hover to reveal delete and duplicate.
Figure 3.1 — Content tab. Left sidebar in Add Question mode; preview showing six questions with the third selected.
3.2 Question Types
Pick a type first; the rest of the sidebar adapts to fit. Eight types available:
Short answer
Single-line text. Best for names, emails, phone numbers, short identifiers.
Number
Numeric input (integer or decimal). Revenue, deal size, employee count.
Dropdown
Single-select from a list. Manual entry or imported from your CRM picklist.
Multi-select
Pick several values. Stored as a comma-separated list in your CRM.
Paragraph
Long-form text. Use case notes, descriptions, custom messages.
Date
Native date picker. Stored as ISO date in your CRM.
Boolean
Yes / No selector. Customize the labels and API values (true/false, 1/0, etc.).
Upload file
File picker with drag-and-drop. Restrict accepted extensions. Files attach to the CRM record.
3.3 Adding a Question
With no question selected, the sidebar shows the Add Question form. Fill in the fields, click the blue button at the bottom, and the new question appears in the preview.
Figure 3.2 — Full Add Question sidebar for a Dropdown question.
Sidebar workflow
- Pick the question Type at the top.
- For Dropdown and Multi-select, click Dropdown Settings to define the options (manual or imported from your CRM). See 3.7.
- Set the Question Title — the label respondents see.
- Bind it to your CRM with CRM Object and API Value.
- Optionally: Internal Euler Value, Tooltip, toggles for Required, Is Hidden, Autofill.
- Click + Add Question. The question appears at the bottom of the preview list, ready to be reordered.
3.4 Question Settings — Every Field
Each field in the Question Settings sidebar, what it does, and when to use it.
Type
The data type (see 3.2). Changing the type after a question is created can wipe type-specific settings (dropdown options, file extensions) — Euler asks you to confirm first.
Figure 3.3a — Type selector with chevron. The current selection drives which other fields appear (e.g. the Dropdown Settings link for dropdown/multi-select; a File Types tag input for upload file).
Question Title *
The label respondents see above the input. Keep it short and concrete. "Email" beats "What's your email address please?". Required.
Figure 3.3b — Title input. Red asterisk on the label means required.
CRM Object *
Which CRM object this answer belongs to: contact, company, deal, or any custom object you defined in Step 2 of form creation. Required — Euler needs to know which record to write to.
Figure 3.3c — CRM Object dropdown. Options are derived from your form's Step 2 (Standard Objects + Custom CRM Objects).
API Value
The exact field name in your CRM (email, annual_revenue_usd, industry). As you type, Euler queries your live CRM schema (HubSpot or Salesforce) and shows matching properties with their labels. If left empty, the answer is stored in a generic referral field.
Figure 3.3 — API Value autocomplete. Greyed-out entries are already used by another question on the same object.
Internal Euler Value
Marks the question as a known well-known field — email, country, first_name, last_name, company_name. Euler uses this to power features like duplicate detection, partner-tier matching, and country-based logic — independent of where you push the value in your CRM.
Tooltip
Optional helper text. Shows as a small ? icon next to the question title in the public form. Useful for clarifying custom fields ("Use format MM/YYYY") or warning about constraints.
Figure 3.4a — Tooltip input. Empty by default; whatever you type here appears next to the question title in the public form, behind a small ? icon.
Required
Toggle. When ON, the question must be answered before the form can submit. Shows a red asterisk to respondents and an inline error if they skip it.
Figure 3.4b — Required toggle. ON = mandatory.
Is Hidden
Toggle. When ON, the question is invisible to respondents but still submits a value (typically via autofill). Best for UTM parameters, partner IDs, or campaign data.
Autofill
Toggle plus two sources. When ON, the question prefills with a value pulled from elsewhere.
- URL Parameter — pull from the embed URL's query string. If URL Parameter =
utm_sourceand the form loads at/f/123?utm_source=google_ads, the question prefills with google_ads. - Standard Object — pull from an existing CRM record. Useful for outbound flows where you already know the company or contact.
Figure 3.4 — Autofill panel with the URL Parameter source.
Hide answers from partner
Toggle. Outbound Referral forms only. When ON, the partner who receives the lead doesn't see this question's answer in their portal. Useful for keeping internal notes or sensitive data out of the partner-facing view.
Figure 3.4c — Hide answers from partner. Only renders on Outbound Referral forms.
Dropdown / Multi-select Settings
For dropdown and multi-select types, a link button appears under the Type field. Clicking it opens the Dropdown Settings modal (3.7) where you define options manually or import them from your CRM.
File Types (Upload file only)
For Upload file questions, a multi-select tag input lets you whitelist accepted extensions: pdf, docx, xlsx, png, jpg, mp4, and many more (45+ supported).
3.5 Editing a Question
Click any question in the preview to swap the sidebar from Add Question to Edit Question. The form fields are identical, but with three differences at the top and bottom:
- A ← Back chevron at the top returns you to Add Question.
- A Delete button (red) at the top-right removes the question.
- The bottom button reads Save Changes instead of Add Question.
Figure 3.5 — Edit Question panel. Back ← chevron, Delete button, Save Changes at the bottom.
3.6 The Preview Area
The center pane is a live, interactive preview of your form. Three things you can do on each row:
Click to edit
Click anywhere on a question row to load it into the sidebar editor. The selected row gets a blue border and a light blue background.
Normal — transparent border
Selected — 2px brand border + light blue bg + actions visible
Figure 3.7 — Normal vs Selected row states. Click toggles between them and binds the sidebar to that question.
Drag to reorder
Grab the 6-dot handle on the left to drag a question up or down. The new order saves immediately. If the save fails (rare), Euler reverts to the previous order silently.
Figure 3.8 — The drag handle (6 dots, 10×14px). Default colour #b1b5be (disabled grey); on hover/drag becomes #546078 (tertiary).
Hover to reveal delete and duplicate
The three icons on the right (edit · copy · trash) only appear on hover or when the row is selected. Clicking Duplicate creates a clone at the bottom of the list. Clicking Delete prompts a confirmation modal.
Figure 3.9 — Hover state: border #ecf0f3, bg #fafbfc, the 3 action icons (edit grey · duplicate grey · delete red) fade in.
Delete confirm modal
Clicking the trash icon opens a destructive-action confirm.
Delete question?
This action cannot be undone.
Figure 3.10 — Delete confirm modal.
3.7 Add-ins
Add-ins are fixed values pushed to your CRM alongside the form submission — they aren't shown to the respondent. Use them to inject CRM defaults (owner ID, lead source, deal stage) on every submission without polluting the form.
The Add-ins sub-tab swaps the preview area to a table view:
| Name | Value Type | Value | CRM Object | |
|---|---|---|---|---|
| owner_id | Static | 33421 |
deal | |
| lead_source | Static | Partner Portal |
contact | |
| partner_id | URL Parameter | partner_id |
deal |
Figure 3.7 — Add-ins sub-tab. Sidebar collects a new add-in; preview shows the table of existing ones.
Add-in fields
- API Field Name — the CRM field key to populate.
- Value Type — Static (a literal value) or URL Parameter (read from the embed URL).
- Value — the literal value (Static) or the URL parameter key (URL Parameter).
- CRM Object — which object receives this value.
3.8 Agreements (Consent Checkboxes)
Legal or consent checkboxes that respondents tick before submitting. Most common: GDPR consent, Terms of Service.
The Agreements sub-tab swaps the sidebar to an agreement editor with a rich text description (supports bold, italic, hyperlinks for "agree to Terms").
Figure 3.8 — Agreement editor with the rich-text description.
3.9 Dropdown Settings Modal
For Dropdown and Multi-select questions, click Dropdown Settings in the sidebar to open this modal. Two tabs:
- Manual — type each option's Name (what users see) and API Value (what your CRM stores).
- CRM Import — pull options live from your CRM (HubSpot enumerations or Salesforce picklists).
Dropdown Settings
Define the options respondents can pick from.
Figure 3.9 — Dropdown Settings modal, Manual tab. Drag the ≡ handles to reorder.
CRM Import tab
Switch to the second tab to import options directly from your CRM. Pick a CRM object (e.g., company) and then a property of type enumeration/picklist (e.g., industry). Euler pulls the values straight from your CRM — name and API value automatically mapped, no transcription errors.
Dropdown Settings
Define the options respondents can pick from.
Preview · 12 options
Figure 3.10 — Dropdown Settings modal, CRM Import tab. Live picklist values pulled from your CRM.
Design
Style the form to match your brand. Logo, fonts, colors, layout, and a live device preview.
4.1 The Design Tab
The Design tab is where you brand and style the form. Layout is similar to Content — a focused sidebar on the left, a live preview on the right — but with a few differences:
- The left panel is 272px wide (slightly narrower than Content's 320px).
- The header card reads Edit Properties instead of Questions Settings.
- The sub-tabs are Details · Style · Layout instead of Elements/Add-ins/Agreements.
- A sticky footer with Reset and Save buttons appears at the bottom.
- The preview right pane wraps the form in a browser frame with a device switcher (Desktop · Tablet · Mobile) on top.
Acme Partner Referral
Tell us about the lead you'd like to refer.
Figure 4.1 — Design tab. Left: Edit Properties panel with Details sub-tab open. Right: live form preview inside a browser frame with device switcher.
4.2 Details sub-tab
Brand and copy. This is where the form gets its identity.
Upload Logo
Drop a logo file (PNG or SVG, recommended 200×60). Shows two states:
Click to upload or drag and drop
Empty state: dashed dropzone with cloud-upload icon.
Filled state: shows the file name, size, remove button, and a size slider (24–120px).
Form Title
The H1 above the questions on the public form. Defaults to the form name.
Form Description (Optional)
Multi-line textarea with a 200-character cap and live char counter. Shows directly below the title.
Button
The submit button label. Defaults to Submit — change to Refer a deal, Apply, etc.
Show Title & Description toggle
When OFF, the title block (logo + title + description) is hidden from the public form. Useful when you embed the form inside a page that already has its own heading.
4.3 Style sub-tab
Typography, colors, sizing. Organized as four collapsible sections: Font · Text · Input · Button.
Figure 4.2 — Style sub-tab with the Font section expanded.
Font section
Four independent font selectors: Title · Description · Fields · Button. Pick from system fonts (Inter, Roboto, Open Sans, system stack) or any Google Font.
Text section
Two blocks — one for the Title, one for the Description — each with Weight (Regular/Medium/SemiBold/Bold), Size (10/12/14/16/18/20/24px), and Color (a swatch + hex input).
Input section
Affects every question input on the public form. Controls: Weight · Size · Title Color (label) · Placeholder Color · Border Radius (0/2/4/6/8/12/16px).
Button section
Submit button styling: Weight · Size · Font Color · Background Color · Border Radius · 4 paddings (Top/Bottom/Left/Right, each capped at 200px).
Color input pattern
Used across the Style sub-tab. A swatch on the left (clickable native color picker) plus the hex value on the right.
Figure 4.3 — Color input pattern.
4.4 Layout sub-tab
Where the form sits in its container and how much breathing room around it. Three groups: Position · Background · Form Paddings.
Position
Two rows of icon buttons:
- Title & Description Position — left / center / right (text alignment of the title block).
- Form Position — two side-by-side groups: horizontal position (left/center/right) and vertical position (top/center/bottom) of the form inside its container.
Position
Figure 4.4 — Position group: three buttons for title alignment, plus two more groups (H + V) for the form's position in its container.
Background
Two color inputs:
- Page Background — the area outside the form card.
- Form Background — the form card itself.
Form Paddings
Four px inputs (Top · Bottom · Left · Right) controlling the padding of the page container around the form. Capped at 200px each.
Figure 4.5 — Padding inputs with px suffix.
4.5 Save & Reset
The Design panel has a sticky footer with two buttons:
Figure 4.6 — Sticky Reset + Save footer.
Save
Persists the current design settings to the backend and to localStorage for resilience. While saving, the button shows Saving... at 50% opacity.
Reset
Restores all design settings to Euler's defaults. Opens a confirm modal before resetting since this is destructive (you lose all custom design choices).
Reset design settings?
This will restore all design settings to their default values. Any unsaved changes will be lost.
Figure 4.7 — Reset confirm modal.
localStorage as you make them — even if you accidentally close the tab before clicking Save, your work is restored the next time you reopen the form.Conditionals
Show or hide questions based on earlier answers. A visual flow chart paired with a rule editor.
5.1 The Conditionals Tab
Conditional logic decides which questions a respondent sees based on earlier answers. The Conditionals tab has two parts:
- Flow Canvas (left, expandable) — a visual top-to-bottom flow chart of your form. Each question is a node. When a question has conditions, it forks into branches plus an Else.
- Condition Editor (right, 320px) — appears when you click any source-eligible question on the canvas. Define the rule groups, conditions (AND/OR), and actions (Show/Hide other questions).
Figure 5.1 — Conditionals tab with Lead Type selected, its conditional fork visible, and the Condition Editor open.
5.2 The Flow Chart
The canvas reads top-to-bottom, like a flow diagram. Three kinds of nodes plus the connector arrows.
Start Form
Always at the top. A small card titled Workflow starts here with a counter showing how many fields the form has. Anchors the canvas.
Field nodes
One per question in the form. White card, 240px min-width, with the question name. Three border states:
- Normal — 1px grey border
#dbe0e5. - Has conditions — 2px indigo border
#818cf8. Tells you "this field's answer changes what comes next." - Selected — 2px brand-blue border
#2563eb+ a 3px halo + blue text. Whatever you click becomes selected; the editor on the right binds to it.
End Form
Always at the bottom. Grey terminator with the message This form is completed.
Node states — side by side
Normal
1px grey border
Has conditions
2px indigo #818cf8
Selected
2px brand + 3px halo
Figure 5.2 — The three border states of a Field node.
Start & End nodes
Figure 5.3 — Start node (with field count) and End node anchor the canvas top and bottom.
5.3 Conditional Forks
When a question has conditions, the canvas splits it into N + 1 branches: one for each rule group, plus an Else branch for when no rule matches.
Anatomy of a branch — zoomed in
Each rule branch contains, top to bottom:
Figure 5.4 — A single rule branch: condition pill (purple #5415c1 on #f3edff) → arrow → Show pill (green) → target field card (green bordered).
- Condition pills — purple text on a light purple background. Format:
<source field> <operator> <value>. Multiple conditions in the same rule are stacked, prefixed by the AND/OR logic word. - Action pill — green Show or Hide label.
- Target field card — green-bordered card with the affected question's name.
Multiple conditions stacked (AND/OR)
When a rule group has more than one condition, they stack vertically inside the branch. The second and later pills are prefixed with the AND/OR logic word.
Figure 5.5 — Two conditions joined with AND. Reads as: If Lead Type = Enterprise AND Annual Revenue > $1M, show Decision Maker Email.
Else branch detail
The Else branch sits to the right of all the rule branches. No conditions, no actions — just two text labels.
Figure 5.6 — The Else branch is simpler: italic "Else" + "Continue" sub-label.
Multi-rule fork — 2 rule groups + Else
Stacking rule groups on the same source question creates a wider fork. The trunk splits into N branches plus Else.
Figure 5.7 — Two rule groups + Else. Enterprise leads → ask Annual Revenue. SMB leads → show Self-Serve Plan. Anything else → no extra question.
Fork + Merge connectors
Drawn as SVG paths with rounded corners (radius 12px). The trunk splits at y = 45% of the fork's height into N parallel branches, then merges back at the bottom into the single trunk for the next question.
The + button
When a conditional question is selected, a small + button appears above the fork — click it to add another rule group (which appears as a new branch).
Figure 5.8 — The "+" button (28px circle, 1px grey border, white bg, sm shadow). Appears above the fork only when the source question is selected.
5.4 Condition Editor (right panel)
Opens when you click a source-eligible question. 320px wide, white background, scrollable middle, fixed header + footer.
Header
Title Add Conditional on the left, an × close button on the right.
Figure 5.9 — Header bar.
Selected Field
Dropdown at the top. Pre-selected to the question you clicked on the canvas; switching from the dropdown changes the canvas selection.
Figure 5.10 — Selected Field dropdown with the source-question icon on the left.
Rule Group tabs
Visible only when there are 2+ rule groups. Each rule group is a chip ("Rule 1", "Rule 2", …) with an × to delete. The blue chip is the currently-edited group; the others are inactive but clickable to switch. A + chip at the end adds a new rule group.
Figure 5.11 — Rule Group tabs. Rule 1 is active (blue); Rule 2 is inactive but clickable. The × deletes a rule, the + adds a new one.
IF Section
Blue If tag plus the helper text "Conditions match." Then one condition row per condition in the active rule group:
- Operator dropdown (varies by source field type — see 5.5).
- Value dropdown / input (varies by operator and field type).
- × button to remove the condition.
- For 2+ conditions: a Source field dropdown appears as a 3rd column (so you can mix conditions across multiple source questions).
Below the conditions: + Add condition button and an AND / OR logic toggle controlling how multiple conditions combine within this rule group.
Figure 5.12 — IF section with two conditions joined by AND. The second condition reveals the Source field dropdown (third column) for cross-question conditions.
THEN Section
Green Then tag plus "Actions to perform." One action row per action:
- Action dropdown — Show or Hide.
- Target field dropdown — any question in the form.
- × button to remove the action.
Plus a + Add action button.
Figure 5.13 — THEN section with two Show actions. You can stack any number of actions per rule group.
Footer
On the left, a red Delete rules link (removes all conditional logic from this question). On the right, the blue Save Rules button (commits the changes to the backend).
Figure 5.14 — Editor footer: Delete (red, destructive) on the left; Save (blue, commits) on the right.
5.5 Operators Reference
Which operators are available depends on the source question's type. The picker auto-filters to keep things sane.
Dropdown · Multi-select · Country fields
Is
equals — the answer matches the value exactly.
Is not
not_equals — the answer is anything other than the value.
In
in — the answer is one of multiple values you select.
Number (free input — no predefined values)
= Equal to
equals
≠ Not equal to
not_equals
> Greater than
greater_than
≥ Greater or equal to
greater_than_or_equal
< Less than
less_than
≤ Less or equal to
less_than_or_equal
↔ Between
between — provide Min and Max. Inclusive on both ends.
Boolean
Is
equals — pick the value (Yes/No, or your custom labels).
Date
Is
equals — exact date match.
Before
before — strictly earlier than the value.
After
after — strictly later than the value.
Test & Publish
Verify your form's CRM mapping with Run Test, then publish to go live.
6.1 Running a Test
Before going live, every form should pass a CRM test. Run Test in the Builder header opens the form in a new tab with ?test=true appended to the URL. The viewer enters test mode:
- Auto-fills sample values for every visible question.
- For URL-Parameter questions, generates realistic fake values (e.g.
utm_source=Test_a3f9,partner_id=Test_92b1) and seeds them right into the test URL so the autofill engine picks them up. - Submits the form through your real CRM pipeline — same workflows, same field mappings.
- Captures the response from your CRM (status codes, record IDs, error bodies).
- Automatically deletes the test records from your CRM so your real pipeline stays clean.
- Marks the form as tested. The yellow "Form not tested" banner (see Cap 2) disappears.
?test=true URL. The CRM test data is cleaned up regardless of who clicks Submit.6.2 Test Result Modal
After the test submits, a modal opens showing per-object results from your CRM.
Everything looks good!
All 3 CRM object(s) created successfully. Your form is ready to be published.
{
"properties": {
"firstname": "Test_a3f9",
"email": "test_a3f9@example.com",
"lead_source": "Partner Portal"
}
}
{
"id": "0031a000abcEF",
"createdAt": "2026-05-15T17:08:42.123Z",
"updatedAt": "2026-05-15T17:08:42.123Z",
"archived": false
}
{
"properties": {
"name": "Test Company 92b1",
"industry": "saas",
"annual_revenue": "5000000"
}
}
{
"id": "0011b000xyzAB",
"createdAt": "2026-05-15T17:08:42.789Z",
"archived": false
}
{
"properties": {
"dealname": "Acme — Test_a3f9",
"dealstage": "qualifiedtobuy",
"lead_type": "enterprise"
}
}
{
"id": "0061c000klmNO",
"createdAt": "2026-05-15T17:08:43.012Z",
"archived": false
}
Figure 6.1 — Test Result Modal (passing). Click Show Payload / Show Response on each card to expand the JSON. Click Hide Details at the top to collapse.
When the test fails
If a CRM call returns 4xx or 5xx, the corresponding row shows the error code in red (e.g. 400 BAD_REQUEST). A Reveal payload link expands the JSON Euler sent to your CRM and the response body — useful for diagnosing the exact field that triggered the error.
Common reasons for a failed test
- Misspelled API field name — Euler can't find
annula_revenueon the deal object. - Required CRM field not mapped — Salesforce requires Stage, but you didn't add a question or Add-in for it.
- Picklist value doesn't match — your question's API value
EUdoesn't match the picklist optionEuropean Union. - Permission denied — the Euler integration user can't write to the custom object.
Unmapped questions
Questions without an API Value are listed under Unmapped questions at the bottom of the modal. They don't fail the test, but they also don't make it to your CRM — Euler stores them in a generic referral field instead.
6.3 Publish & Unpublish
Click Publish in the Builder header. The button toggles to Unpublish (blue background). The public URL /f/<form_id> starts accepting submissions.
The pre-publish check
If you click Publish on a form that hasn't passed a successful test on its current state, Euler intercepts with the Test Warning Modal (see 2.4) — three options: Cancel, Publish Anyway, or Run Test.
Unpublishing
Clicking Unpublish reverses the state. The public URL still resolves but returns a "form unavailable" message — embedded iframes won't 404. Any in-flight submissions already in your CRM are unaffected.
Banners after a publish/unpublish
A transient green banner appears below the header confirming the action: "Your form has been successfully published." with a View action that opens the public URL.
Embed
Generate the iframe snippet and paste it on any website.
7.1 The Code Tab
The Code tab is a copy-ready iframe snippet you paste on any website. Layout: a 290px left panel with actions, and a dark code editor on the right.
<div style="width: 100%; overflow: hidden;"> <iframe id="euler-form-acme-001" src="" style="border: 0; width: 100%; height: 800px;" frameborder="0" ></iframe> </div> <script> window.addEventListener("DOMContentLoaded", function () { const currentParams = new URLSearchParams(window.location.search); const baseIframeSrc = "https://eulerapp.com/preferral?rid=acme-001"; const url = new URL(baseIframeSrc); currentParams.forEach((value, key) => { url.searchParams.set(key, value); // avoids duplicates }); const iframe = document.getElementById("euler-form-acme-001"); if (iframe) { iframe.src = url.toString(); } }); </script>
Figure 7.1 — Code tab. Left: actions panel. Right: dark editor with syntax-highlighted HTML+JS.
7.2 The Embed Snippet — what it does
The generated snippet has three responsibilities:
- Renders the form iframe at 100% width and 800px height (adjust as needed for your page).
- Forwards URL parameters — reads the host page's query string and appends every param to the iframe's
srcURL. So?utm_source=google&partner_id=33421on your page reaches the form's autofill engine. - Zero dependencies — vanilla JS, no jQuery, no React. Works on any site (WordPress, Webflow, Framer, plain HTML).
Copy
Copies the snippet to your clipboard. Falls back to a hidden textarea + document.execCommand('copy') if the Clipboard API is blocked (some iframe contexts). The button briefly flips to a checkmark to confirm the copy worked.
Download Code
Downloads the snippet as form-<id>-embed.txt. Useful when you want to commit the snippet to a repo or email it to your web team.
Public Form
What respondents see when the form is live.
8.1 The Public Form (Viewer)
Once published, your form lives at https://eulerapp.com/f/<form_id> and inside every embed iframe. What respondents see is shaped entirely by your Builder configuration — design, content, conditionals, all live, all reactive.
Acme Partner Referral
Tell us about the lead you'd like to refer.
Figure 8.1 — The public form viewer with Acme's design settings applied.
8.2 Viewer Features
The viewer isn't just a render of your form — it's a smart runtime that handles autofill, validation, conditionals, file uploads, and embed-mode quirks.
Live conditional rendering
Questions show/hide instantly as the user types or picks, with no page reload. The same engine that draws the Conditionals flow chart runs on the client.
URL parameter autofill
Reads ?key=value on load. Hidden questions and add-ins with autofill source = URL Parameter get prefilled. The user never sees these fields.
File upload
Drag-and-drop or click-to-upload. Restricts extensions per the question's File Types setting. 50MB cap. Multiple files where allowed.
Native date picker
Keyboard-accessible, locale-aware (mm/dd/yyyy for US, dd/mm/yyyy for EU). Date conditionals (before, after, between) evaluate on this input.
Inline validation
Required-field check fires on Submit. Type-specific rules (valid email, valid URL, number range) fire on blur. Errors show in red below the field with a short message.
Submission flow
- User fills out visible questions. Hidden questions and add-ins populate silently.
- Client-side validation runs (required, type, conditionals).
- Form posts to
/api/public/submit— the only unauthenticated route on the worker. - Worker forwards the payload to your Bubble backend, which routes it through your CRM connectors (HubSpot, Salesforce, Pipedrive).
- User sees a success message — or an error with a Retry CTA if the CRM write fails.
Advanced
Hidden fields, URL parameter autofill, and importing dropdown options from your CRM.
9.2 URL Parameter Autofill
Read values from the embed URL into form fields without displaying the field. Two patterns dominate:
UTM tracking
Hidden questions for utm_source, utm_medium, utm_campaign, utm_content, utm_term — pushed onto the contact object in your CRM. Your sales team sees exactly which campaign drove each referral.
Partner attribution
A hidden partner_id question, autofilled from the partner's portal link. Your CRM now knows which partner owns the lead — feeds back into your partner program's reporting and revenue share.
Example URL
The Acme embed loads at:
The embed snippet forwards utm_source and partner_id to the iframe. The viewer autofills those hidden questions and submits them with the rest of the answers.
Standard Object Autofill
Instead of pulling from the URL, you can pull values from an existing CRM record. Useful for outbound flows where you already know the contact or company. Configure: Autofill ON → Source = Standard Object → Object (HubSpot/Salesforce object) → Autofill API Value (which property to pull).
9.3 CRM Import (Dropdowns)
For dropdown and multi-select questions, instead of typing every option manually, you can import the list directly from your CRM picklist values.
Supported CRMs and field types
- HubSpot — any property of type
enumerationon any object (contact, company, deal, ticket, custom object). - Salesforce — picklist fields (
picklist,multipicklist) on standard or custom objects. - Pipedrive — custom field "enum" type on Person, Organization, or Deal.
What gets imported
Two columns per option, automatically:
- Name — the human label your respondents see (HubSpot:
label, Salesforce:label). - API Value — what your CRM stores (HubSpot:
value, Salesforce:value). No transcription, no typos.
Read-only properties
Some CRM properties are system-managed and can't be written to via the API (e.g. HubSpot Score, Salesforce Last Modified Date). The picker surfaces these but disables selection so you don't waste time on a doomed mapping.
That's all.
You've made it through every feature of Euler Forms — from the table view through the Builder's four tabs, every question type and setting, conditionals with the full operator reference, test & publish, embeds, the public form runtime, and the advanced bits.
Euler Forms — User Guide v2 · Built pixel-perfect against the Worker code.
Questions or corrections? Drop a note to your Customer Success contact.