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.
How this guide is organized. We'll build the same form end-to-end across all chapters — a Partner Referral form for a fictional SaaS company called Acme. Each chapter advances that example so you can see every feature in context.

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.

Forms

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.

in the top-right of the Forms card

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.

Form Builder / Acme Partner Referral
You're inside the Builder — Content tab is active.

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.

Save as you go. Every change in the Builder is saved automatically. The Publish button only controls whether the form is publicly reachable — it doesn't gate saving your work.
Chapter 1

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.

Forms

No data found

You have no forms at the moment.

Figure 1.1 — Empty state. Click + New Form to start.

Forms
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
Viewing 1 - 5 of 5 items
1 of 1

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.

Figure 1.3 — Step 1, empty (no type selected yet).

Figure 1.4 — Step 1 with Referral From Partner selected.

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).

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).

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.

i
Type is permanent. Once a form is created, you can't change its type. If you picked the wrong one, create a new form (use Duplicate Form on the old one if you want to keep the questions).

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 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

Figure 1.9 — Duplicate Form modal.

Delete confirm modal

Deleting a form opens a destructive-action confirm modal:

Figure 1.10 — Delete confirmation modal.

Submissions are preserved. Deleting a form doesn't remove its submissions from your CRM — only the form template itself goes away. If you need a clean break, archive those CRM records separately.
Chapter 2

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.

Form Builder / Acme Partner Referral
Content tab body — detailed in Chapter 3

Figure 2.1 — Builder shell. Header on top, four tabs underneath, content area below.

Click the tabs above — they're live. The highlight follows your click so you can feel how the navigation responds. We'll detail each tab in the chapters ahead.

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.

Form Builder / Acme Partner Referral

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).

  1. 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).
  2. Submits the form through your real CRM pipeline.
  3. Returns a result modal showing every CRM object created, the status code from your CRM API, and any questions that failed to map.
  4. 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.

i
Unpublishing doesn't break embeds. An unpublished form's public URL still resolves — it just shows a "form unavailable" message instead of accepting submissions. So embedded iframes don't 404 when you take a form down.

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.

i
Code tab is hidden for some forms. Forms marked as the workspace's primary referral form don't show the Code tab — they're surfaced through Euler's partner portal instead of needing a custom embed.

2.4 Banners & Warnings

The Builder uses three kinds of inline banners directly below the header to surface state-aware messages.

Form not tested (warning)

Appears when the form has been modified since its last successful test. Stays visible until you re-run the test (or unpublish the form).

Form Builder / Acme Partner Referral
This form was modified since the last successful test. We recommend running the test again.
Content tab body

Figure 2.2 — Form-not-tested banner. Clicking Run Test opens the test viewer.

Success / error banners

Transient banners appear after actions like saving, publishing, or test runs.

Your form has been successfully published.

Figure 2.3 — Success banner after publishing. The View action opens the public form URL.

Failed to save "Annual Revenue". Please try again.

Figure 2.4 — Error banner. Includes the specific question or action that failed.

Test Warning Modal

If you click Publish on a form whose latest changes haven't been tested yet, this modal blocks the publish action and asks you to decide.

Figure 2.5 — Test Warning Modal. Three actions: Cancel · Publish Anyway · Run Test.

Recommended path: always click Run Test first. The test runs in under 5 seconds, exercises your real CRM mapping, and cleans up after itself. Publishing without a test passes risk into production.
Chapter 3

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.
Form Builder / Acme Partner Referral

Acme Partner Referral

Figure 3.1 — Content tab. Left sidebar in Add Question mode; preview showing six questions with the third selected.

i
Three sidebar sub-tabs. The pill toggle below the Questions Settings header switches between Elements (questions — the default), Add-ins (silent CRM extras), and Agreements (consent checkboxes). Each has its own preview layout in the center.

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.

For Acme: short answer for First/Last Name, Email, Phone · dropdown for Industry, Country, Lead Type · multi-select for Use Cases · number for Annual Revenue · paragraph for Notes.

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

  1. Pick the question Type at the top.
  2. For Dropdown and Multi-select, click Dropdown Settings to define the options (manual or imported from your CRM). See 3.7.
  3. Set the Question Title — the label respondents see.
  4. Bind it to your CRM with CRM Object and API Value.
  5. Optionally: Internal Euler Value, Tooltip, toggles for Required, Is Hidden, Autofill.
  6. Click + Add Question. The question appears at the bottom of the preview list, ready to be reordered.
Optimistic updates. The question appears in the preview instantly while it saves to the backend. If the save fails, you'll see an error banner and the question is removed cleanly.

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.

Annual Revenueannual_revenue
Annual Recurring Revenuearr_usd
Annual Spend (used)annual_spend

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.

Hidden ↔ Autofill linkage. Turning Is Hidden ON automatically turns Autofill ON and locks the source to URL Parameter. A hidden question without an autofill source would always submit empty — Euler prevents that.

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_source and 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.
Autofill Settings

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.

Hover state: cursor becomes a grab hand, grip darkens

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.

Figure 3.10 — Delete confirm modal.

i
Live field rendering. Each question row in the preview shows the actual input that respondents will see — text input, select, textarea, file dropzone, etc. The label and rendered field update in real time as you edit on the left sidebar.

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 TypeStatic (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.
Add-ins vs Hidden Questions. Both inject values silently. Use a Hidden Question when the value needs validation rules, conditionals, or to appear in test reports. Use an Add-in for fire-and-forget constants like lead_source = "Partner Portal".

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.

i
Agreements are hidden for two form types: AI Email Parse (no human respondent) and forms marked as the workspace's primary referral form (consent is collected at the portal level).
Chapter 4

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.
Form Builder / Acme Partner Referral

Acme Partner Referral

Tell us about the lead you'd like to refer.

First Name *
Email *

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.

A

acme-logo.svg

3 KB

48px

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.

Font
Text
Title
Color
Description
Color
Input
Title Color
Placeholder Color
Button
Font Color
Background Color
px
px
px
px

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.

Title Color

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.

px
px
px
px

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).

Figure 4.7 — Reset confirm modal.

Auto-resilience. Design changes persist in 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.
Chapter 5

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).
Form Builder / Acme Partner Referral
Start Form
Workflow starts here
5 Fields
Field
Field
Field
Lead Type Is Enterprise
Show
Annual Revenue
Else
Continue
Field
End Form
This form is completed

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

Field

Normal
1px grey border

Field

Has conditions
2px indigo #818cf8

Field

Selected
2px brand + 3px halo

Figure 5.2 — The three border states of a Field node.

Start & End nodes

Start Form
Workflow starts here
5 Fields
End Form
This form is completed

Figure 5.3 — Start node (with field count) and End node anchor the canvas top and bottom.

i
Conditional targets are nested under the source. A question that's only revealed by another question's answer doesn't appear in the main trunk — it shows up inside that source question's fork (see 5.3 below).

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:

Lead Type Is Enterprise
Show
Annual Revenue

Figure 5.4 — A single rule branch: condition pill (purple #5415c1 on #f3edff) → arrow → Show pill (green) → target field card (green bordered).

  1. 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.
  2. Action pill — green Show or Hide label.
  3. 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.

Lead Type Is Enterprise
AND Annual Revenue > 1,000,000
Show
Decision Maker Email

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.

Else
Continue

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.

Lead Type Is Enterprise
Show
Annual Revenue
Lead Type Is SMB
Show
Self-Serve Plan
Else
Continue

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.

Add Conditional

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.

If Conditions match

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.

Then Actions to perform

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.

Changes are local until Save. Edits in the panel are kept in local state — switching tabs without clicking Save discards them. Save Rules is the only way to persist conditional logic.

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.

Source eligibility. Only some question types can drive conditionals. Eligible: dropdown, multi-select, boolean, number, date. Not eligible: short answer, paragraph, upload file (no enumerable answer set).
Chapter 6

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:

  1. Auto-fills sample values for every visible question.
  2. 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.
  3. Submits the form through your real CRM pipeline — same workflows, same field mappings.
  4. Captures the response from your CRM (status codes, record IDs, error bodies).
  5. Automatically deletes the test records from your CRM so your real pipeline stays clean.
  6. Marks the form as tested. The yellow "Form not tested" banner (see Cap 2) disappears.
The test URL is shareable. If a teammate needs to verify the form behaves correctly, just send them the ?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.

100%
contact 201 Created Deleted
POST /crm/v3/objects/contacts
Payload Sent
{
  "properties": {
    "firstname": "Test_a3f9",
    "email": "test_a3f9@example.com",
    "lead_source": "Partner Portal"
  }
}
Response Body
{
  "id": "0031a000abcEF",
  "createdAt": "2026-05-15T17:08:42.123Z",
  "updatedAt": "2026-05-15T17:08:42.123Z",
  "archived": false
}
company 201 Created Deleted
POST /crm/v3/objects/companies
Payload Sent
{
  "properties": {
    "name": "Test Company 92b1",
    "industry": "saas",
    "annual_revenue": "5000000"
  }
}
Response Body
{
  "id": "0011b000xyzAB",
  "createdAt": "2026-05-15T17:08:42.789Z",
  "archived": false
}
deal 201 Created Deleted
POST /crm/v3/objects/deals
Payload Sent
{
  "properties": {
    "dealname": "Acme — Test_a3f9",
    "dealstage": "qualifiedtobuy",
    "lead_type": "enterprise"
  }
}
Response Body
{
  "id": "0061c000klmNO",
  "createdAt": "2026-05-15T17:08:43.012Z",
  "archived": false
}
Deleted 3 records from CRM

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_revenue on 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 EU doesn't match the picklist option European 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.

Chapter 7

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.

Form Builder / Acme Partner Referral
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 src URL. So ?utm_source=google&partner_id=33421 on 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.

i
Code tab is hidden for primary referral forms. Forms marked as the workspace's primary referral form don't show the Code tab — they're surfaced through Euler's partner portal instead of needing a custom embed.
Chapter 8

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.

I agree to Acme's Privacy Policy and consent to being contacted about my referral.
Powered by

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

  1. User fills out visible questions. Hidden questions and add-ins populate silently.
  2. Client-side validation runs (required, type, conditionals).
  3. Form posts to /api/public/submit — the only unauthenticated route on the worker.
  4. Worker forwards the payload to your Bubble backend, which routes it through your CRM connectors (HubSpot, Salesforce, Pipedrive).
  5. User sees a success message — or an error with a Retry CTA if the CRM write fails.
Chapter 9

Advanced

Hidden fields, URL parameter autofill, and importing dropdown options from your CRM.

9.1 Hidden Fields

A hidden field is a question that doesn't render in the form UI but still submits a value. Most common use: capturing UTM parameters or partner IDs that come in via the URL.

How they work

  • Turning on Is Hidden on a question forces Autofill ON and locks the source to URL Parameter.
  • The "Object" selector (for Standard Object autofill) is hidden, since it doesn't apply.
  • If the URL parameter is missing on form load, the question submits empty (unless marked Required, in which case the submission fails validation).
  • Hidden questions appear in Test Mode reports so you can verify the autofill works end-to-end.

Hidden vs Add-in — which to use?

Use a Hidden Question when…

You need validation (e.g. partner_id must be a non-empty UUID). Or when you want the field to appear in conditionals (e.g. show different paths based on UTM source). Or when you want it tracked in test reports.

Use an Add-in when…

The value is a constant (lead_source = "Partner Portal") or pure URL forwarding without validation. Lower-overhead, won't clutter the conditional editor.

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:

https://acme.com/refer?utm_source=google_ads&partner_id=acme-affiliate-742

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 enumeration on 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.

200-option cap. The backend caps imported lists at 200 entries. If your CRM property has more (rare), Euler surfaces a "list too long" error. Trim the list, use a subset, or split into two narrower questions.

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.