Better conditional split
better conditional splits ui, easier to understand
Formflow Copilot — AI That Builds Your Forms in Real Time
A fully conversational AI copilot built directly into Formflow. Just describe what you need and watch Copilot generate a complete, production-ready form in seconds — with smart logic, conditional branching, validation rules, and professional styling applied automatically. Not just a form generator. Copilot stays with you throughout the entire lifecycle: • **Build** — Describe your form in plain language and Copilot builds it live as you talk. • **Edit** — Ask it to rearrange fields, change logic, update copy, or restyle anything — all in realtime. • **Troubleshoot** — Copilot diagnoses issues with your form logic and fixes them on the spot. • **Style** — Tell it your brand vibe and it handles the rest. No drag-and-drop required. No settings menus to hunt through. Just a conversation that ends with a form ready to share or embed.
Dashboard Page redesign (v2)
Design Link: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7373-27280&t=edMCZmU147uD59I5-4 Preview Link: https://www.figma.com/proto/2maIBobhfPnn2zlEs6yzns/Formflow?page-id=1174%3A3583&node-id=7373-27280&t=edMCZmU147uD59I5-0&scaling=contain&content-scaling=responsive&starting-point-node-id=3582%3A27114
Swap global font to a Google Font
I have swapped the current font [Satoshi] to a google font [Manrope] in the Figma: Satoshi Bold ➝ Manrope Bold (letter spacing: -1%) Satoshi Medium ➝ Manrope Medium Satoshi Regular ➝ Manrope Regular Satoshi Light ➝ Manrope Light Please let me know if this font works. Thanks guys!
Upgrade account flow and payment capturing
Right now we don't have a way to upgrade the account and capture the payment We need to take some steps: Remove the free account option from packages selection We need a continuous top bar that shows you need update your payment information We need an upgrade flow when trying to use features from canvas that are part of next plan The other things from here are on Gab's slack list
Onboarding v2 (Reduced from 9 screens to 3)
Design: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7733-45396&t=Euw0uqRRwFssFbKN-4
Canvas Analytics (inflow analytics)
Right now the analytics mode from the canvas is disabled because it wasn't working correctly. Once the new canvas on Redux works completely, we need to implement analytics back. Considering we fixed the events capture on the form, we need to do a complete update to the canvas analytics system too.
Refinement for File Uploading and serving assets
Solution proposed: pdf, videos, etc are stored on S3 and served via CloudFront. It makes sense, especially for videos, because we can use lambdas to reduce the size images are saved on cloudflare images and served via CloudFlare CDN. This way we have automatic optimization and best results on serving them.
New uploader area for logo and background images of pages
On the style editor, we're going to add a new functionality for uploading logo and background images/videos Here is the figma for the design: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=4289-24428&node-type=CANVAS&t=Mp8HmA5w6G133LiW-0 Rest of the details in sub-tasks
Slack integration error
https://jam.dev/c/af857c8e-6155-4de2-96b9-78f7393b8e01
Error deleting responses from Results page
While on results page, delete a response
Pro account features issue
I noticed an issue the other day with my hello@caloriecoach.app account, and as I was talking to a current customer she said she was experiencing the same thing. She said that even though she was a paying customer, it was telling her that she needed to upgrade her account. So If I tried to drag/drop multiple nodes it said "you must have a pro acount" i went into clerk, added user_pro and refreshed, same thing. then on a call with a customer they told me they had the same issue. https://www.loom.com/share/74f61bee1e274b3297a782637ba5454c?sid=dfd8f4d6-dec3-439a-90e6-8e66ea15d562
Redesign the Checkout/Subscribe page with new direction
Figma design: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7255-55712&t=a8j8ihYYNIHmiWAj-4
Intercom chat - fix positioning on style editor page
Intercom chat - fix positioning on style editor page is planned for Formflow. We will share more details as implementation progresses.
Results Page v2
Results Page v2 is planned for Formflow. We will share more details as implementation progresses.
Refactor results page
Refactor results page is planned for Formflow. We will share more details as implementation progresses.
Improve the Dashboard/category on Jason's website
The new dashboard/category pages with video card style is ready: https://jasonkwilliamson.com/klaviyo-mastery What's new? Improved login-logout experience, with a new icon indicator when a user is logged in. Final touches on the module pages. Fixed the search/filter features. Fixed the video page issue where, if no videos are available, the Netflix section is hidden. Added login requirement and "buy course" button (to cover edge cases and prevent users from abusing unprotected pages—view first, buy later). Added a new CMS for categories, enabling real-time search and filtering. Improved UI/UX and micro-interaction experiences overall. Enhanced overall website performance.
Redesign the Sign-up page on Website
The hero sign-up page has been redesigned. With two separate cards is now merged into one for a better understanding of what users will get when signing up for an account. Live link: https://getformflow.io/sign-up
Design the blog card graphics image as requested by Von
Design the blog card graphics image as requested by Von is planned for Formflow. We will share more details as implementation progresses.
New funnel in Mixpanel
Home page of website > Sign up page > Onboarding > Dashboard Goal: seeing the conversion and drop-offs https://mixpanel.com/s/2SLdzW
Update Formflow homepage website
Waiting for the new Canvas & Style Editor improve the performance. my wife commented saying our new V2 should have like 20 different forms with different designs to showcase potential:
Membership metrics and limitations
Free plan: - 14 day Free Trial - No Credit Card required Starter ($49/month): - 3 Flows - 10.000 Visitors/Month - Canvas (Logic builder): Full advanced drag & drop logic - Style editor: no code required, fully customizable - Results page: Basic dashboard (view & export responses) - Analytics: Basic metrics - Email Validation (pay-per-click): Included - Integrations and sharing: Direct link/embeded, basic webhooks - Support: Standard email support, docs & tutorials Pro($79/month) Everything on starter, plus: - 10 flows - 25.000 visitors/month - Results Page advanced: Filter responses, rate applicants, create custom views (e.g 5-start filter) - Integrations: Advanced (Slack) - Later coming in with marketing automation tools and CRMs - Support: Priority email support, quick-start guides Scale ($99/month) Everything in Pro, plus: Unlimited Flows - 50,000 Visitors/Month - A/B Testing (FlowSplit) - White-Label Branding - Support: White-glove onboarding, dedicated success manager, priority support Questions/notes: Free plan: Within these 14 days free trial the customer will be on the package they chose, so they can be on either starte, pro or scale? Do we want to offer White-labeling only for Scale? This looks to me more like a feature for any paid plan From a copy perspective, I know this is not final, but I would put the Email validation (pay per check, not click) under a section like on-demand. Because now it says included, it takes you to thinking its included. Or maybe we want to include 100 checks/month or something What we need to do for the above: Invest some time in Results page to show/hide features based on plan Fix Basic Analytics (dashboard) Implement the impressions tracking engine Implement the limitations per account Build logic for what happens after 14 days free tier, what notifications we send, what we limit, etc Modules to be build to achieve the full packages vision: - In-Flow Analytics - New integrations with marketing automation tools and CRMs - Sub-accounts
Adding Tidio chat to our application
https://www.tidio.com/panel/login Copy and paste this code snippet just before the </body> tag <script src="//code.tidio.co/keixuty4jtrfrupm0sxicanxj8hpnkwj.js" async></script>
Onboarding & Upgrade to paid experience, new pricing packages
Proposed packages: Pro Pro + Scale Each package will have a monthly and an annual price. Annual one will come with a discount. For a later version we will introduce something called "Pay as you grow" that will eventually replace our free package. Some examples of UI to use as a reference
Actions should not allow anything other than Add Tag
Actions should not allow anything other than Add Tag is planned for Formflow. We will share more details as implementation progresses.
Multiple choice - Additional of inputs (Text/Radio/Image)
Canvas Adding Multiple Choice Single Choice (Radio Icon) Multiple Choice (Square Icon) Style Editor In the style editor (properties right sidebar), we now have a new section called "Item Style" (with 3 types of variants) for users to choose from. Type: Image Users can upload images for each option in the right sidebar. An option will appear to customize the image style globally (including image size, radius). Users can customize each image property (in the right sidebar) by selecting the image value (e.g., cropping the image, changing the focus point, and ratio). Type: Icon Type: Icon There are 2 icons as defaults (radio and square) depending on the multiple choice type on the Canvas. Users can’t change this icon but can customize the icon style (color, size). ➝ Please check the Figma design below for more details. Cavas Page: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7178-38302&t=1EQaGCZVOQCQkIGq-4 Example Design: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7151-143479&t=1EQaGCZVOQCQkIGq-4 Style Editor design: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7178-35110&t=1EQaGCZVOQCQkIGq-4 Result Page: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=7213-51859&t=OR6c90IRvbIg1Mmt-4
State management upgrade
Attached is the markdown of the problem. The summary is that the canvas, style editor and all other internal customer tools are affected by the way the state management is used. The whole form payload is passed everytime. The goal is to have a short term version where we show a proof of concept and then to provide a plan on how to apply it in all other areas.
Adding new form example for the use case section
Adding new form example for the use case section is planned for Formflow. We will share more details as implementation progresses.
Fix some bugs and improve the detailed design of the website
Fix some bugs and improve the detailed design of the website is planned for Formflow. We will share more details as implementation progresses.
Design Feature Page (CRM)
Design Feature Page (CRM) is planned for Formflow. We will share more details as implementation progresses.
Setting Page design
Setting page design v2 is ready:
Dashboard V2
Implement Dashboard V2 from Figma + showing the right analytics data from the new Tinybird implementation Evaluate the choice for charts between: Shadcn: https://ui.shadcn.com/charts Tinybird: https://www.tinybird.co/docs/publish/charts Tinybird has the advantage of creating your charts and pulling logic in their platform, them embedding the form. But, it gives us less flexibility for charts.
Onboarding error - navigation does not move
https://jam.dev/c/aba4fc0b-4057-415d-b219-a341b4209c8f
Fix try page
app.getformflow.io/try doesn't work anymore
Add a spam protection field on each form rendering
We have an issue with spam, bots are generating a lo of entries in forms. We need to add a quick solution (called honeypot): When we render the first page of the form, besides the normal fields that are getting rendered, we render an extra simple input one with a generic name that looks legit to bots, like "alternative-email-one" We position this with CSS in a way that's not visible anyhow (with a right position of 1000px or something like that) When next is clicked, if this field has any data, it means a bot completed it, we just disable the next action
Issue on form not appearing in sidebar if you don't hit publish
The sidebar needs to refetch data when you get back on the page. https://jam.dev/c/bd29e163-4625-4c9f-a584-f119bf9843ed
Inflow analytics - add calendar filtering
Bug reporting steps: We get a report or a problem through slack or any other channel channel The engineer will index the task in click-up, along with a description of the problem and any additional information that were provided (screenshots, urls, user story) Add an estimation of time A branch is created based on the github integration The problem is fixed, it's moved into PR/MR. This allows any shareholder that checks the task on the board to understand what is it about New Feature reporting: Feature description (detailed explanation) Include design (Figma link) Split the feature into sub-tasks for granular explanation Priority (if you know this) Estimation of time (if you know this)
Fix Validation Logic for “Text” Elements
Description: Modify the validation logic so that “Text” elements are excluded from validation checks, resolving the issue where forms with “Text” elements are considered invalid.
Form validation issue in the scenario of last question being a next button
The very first question is "Name" and it's required, if i select an option it skips right past the name to unique targetId unbelievable. https://formflow-jficj995p-formflow-io.vercel.app/p/e2-agency/untitled-form18 and selecting an option on single choice skips me.. https://www.loom.com/share/04598243d75041748014ea3c4bd2fa31?sid=38bc2331-f483-4714-88bd-9514c080bad7
Add Bulk Delete Option
We need to add checkbox and multi-select checkbox in front of all the rows. User can select a single row or multiple rows or all the rows within that page using the checkbox in header row. If atleast one row is selected, we need to show a Actions dropdown which will have only DELETE option for now. Clicking on it, should open a confirmation box, Upon confirming, the responses will be deleted. This will require API to be created as well.
Add new column in Results page
We need to add a new column on Results page - Received At. User can sort and filter on basis of the Received At value.
Webhook - allow file url
Webhook - allow file url is planned for Formflow. We will share more details as implementation progresses.
Upgrade Plans logic
Reduce onboarding to only key questions (faster start) Remove payment page Allow user full access Force plan on publish Block publish if form has features not available on current plan, offer to upgrade to publish Be compliant for "click-to-cancel" FTC Goal: It’s not a free account, but it’s getting started faster and you cannot publish without a plan,
Change Database from Mongo to Postgres
Replace DB with Postgres, keep interactions through Prisma
Form render - invalidate cache after style editor changes
Steps: Have a standard form, go to share page, open the form rendering url too. You go and do some changes in style editor, you click Update. It updates When you go to share page, the styling is not applied, the assumption is that it takes the page from cache.
App - island navigation issue
Once you navigate to results page, then the navigation is one step behind. Meaning. you go Share → results Page then click on canvas, it takes you on the share page. This looks like having something to do with Results page, because if you go Canvas -> Style editor -> Share -> Canvas or anything else (not doing results page), the navigation is not behind
From rendering fixes
On this form, we get an error when reading the form config: Cannot read properties of undefined (reading 'some')
Add Royalty plan that bypasses all payments
We need a package that we offer to clients as all things free forever (or at least until we keep it in DB). For this to happen, we need to apply some business logic in the platform to bypass stripe for these customers
Move form rendering to its own instance
The goal of the task is to create a separate instance for serving the form for the customers. What we want to achieve with this: Remove unnecessary modules: right now it loads the whole app to be able to render the form load the form in under 1s We need to consider caching for achieve a very fast loading We need to consider preloading next step(s) asynchronously and keeping previous step loaded for fast navigation between pages Some enhancements to be taken into account when working on this task: Automatically set the cursor for the first field on the next page Some explanations here: https://jam.dev/c/1a5b58cd-3130-4d8b-849d-f2fdf6448de4
Form render - Embedding script
Mirror typeform embed
Apply default form styling on new forms
https://app.getformflow.io/ui/forms/2cb44787-92a4-447d-af15-b6c833401ec1. We need to take the default styling of this form and apply it to new forms
Payment packages and customer journey updates
the changes would be: Onboarding stays the same, I assume only the last page, which is the onboarding success, will require some copy changes Then we open up the publish button for 14 days We also open up all canvas features that required pro What UI do we want to show during these 14 days and what will happen once the 14 days pass? So 14 day progress bar bottom left corner with “14 days left” All features 100% Embed, live hosted page, all features on canvas. The goal here is to help them get results as fast as humanly possible. 9:55 Jason K Williamson - Founder Once 14 days passed, I think we let them explore the entire software they just can’t publish. I’d say like “Free trial over, get an active plan” We’d remove trials on plans and just full send letting them grab and pay on the spot 9:55 Jason K Williamson - Founder We could even tooltip or something 9:55 Jason K Williamson - Founder You still have full access to the software, but all of your active forms will be offline until you have an active plan 9:55 Jason K Williamson - Founder So the goal is. 1-14 days is a sprint for us 9:55 Jason K Williamson - Founder We want them getting gigantic ridiculous results 9:57 Jason K Williamson - Founder This is my thought process. Minimal friction > rapid results > provide insane amounts of value before we ask for money
Form rendering Powered By issue
Fix issue with 'powered by' toggle not persisting (this could be more related to canvas) Current rule: {(!isProUser || isShowPoweredBy) && <PoweredBy fullScreen={true} />}
Bug - Form disappearing if you try to update it from share page
When you are on share page and have some updates to push on the form, click Update. An error saying there can only be one starting node appears, although the form is valid Most likely, when being on the share page, there is a problem between RxJS and redux When you come back to canvas, you get an empty canvas, although the form exists This is an example
Results page feedback
Bugs: For new responses, the options don't get mapped in the table as choices (squares) Option mention not mapping, using @ - this may be a canvas issue Filters issues: https://jam.dev/c/8be84ecd-f87d-4d81-ab67-6034c44aa3be Old form data migration issue (duplicate values in field) edge case, filters persist from main view when creating new view with + button tags button opens details pane does not open tag menu Previous list:Y 0. Add Complete filter / column Y 5. Bug: Filtering - If you have multiple filters and you delete the first one, the filtering will fail Y - Add saving of complete true/false on new responses too Y - remove tag from response Y - Nested filter default to OR Y - LOW - remove/rename view Y - Bug - Column state (show/hide) is not saved Y 0. Improve the detail view design
Default Form Style Bugs
In this new default form version: Form background color has been removed (which means it defaults to 100% white). Label margin was changed from 4 to 0. All elements containers now have a gap updated from 0 to 10. Background and border colors have been updated from solid to 10% transparent black. Things are not working: The border width of Input field is not work on live. Also, the border radius on hover or active is not being applied either. Hover/Active border color is not working on live. 2. File Upload Container gap doesn't work 3. Margin in Label keep reset to 4 4. Multiple Choice will be revert to default when refresh the page (see image below) Values has been reset are almost everything: padding, gap, color, border,... 5. The asterisk in the label → There is no option to change this gap; it should be set in the backend. 6. Page background: The background isn't showing on preview or render End of page
Meta integration
Meta Integration Task Specification Figma: Overview We need to implement a Meta (Facebook) integration for our form builder platform. This will allow customers to trigger Meta Pixel events when users navigate between form pages or complete specific actions. Requirements Integration Configuration Create a new "Meta" entry in our Integrations section Allow multiple Meta configurations per account Each configuration should include: Meta Pixel ID (required) Access Token (for server-side API calls) Configuration name (for identification) Event Triggering Support both client-side and server-side event tracking Allow users to select a Meta configuration when setting up an event Provide a dropdown of standard Meta events and a "Custom" option For custom events, allow users to input their own event name and parameters Meta Standard Events Meta Pixel supports the following standard events: PageView ViewContent AddToCart AddToWishlist InitiateCheckout AddPaymentInfo Purchase Lead CompleteRegistration Contact CustomizeProduct Donate FindLocation Schedule StartTrial SubmitApplication Subscribe Technical Implementation Client-Side Implementation For client-side tracking, we'll need to: Initialize the Meta Pixel with the configured Pixel ID Create a utility function to trigger events import { useEffect } from 'react'; declare global { interface Window { fbq: any; } } // Initialize Meta Pixel export const initializeMetaPixel = (pixelId: string): void => { if (typeof window !== 'undefined') { // Add Facebook Pixel code !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); window.fbq('init', pixelId); } }; // Track client-side event export const trackMetaEvent = ( eventName: string, params?: Record<string, any> ): void => { if (typeof window !== 'undefined' && window.fbq) { window.fbq('track', eventName, params); } }; // React hook to initialize Meta Pixel export const useMetaPixel = (pixelId: string): void => { useEffect(() => { if (pixelId) { initializeMetaPixel(pixelId); } }, [pixelId]); }; Server-Side Implementation For server-side tracking, we'll create a tRPC procedure: import { z } from 'zod'; import axios from 'axios'; import { createTRPCRouter, protectedProcedure } from '../trpc'; export const metaEventsRouter = createTRPCRouter({ trackServerEvent: protectedProcedure .input( z.object({ pixelId: z.string(), accessToken: z.string(), eventName: z.string(), eventId: z.string().optional(), userData: z.object({ externalId: z.string().optional(), email: z.string().optional(), phone: z.string().optional(), // Add other user data fields as needed }).optional(), customData: z.record(z.any()).optional(), }) ) .mutation(async ({ input }) => { const { pixelId, accessToken, eventName, eventId, userData, customData } = input; const eventData = { data: [ { event_name: eventName, event_time: Math.floor(Date.now() / 1000), event_id: eventId, user_data: userData, custom_data: customData, action_source: 'website', }, ], }; try { const response = await axios.post( `https://graph.facebook.com/v17.0/${pixelId}/events`, eventData, { params: { access_token: accessToken, }, } ); return { success: true, data: response.data, }; } catch (error) { console.error('Error tracking Meta event:', error); return { success: false, error: error instanceof Error ? error.message : 'Unknown error', }; } }), }); Integration in Form Builder Example of how to use the Meta integration in the form builder: import { useState } from 'react'; import { useMetaPixel, trackMetaEvent } from '@/utils/metaPixel'; import { api } from '@/utils/api'; // Standard Meta events const META_STANDARD_EVENTS = [ 'PageView', 'ViewContent', 'AddToCart', 'Lead', 'CompleteRegistration', // ... other events 'Custom', ]; const IntegrationSelector = ({ formId, pageId, metaConfigurations }) => { const [selectedConfig, setSelectedConfig] = useState(null); const [selectedEvent, setSelectedEvent] = useState('PageView'); const [customEventName, setCustomEventName] = useState(''); // Initialize Meta Pixel if a configuration is selected useMetaPixel(selectedConfig?.pixelId); // tRPC mutation for server-side tracking const trackServerEvent = api.metaEvents.trackServerEvent.useMutation(); const handleTriggerEvent = async (formData) => { if (!selectedConfig) return; const eventName = selectedEvent === 'Custom' ? customEventName : selectedEvent; const eventData = { form_id: formId, page_id: pageId, // Add relevant form data ...formData, }; // Client-side tracking trackMetaEvent(eventName, eventData); // Server-side tracking (if access token is available) if (selectedConfig.accessToken) { await trackServerEvent.mutateAsync({ pixelId: selectedConfig.pixelId, accessToken: selectedConfig.accessToken, eventName, userData: { // Add user data if available externalId: formData.userId, email: formData.email, }, customData: eventData, }); } }; return ( <div> <h3>Meta Integration</h3> <div> <label>Select Configuration:</label> <select value={selectedConfig?.id || ''} onChange={(e) => { const config = metaConfigurations.find(c => c.id === e.target.value); setSelectedConfig(config); }} > <option value="">Select a configuration</option> {metaConfigurations.map(config => ( <option key={config.id} value={config.id}> {config.name} </option> ))} </select> <button>Create New Configuration</button> </div> <div> <label>Select Event:</label> <select value={selectedEvent} onChange={(e) => setSelectedEvent(e.target.value)} > {META_STANDARD_EVENTS.map(event => ( <option key={event} value={event}>{event}</option> ))} </select> {selectedEvent === 'Custom' && ( <input type="text" value={customEventName} onChange={(e) => setCustomEventName(e.target.value)} placeholder="Enter custom event name" /> )} </div> <button onClick={() => handleTriggerEvent({})}> Test Event </button> </div> ); }; export default IntegrationSelector; Database Schema Updates We'll need to add a new table/collection for Meta configurations: // ... existing code ... export const metaConfigurationsTable = pgTable('meta_configurations', { id: serial('id').primaryKey(), accountId: integer('account_id') .notNull() .references(() => accountsTable.id, { onDelete: 'cascade' }), name: varchar('name', { length: 255 }).notNull(), pixelId: varchar('pixel_id', { length: 255 }).notNull(), accessToken: varchar('access_token', { length: 255 }), createdAt: timestamp('created_at').defaultNow().notNull(), updatedAt: timestamp('updated_at').defaultNow().notNull(), }); // ... existing code ... Next Steps Create the Meta configuration management UI Implement the Meta Pixel initialization logic Add Meta event selection to the form builder Implement client-side and server-side event tracking Add validation and error handling Write tests for the new functionality Technical Considerations Meta Pixel ID is required for both client and server-side tracking Access Token is only required for server-side API calls We should implement proper error handling for API failures Consider rate limiting for Meta API calls UI examples: Figma Design:
Add navigation with images on left, right click
Add navigation with images on left, right click is planned for Formflow. We will share more details as implementation progresses.
New Results Page Design Update
Please check out the subtasks for more details...
Error - you can save the menu as terminal node
Error - you can save the menu as terminal node is planned for Formflow. We will share more details as implementation progresses.
Order of left side bar forms is still odd
I created a new form: UntitledForm13 → but it shows randomly on the sidebar somewhere in the middle. Account: radu.g@getformflow.io
Mobile styling issues
https://myformflow.io/jaymakoni-com/saas-onboarding Logo doesn't fit the view correctly Some odd spacing on the mobile Interactive form at the bottom needs top and bottom padding More issues on the video attached https://t9016494931.p.clickup-attachments.com/t9016494931/98071c61-4e14-491d-9185-39061971c21f/ScreenRecording_04-27-2025%2010-08-45_1.MP4?view=open
Results page filter label change
Change "Complete" to "status" when Gab's back It should be Status = Complete/Partial
Add default tracking scripts to form
The initial task will be related to Meta. Flow: in the canvas header, there will be an events icon, we need to display a configuration pop-up where we allow customer to select which Meta account to use for pixel configuration Later: Allow the same for google ads Allow adding header/footer custom scripts And like Marius built. IF no account exists, no dropdown it should say "connect meta"
Clerk - change message on the pop-up
This relates to both framer website and ours: on the localization of Clerk. For the sign up form, can we use: Start Free Trial — No Card Needed Replace "Create your account - to contiue to formflow" With "Create your account Free Trial - No Card Needed" Clerk told me this can be changed in localization
Preview form
The idea of the preview feature is to allow the customer to see the form before being published
Form render mentions issue
I have the following scenario. I use a mention of a previous question into the title of an input from the next page. On the form rendering, it doesn't substitute with the value, but rather with an id type of string: Check page 2. Here is the setup:
Payment/upgrade functionality - move to its own page vs current pop-up experience
When we opened up the platform completely for 14 days trial we ended up having 2 experiences: Either the same pop-up when you click publish, if you're after your 14 days trial (this contains all of the conversions elements we had) Or, when clicking Upgrade from the dashboard, it takes you to settings where you can upgrade. But this is not ideal, because it doesn't contain all the conversion elements. We already discussed this with Gab in his last meeting and I indexed this point already But, your point is right, tracking wise it's a lot harder to track pop-ups, so I'm all good with moving both experiences into a single upgrade page that will be its own page. It will contain all of the conversion elements we had and we can also track it
Test embed script in CMSs, based on priority
Shopify Wordpress Wix Squarespace Webflow Framer Let's note on each one of them the status and solution. Either it works out of the box or we need a plugin or whatever the platform requires
Worker issue - Indexing in Mellisearch
We had a problem where a few responses were not indexed in mellisearch, this caused the server to become busy and it created a loop of messages that inflated the number of responses. We need to: Create a script that goes over non indexed responses from DB and fix them Find a long term solution to have a stable and failsafe solution for the indexing worker
Twilio node type
Twilio node type is planned for Formflow. We will share more details as implementation progresses.
Email and phone to have autosuggest
Email and phone fields need to have autosuggest on with type email or tel, based on the input type.
Intercom integration with app
We need intercom chats to contain user data. In the integration with app., we already have the user logged in, so we need to move the intercom integration into app, rather than through GTM, so we can pass user data upon initialization:
Subscriptions turning inactive based on stripe hook/upgrade function
We have an issue where all subscriptions became inactive. The only place where inactive status is used, is the listener of the stripe webhook. It's likely there is an update function that, without one of the params, does a generic table update that we need to fix
Redirects issue - force add https://
Right now, if you don't have https:// in your redirect url field, it does an internal redirect. It should always do an external one, so we need to force add https:// if not existing
Change phone number component into a prefix + phone one
Right now, the phone number is actually an input, so you can't control the prefix based on the country selector. We need to have a component that separates prefix and phone number, similarly on how we do it on twilio node. But we need it integrated into form rendering and also style editor Maybe shadcn could be an idea, but at least the country picker dropdown should exist
Framer plugin feedback
Task 1: when embedding via framer plugin, take only the form, not the whole page (logo & background) Task 2: solve the cache. The logic needs to be when in editor, no cache. When on the page, but logged into framer as admin, no cache. The problem here is that it doesn't look like we're having a flag that tells us these modes, at least from a quick look at the documentation. Gab will email framer to let us know what data point we can use for this.
Sms node type feedback
Add new option should open the notifications sub-menu (let's see what option we find for this) Z-index of preview should be higher, there are some areas where it's below some other elements
Twilio SMS Consent strategy
In order to be compliant with SMS sending rules, we need to have a few extra measures: When you firstly add an SMS node, we need an area below the node elements that will contain a choice: "By using this node, you agree on sending SMS to the provided phone number" and an "Confirm" button. We need to save the datetime for each user. It will appear one time only. Once confirmed, it will never be shown, but stored in the database. If it's not confirmed, SMS will not be fired When updating/publishing the form, an SMS must be fired only once, to all phone numbers in the SMS nodes with a certain text: "You subscribed to form flow alerts. If this is not intended, reply with STOP" We need to send this only once per phone number used Update, if possible, send a vCard: a "welcome sms" to let them know they are signed up. I think we should also send a contact card and save us as Formflow An SMS contact card, sometimes called a vCard, is a digital "business card" sent via SMS that allows recipients to easily save your brand's contact information to their phone. It's a way to make your SMS messages more personalized and familiar, like those from friends and family.
Templates module - step 1: Build from template
Templates module - step 1: Build from template is planned for Formflow. We will share more details as implementation progresses.
Set up Retool for live DB
Bug reporting steps: We get a report or a problem through slack or any other channel channel The engineer will index the task in click-up, along with a description of the problem and any additional information that were provided (screenshots, urls, user story) Add an estimation of time A branch is created based on the github integration The problem is fixed, it's moved into PR/MR. This allows any shareholder that checks the task on the board to understand what is it about New Feature reporting: Feature description (detailed explanation) Include design (Figma link) Split the feature into sub-tasks for granular explanation Priority (if you know this) Estimation of time (if you know this)
Create a framer plugin for the form embed
Create a framer plugin for the form embed is planned for Formflow. We will share more details as implementation progresses.
Form Templates Design
Magic is waiting... so when press create a form a pop out should ask "start from scratch" "build from template" /*1:59 and then we have to have a screen to CHOOSE the template. I think we should have a search, go by "niche" or "use case" and then the form. @Lee Steffen study jotform and typeform how they do templates Easiest way to create a template is to create a form, we then get the JSON and add it as a static file (e.g. this is what I use for this example) One fast way templates can work is by going some magic with the Start Here Node (the big blue plus), and add there the option of Add new element or template. i think it's best that we give the option like start from scratch, or from template. when they press "create form" - thanks for this, so I can create some forms and you can turn them into templates easily through the from JSON i think 3 options 3:13 Jason K Williamson - Founder Choose a template Start from scratch Ai create the form obviously ai will be hidden until its ready 3:13 Jason K Williamson - Founder but we have to perfect the flow from selecting a template 3:15 Jason K Williamson - Founder so like Choose a template > category, like doctor, etc? > type like hiring > form 3:15 Jason K Williamson - Founder i think? Figma Design: I just want to share some more of my thoughts regarding the template system: I’m aiming to design the templates section to function more like a marketplace, so that in the future, when we move from a style editor to a fully-featured page builder, we’ll likely want to allow users to share and contribute their templates to the system. We could also introduce an affiliate mechanism to attract even more creators. Additionally, really important is that we can use this section to link and showcase the templates page directly on our website for marketing purposes—without requiring users to create an account to view the template library. This way, users can instantly browse a wide range of beautiful templates tailored to their needs and get a clear sense of the software’s capabilities, which can definitely help us attract more customers. Regarding the feature breakdown: I’ve separated “Template” and “Theme” into two distinct features. A Template includes everything—questions, elements, and styling. A "Theme", on the other hand, is a powerful feature that allows us to turn any form into a pre-designed style that can be applied across all elements with a single click. This saves a lot of time when building new forms, especially useful for people or companies that have a brand kit or just need consistency across multiple forms, or they can just browse and easily apply a theme they like to their form without spend too much time on designing. Lee Steffen User Flow 1. Creating a New Form User taps "Create New Form" Option A: Start from Scratch Option B: Use a Template Opens a minimal full-screen modal or side panel with template thumbnails Each template shows: name, brief tag (e.g., “Event RSVP”), and a preview Optional: category or search bar 2. Editing the Form Standard form builder screen (same as usual). If a template was used, show a non-obtrusive tag like: “Using Template: Event Signup” with an option to “Detach from template” or “Edit template settings”. 3. Saving a Form as a Template User clicks ... on the top-right of form editor or in form list Option: Save as Template Prompt: Name your template Optional: choose category/tags Checkbox: “Include only style/layout, not form fields” 4. Reusing or Sharing Templates In “Create New” screen or template manager: Option to “Use” / “Preview” / “Edit” / “Duplicate” / “Share” Sharing Options: For your own use: apply style/layout to another form With privaty/public: generate share link (permissions: view / use only) UI/UX Considerations Area Best Practice Minimalism Default to one-click paths: “Create” → “Choose” (scratch/template) → done. No unnecessary modals. Use overlays or side panels for speed. Consistency Reuse UI patterns from existing form creation—same buttons, spacing, flow. Clarity Clear labels: “Start from Scratch”, “Use a Template”, “Save as Template” — not clever, just obvious. Preview Show template previews visually. Use real form mock data. Avoid text-only lists. Speed Cache popular templates. Add "Recently Used" or "Favorites" section. Scalability Allow users to filter/search templates by type (survey, contact form, feedback, etc.). Template vs Style Let users choose to save a full form as a template (fields + layout), or just save the style/layout as a “Style Preset”. Think like Figma’s Component vs Style. 🔧 Feature List (Core + Pro Options) MVP Template gallery (thumbnails, search, category) "Create from template" or "Create from scratch" Save current form as a template Apply a template to a new form/current form Pro/Optional Features Version history of templates 🗂️ Niche vs. Use Case — What’s the Difference? Term Meaning Example Niche The audience, industry, or business category Education, E-commerce, Healthcare, Agencies Use Case The specific goal or task the form is designed for Contact, Feedback, Registration, Intake 🏷️ 📚 Niches (Industries/Audiences) Category Examples (Tag Ideas) Education School Registration, Course Feedback Healthcare Patient Intake, Consent Forms E-commerce Order Form, Product Feedback Marketing Lead Gen, Newsletter Signup Events RSVP, Event Registration, Check-in HR & Recruitment Job Application, Candidate Screening SaaS & Tech Bug Report, Feature Request, Demo Request Agencies Client Onboarding, Briefing Forms Nonprofits Donation, Volunteer Signup Legal Contract Request, NDA Intake Fitness/Wellness Booking Session, Progress Tracker Finance Quote Request, Loan Application Real Estate Property Inquiry, Appointment Booking Coaching/Consulting Intake, Feedback, Goal Tracker 🧾 ✨ Use Cases (Form Purposes) Category Common Templates Contact Forms Simple Contact, Advanced Contact with Logic Surveys & Feedback Customer Feedback, NPS, Product Survey Lead Generation Ebook Download, Newsletter Opt-In Event Forms RSVP, Ticket Registration, Speaker Signup Bookings & Scheduling Appointment Request, Session Booking Client Onboarding New Client Intake, Discovery Questionnaire Job Applications Basic Application, Role-Specific Screening Quote Requests Service Quote, Pricing Request Order Forms Product Checkout, Multi-Item Order Bug Reporting Software Bug Report, Technical Issue Log Consent & Legal Consent Agreement, Digital Signature Donation Forms Quick Donate, Recurring Donation
Embed needs to always only render the form, as on framer
We need to do that same fix you did for Framer for all embeds. We got a complaint earlier that our embed wasn't working. The user expects only the form to embed not the entire web page. This makes sense to me as well. Please can you add that to your list for ALL embeds the way we do Framer, form only.
Lifetime package - automatic user creation and email send
We're going to go with the solution for listening to stripe webhook for lifetime product and create the user automatically. Email wise, we can fire a PostHog event and you can trigger an email for this usecase. They won't need any magic links, because the user will also get created in clerk, so they will just need to go to app.getformflow.io and login, either with google directly or via email and they receive the login code.
Photo upload not working
Testing form and tried uploading photos. It opened folder but when I click on an image it wouldn't upload it. Nothing major as I am just testing the form. am si eu un scenariu de la un client, care pare ca se replica. Daca ai 2 uploadere pe o singura pagina de form, al doilea nu merge:
Automate flowsplit + 5000 submissions
We need to run this for existing customers too
Rules for reset cache on forms
Reset after form complete Keep cache if saveForm executed at least once Function for clear cache
Multi-select to be default single
Right now, the multi-select is a multiple by default, we should make it single by default, so the user can understand the idea of pathways.
Feature flagging system & appliance to lifetime package
We need to create a feature flagging system that allows setting a feature list per package and also allow individual allocation of feature per user. Right now, we need to apply this to lifetime package. Here is the summary for features limitations on lifetime: - 1000 answers (completed answers) - No flow split (unless upgraded) - No Notification (sms) - Visual analytics (no) - Meta (no) and all integrations - All events (no) - Maybe limit uploads limit Lifetime package will include email notifications. Feature flagging should take into account an UI that allows for path to upgrade: this means the feature CTA should exist in the canvas, but with a symbol of requiring an upgrade. Then clicking it taking the user to the upgrade path
Email (resend) element type
Based on the figma provided by Lee, we need to create a new element type for email. It's going to behave similarly to Twilio. What we need to consider additionally to what's there in the design: We need to research for a good open source editor that will allow us to create the content of the email. (Idea: ) The creation of the email content/editing email content will likely need to happen on a different page, so we don't overload the canvas with side functionality So, in the email node, we will select the message content or add a new one, this will take the user to a page where this new editor will exist. Once finished, it will take the user back to canvas with the email node highlighted and the message content already selected
Webhooks/actions need to wait for last element to be saved before firing
Webhooks/actions need to wait for last element to be saved before firing is planned for Formflow. We will share more details as implementation progresses.
Node title messes up the styling if it's too long
Description: If the title of a node is too long, it will mess up the styling of the node in canvas. Expected Behavior: The node to maintain the styling and the text to behave more like the question name/description, where they move to a new line, instead of remaining on a single line. Optionals:
Quick fix on cursor icon for focusing fields
Quick fix on cursor icon for focusing fields is planned for Formflow. We will share more details as implementation progresses.
Email bounces rules
can we please set a rule if a user HARD bounces, we stop sending emails to that domain and notify the account like a warning : we couldn't deliver your email to x please fix your account De verificat daca Resend face asta automat
Email template to customer - move logo
in the email template we send out, can we please try put the logo in the bottom, smaller above the text? so like a small logo in the footer. the top middle logo is aggressive
Hover over menu in canvas should be click cursor, not hand. Same for email fields
Hover over menu in canvas should be click cursor, not hand. Same for email fields is planned for Formflow. We will share more details as implementation progresses.
Meta integration test
In our meta we have the following setup: we have the pageview by default on all pages. Here, if the form comes with a fbc it should automatically track Then we allow the users to add a custom event that fires sever side We need to test a journey if the event matches the fbc. We need an environment where you access the form via fbc and see how the events look like: I want to see what data layers we're tracking: IP, sha257, fbp, fbc etc
Background issue on canvas with a large form
Screenshot attached
Cloudflare analysis
We already use Cloudflare, but mostly in a default setup. We should analize if Cloudflare can bring us more value in terms of speed optimization for the 3 main modules of the app: Website at: getformflow.io: this runs through Framer, so most likely they already use caching, compression and all these things, so likely that we can't get much here Our app at app.getformflow.io: this is our custom app that contains all the logic. Likely to be able to achieve some optimization with Cloudflare The form rendered to the customer, still part of our app, but I see a higher opportunity for better caching specifically for these pages. Example: https://app.getformflow.io/p/radu-test2/try-formflow
Loading time of form investigation
We need to investigate the loading time of the form from a customer perspective. Testing URL: https://app.getformflow.io/p/radu-test2/try-formflow Gabriel's findings so far: https://docs.google.com/document/d/14een9ULCCdZf4NkcrWH7qw5IzrYc0RqnzeeCo4FGr4g/edit?tab=t.0
Slack integration for customers
Objective: Add Slack to our app where customers can connect their slack for notifications Proposed Solution Overview 1. Slack OAuth Integration: • Use Slack’s OAuth 2.0 flow to allow users to connect their Slack workspace to your application. This will enable you to send messages to their Slack channels. 2. Slack API for Message Posting: • Utilize Slack’s Web API, specifically the chat.postMessage endpoint, to send messages to the user-selected channels whenever the specified events (e.g., form completion) occur. 3. Backend Integration: • Create API routes in your Next.js application to handle the OAuth process, store user access tokens securely, and send requests to Slack’s API. Steps to Implement the Integration 1. Slack App Creation • Go to the Slack API website: . • Click “Create an App” and choose “From scratch.” • Provide your app with a name and select the workspace you want to install it in. • In the OAuth & Permissions section, add the following scopes: • chat:write: To send messages to channels. • channels:read: To list the available channels for the user. • Set up Redirect URLs for your application (e.g., https://your-app.com/api/slack/callback ). Documentation: Slack OAuth & Permissions 2. Slack OAuth Flow • Create a new page in your Next.js app (e.g., /integrations/slack) where users can start the Slack connection process. • On this page, provide a “Connect to Slack” button. When clicked, redirect the user to Slack’s OAuth URL: const slackAuthUrl = `https://slack.com/oauth/v2/authorize?client_id=YOUR_CLIENT_ID&scope=chat:write,channels:read&redirect_uri=${YOUR_REDIRECT_URI}`; window.location.href = slackAuthUrl; • Replace YOUR_CLIENT_ID and YOUR_REDIRECT_URI with the actual client ID from your Slack app and the callback URL of your Next.js app. 3. Handling OAuth Callback • Create an API route in Next.js (e.g., /api/slack/callback) to handle the OAuth redirect. • In this route, capture the code parameter from Slack’s response and exchange it for an access token using Slack’s API: async function getAccessToken(code) { const response = await fetch('https://slack.com/api/oauth.v2.access', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: new URLSearchParams({ client_id: 'YOUR_CLIENT_ID', client_secret: 'YOUR_CLIENT_SECRET', code, redirect_uri: 'YOUR_REDIRECT_URI', }), }); const data = await response.json(); return data.access_token; } • Store the access_token securely in your database, linked to the authenticated user. Documentation: Slack OAuth V2 Access 4. Integrate with Slack Channels • Once the user has connected their Slack workspace, you can fetch the available channels using the stored access token: async function listChannels(token) { const response = await fetch('https://slack.com/api/conversations.list', { method: 'GET', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json', }, }); const data = await response.json(); return data.channels; } • Allow users to select a channel in their dashboard where they want to receive notifications. Documentation: Slack Conversations API 5. Posting Messages to Slack • When an event occurs in your application (e.g., form submission), trigger an API call to send a message to the selected Slack channel: async function postMessageToSlack(token, channel, message) { const response = await fetch('https://slack.com/api/chat.postMessage', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ channel: channel, text: message, }), }); const data = await response.json(); return data; } Ensure this function is called whenever an event that requires a notification occurs in your application. Documentation: Slack chat.postMessage 6. Frontend Integration in Next.js The application needs to implement dynamic triggers that can be setup on the canvas (screenshot attached) The message of the event can be customized in the canvas 7. Security Considerations • Store Access Tokens Securely: Ensure that Slack access tokens are stored securely (e.g., in a database with encryption). • Environment Variables: Use environment variables for storing sensitive information like the Slack client ID, client secret, and redirect URIs. • Token Expiry: Handle token expiry and reauthorization by implementing checks when sending messages to Slack. Task Checklist • Create a Slack app and set up OAuth scopes. - 4 • Implement Slack OAuth flow in Next.js. - 4 • Handle the OAuth callback and securely store the access token. - 8 • List Slack channels and allow users to select where notifications should be sent. - 8 • Implement event triggers (e.g., form submission) to send messages to Slack channels using the stored token. - 6 • Add the integrations management UI in the user’s dashboard. - 6 • Handle token security and reauthorization logic. - 8
New onboarding experience based on Ani's feedback
New onboarding experince: Explanation of changes: Problem to solve: customers were hitting this issues during onboarding, based on screen sessions analysed
Framer plugin enhancements
Check URL that points to the old form render !? Warning for SEO with undefined message i think as well, for a minor fix later can we hide scrollbars? i can see it when my viewport enters and it loads i can see the right side slider were having that issue with the focus/selector cutting off too, so gab can add that like 2px padding maybe, and i know this is an issue with style editor but the text is black on a black bg, i did set to white
[BUG] dashboard metrics (complete rate, drop off rate, average session over 100%)
[BUG] dashboard metrics (complete rate, drop off rate, average session over 100%) is planned for Formflow. We will share more details as implementation progresses.
Canvas validation enhancements
Right now, we have a lot of users hitting 3 main errors in creating a form: Each branch should end in a terminal node - this error is too generic and doesn't point them out which node is orfan. We need to highlight in red the node(s) with errors Ending node can wrongly be set as email/meta/sms. We need to only allow the ending node to be text and/or redirect. For this validation, we need a UI that shows up with a visual showing that email/meta/sms should be place in between the last node and thank you/redirect Maximum call stack error: if you create a circular reference in your form, it lets you save it (it shouldn't), but form rendering throws an error saying maximum call stack reached. We need verify this at publish, throw an error message and (if possible), highlight the node with circular reference.
Dev-ops infrastructure v2
Dev-ops infrastructure v2 is planned for Formflow. We will share more details as implementation progresses.
Add splash screen for mobile
Add splash screen for mobile is planned for Formflow. We will share more details as implementation progresses.
Permanently delete all answers data (for compliance customers)
We'd have to create a button that permanently deletes all answers of a form from both db and caching systems. This is required by customers that store medical data.
Update Framer plugin - scroll and pass FB params
Update Framer plugin - scroll and pass FB params is planned for Formflow. We will share more details as implementation progresses.
Ability to move elements in a node
As a user, when I'm creating my form on the canvas, it's very likely that each of my node (page) will have more than 1 element in it. Right now we don't have the ability to move the order of an element. We need to add this ability with drag & drop feature within the node.
5000 submissions automatic upgrade not working
In the last week, most of the 5000 submission add-on had to be done manually. Not sure if it has to do with the %any% setup in retool, should be a quick fix.
Inspect clerk error for cookie size
When going into clerk, there's this alert message:
Two users using same slug scenario not handled
Description: If a user tries to update the slug, and the slug already exists for another user, it displays an error with "something went wrong". In the back end, a prisma error occurs. New! The other problem is: if you change the slug, or any change in general tab, it saves successfully, in db is correct, but from an UI perspective, if you immediately switch to any other tab (Subscription, Account) and then come back to General, the previous version (before saving) is showed (probably cached). For example: i had a slug set as ducutest. changed it to ducu-test, db was correct, moved to subscription, came back, then it was showing again ducutest. Upon refresh, it showed ducu-test (correct value) Expected Behavior: We should handle the scenario on the back end, so that the prisma error doesn't occur. Optional: Jam.Link 1: Jam.Link 2:
Trial plan is not assigned to new users
Description: When a new user completes the onboarding process, and goes to build the first form, he is prompted to upgrade.After a refresh, the trial plan is applied, and the user can publish the form. Expected Behavior: After completing the onboarding process, and selecting to build the first form, the user should already have the trial plan applied. Optionals:
Long question UI issue
Long question UI issue is planned for Formflow. We will share more details as implementation progresses.
Add a default text to email message content
We have a lot of people that add an email node, they setup the subject, to and everything, but not the message content, and then they say they got an empty email. Let's do a quick fix, if the message content is empty, to have something like:" You need to mention the fields you want to be sent by email"
Kiosk mode - auto refresh
Just enable Kiosk Mode and it would auto refresh form back to start after a few seconds of complete
Start over button in kiosk mode to exist in embed
La kiosk mode, avem butonul de Start over Dar daca ii faci embed, e aceeasi problema ca la back button, nu mai apare ca e in afara form-ului Back button-ul sa apara in form l-am facut eu Dar sa faci si pt start over sa existe in form daca e kiosk mode on in embed
Webhook payload updates
Right now, webhooks send a default payload as an array of items: [{item1 object},{item2 object},...] This is creating a problem with most popular automation tools, like n8n, make.com and zappier The customers have to create custom steps, like increasing the number of records for a webhook, checking logs, etc, so we need to make it easier for customers to use webhooks. First thing to do is to try a different payload, where all results are under a format like this: { 'results': [{item1 object},{item2 object},...]} This way, the automation tools won't see it as multiple records, but as one. Now, in order to not break the previous implementations of webhooks, we need an UI change. When you use a webhook node in canvas, it needs to have a dropwdown of payload. By default it will be 'Standard', but we should have other choices like: 'N8N', 'Make.com', 'Zappier', 'Other Automation tools' All, apart from standard, will send the new format of the payload. The idea to have all the choices is to, in the future, separate the payloads in case we have to go more custom. When we fire the webhook, we need to check the payload type.
We need to add the back button in the form body when embedded (eventually bottom-left)
When somebody embeds the form, the back button is not visible anymore because it is outside the form body. We need to add it, with the same functionality (meaning only appearing on intermediate pages, etc), but on the bottom-left. For non-embedded forms, it remains as is.
Add score mode to canvas
Score mode will allow customers to set up scores for dropdowns and multi-select, where, for each option, they can set a score (weight), which can be used in conditional split and show in results page. We are going to have a general setup mode, a toggle on top of the form that says "Score mode". When ticked to yes, it allows the user to set scores/weights for options. We need to be able to use this score in the conditional split: the score will be calculated until the point of conditional split node. If it's not at the end of the form and it's used somewhere in the middle, the score until that node will be used we need to add a score column, if score mode is activated, in results page too The column can be used in filters and sorting, so it needs to be integrated in mellisearch
Implement Pathways (similar to make.com routers)
https://www.loom.com/share/6153fe4cbbb54770a37f59d9127563d2?sid=75662744-c793-4708-bb35-831aad7a6efe Description: We are introducing a new feature named "Pathways" to enhance the customization and interactivity of FormFlow. This feature will allow users to create complex, multi-conditional routes within forms, enabling a highly personalized experience based on user responses. Objective: Develop the "Pathways" feature, which utilizes filters and settings to define multiple conditional pathways within a form. Each pathway will have the ability to handle complex logical rules (AND/OR conditions) to direct users to tailored destinations based on their choices. Key Features: Multiple Pathways: Users can create several paths within a single form, each with its own unique set of conditions. Conditional Filters: Each pathway can include filters with AND/OR logic to determine the flow based on user inputs. Dynamic Redirects: Based on the pathway conditions, users can be redirected to customized URLs or different parts of the form. Integration: Ensure seamless compatibility with external pages for redirects, possibly using platforms like framer.com for thank you pages. Technical Requirements: Update the backend to handle multiple conditional logic checks. Enhance the frontend to allow users to visually create and edit pathways. Ensure all pathways are stored and executed efficiently to maintain form performance. Provide a clear interface for setting up and managing conditions within the pathways. Use Case: Scenario: A Muay Thai brand is using FormFlow to distribute a nutritional guide with personalized advice. They set up a form with multiple choice questions like "What is your goal?" with options such as Lose weight, Gain weight, Maintain weight, followed by "Why?" with options like Increased Energy and More confidence. Pathway Configuration: Pathway 1: Filters set for "Lose weight" AND "More confidence". Users selecting both are redirected to a specific page that offers them a custom guide and a special offer related to their choices. Resulting Action: On the thank you page, users are greeted with a personalized message and a targeted offer that aligns with their goals of losing weight and gaining confidence, enhancing user engagement and satisfaction. By implementing the Pathways feature, we can significantly increase the personalization and effectiveness of the user journeys within FormFlow, driving higher engagement and more precise targeting in marketing efforts.
Phone number field bug
When trying to add a value to the phone input, it changes to [object object] and you can't edit the field as a customer https://app.getformflow.io/p/test77/try-formflow It replicates on dev too: https://dev.getformflow.io/p/testing-radu/untitled-form35
Move backend APIs into App's trpc
Move backend APIs into App's trpc is planned for Formflow. We will share more details as implementation progresses.
DB migration from Mongo to relational - proof of concept
The problem we're starting with is the choice of a non-relational database for the business model we have. It doesn't fit well, while the current DB design is also poor. This creates problems in response times from DB and large number of alerts from current MongoDB Instance. This task is about creating a proof of concept for a relational database and understand what would be the level of effort to migrate.
Results page - missing answers on required fields
Bug reporting steps: These were "required" fields, and it's not possible they didnt add the fields. Some of them are multiple choice. What could be the issue here? We see 5 different pieces of information missing here in the application What we need to do next: investigate how this scenario happens and what's the root cause It could either be results page data pull (that would be the easiest), or wrong validation or missing some data capture at the time of completing the form We need to make sure we're not losing any data
Results page (pre tags/ratings) fixes
List of issues: PDF and image file for Results page, change the view to 'page fit'. It starts at 410% Middle screen of results page is not scrollable Filter selection dropdown is not scrollable
Backend of formflow doens't have any auth check
As I'm going with Vlad over the app we've also seen some serious security issues with the backend. Maybe @Krishan Saini you can give us some insights here. We sort of have 2 backends. One is the api calls of the front-end to the same nextjs instance (what we have under /website). These calls look like this: https://app.getformflow.io/api/get-forms One is everything under formflow-backend, things like https://formflow-backend-production-e7dc8af51069.herokuapp.com/tenants First of all, the idea of 2 backends is wrong from an architecture perspective, but I assume this has been an old decision, we'll have to fix this at some point. The security issue is that any link from formflow-backend is not protected by any authentication. Have we ever had auth protection on routes? This is a problem, because if you know the urls, you can see private data of any user. Here is an example: https://formflow-backend-production-e7dc8af51069.herokuapp.com/tenants I can see all tenants without being logged into app.getformflow.io Or if I have the url of a form, I can see somebody else's form data completely: https://formflow-backend-clerk-preview-9c0ef86fb88c.herokuapp.com/forms/67124c91f6002e086aa82dd7/versions/67124c92f6002e086aa82dd8
Results page: Tags and Ratings feature
Lee created the full figma for this feature: https://www.figma.com/design/2maIBobhfPnn2zlEs6yzns/Formflow?node-id=1833-16881&node-type=canvas&t=1D9WnEGcA7qFi2kf-0 We have 2 main modules: Tagging system Rating system The next steps are to break this down into technical subtasks and add estimates to the module. As we add more items to the results page, an important consideration is the performance of the queries. Let's make sure we do a stress test with forms with high amount of answers (hundreds) and confirm the filtering is still quick.
Cancel/manage your billing link
On this page https://dev.getformflow.io/ui/dashboard/settings we need to add a link to Cancel/Manage your plan that would take them to Stripe. Only applies to paying customers. This should be a quick task to make us compliant, there is another larger re-vamp of Settings page to 2.0 that contains a lot of other features, but that's coming later.
Rating/tags filtering options for Results page
With the new feature of ratings and tags being ready, we need to integrate these into the existing filters too.
Ratings/tags sorting options for Results page
For this task, we're not going to have a design available, so we need to go with the styling of the current page and add the following: A new button called Sort in the top right, similar to Filter It will contain Ratings and Tags The dropdown list will separate build in (at top) vs created with a separation line The dropdown styling will be similar to the filter ones, but for sorting
Webhooks mention don't work for drop-down
Webhooks mention don't work for drop-down is planned for Formflow. We will share more details as implementation progresses.
Wrong tabindex
As a customer, when I complete a form and use Tab, the focus doesn't take you input to input, but rather goes label, box, description and then input. Let's see if that's a quick fix or not.
UI/UX - Email node
🧩 Component Name: Email Node A smart node block used in automated workflows to send styled email messages. Message: it's gonna be similar to SMS but needs way more styling/formatting with this one i imagine it's gonna have a button to enlarge / pop out for more detailed editing so it might be like core details From: Subject line: preview text: [edit email] > opens pop up/pop out with email editor (you press edit email, and the editor opens) Preview on right side and i think the header should be editable so we can say like "welcome email" 🔧 Structure & Fields Element Type Notes 🏷️ Header (Editable Title) Text Field Default: “Email” — can be renamed to “Welcome Email”, “Report Email”, etc. 📤 From Text Input Custom sender email or domain shown (e.g., noreply@formflow.com) 📥 To Auto-linked or placeholder Usually auto-filled from user data or prior steps ✉️ Subject Line Text Input Required 🔎 Preview Text Text Input Optional preview snippet (shown in inboxes) 📝 Edit Email Button Opens a modal/pop-out WYSIWYG email editor 👁 Live Preview Right Panel Shows real-time visual of the formatted email ✨ UI/UX Design Guidelines Layout & Structure: Two-Column Layout (Optional Responsive Toggle): Left Side: All inputs (From, To, Subject, Preview, [Edit Email]) Right Side: Live rendered preview (like the one in Resend editor or Mailchimp) Pop-Out Email Editor (Modal or Side Panel): Rich text editor: bold, italic, underline, links, image, buttons Drag/drop blocks or markdown mode (optional for dev power users) Compact mode by default, expandable with Edit Email to open full editor. Interactions: Hovering over “Edit Email” shows tooltip: “Open full email editor” Auto-save drafts while editing Preview updates in real time (on the right) or with a short delay after editing Fallback view if editor is empty: “Start designing your email” 💡 Use Cases Welcome Email: Automated first touchpoint after signup Monthly Report: Send a summary of form or app activity Abandoned Submission Reminder: Personalized nudge for users Team Notification: Internal alert on form submission or update Marketing Blast: Stylized message to a contact list 🧠 Smart Behavior Suggestions Detect if subject/preview is too long and warn Option to clone/copy existing email nodes AI suggestions: "Generate subject line", "Summarize content for preview" Figma Design (WIP)
Webhooks v2 - adding the full payload in case of conditional/pathways + integrate map values in payload
As discussed over chat.
Query params/attribution to be available for customers as data in canvas
The rest of the attribution query params are going to be added to the product in the following way: Query params will be available as mentions, so you can use them in the email trigger Send nodes, like webhook/redirect will include the captured query params We will allow hidden fields for any other third party purpose, including seeing the attribution in results tab We need to show, in the results page, the query params and hidden fields too
Style editor refactoring - State management migration to Redux
Style editor refactoring - State management migration to Redux is planned for Formflow. We will share more details as implementation progresses.
[Website] - Pricing Page Redesign
[Website] - Pricing Page Redesign is planned for Formflow. We will share more details as implementation progresses.
New element type: date
Figma: Custom logic required to be discussed
GDPR pages
For GDPR you need a data processing agreement and a few annexes that I already created here: Now, here is the flow and what we need to do. Let's treat GDPR pages with priority along with the terms and policies you're working now. Here is what I need: On Getformflow.io we need a page called Sub-processors register. Here we're going to have list and conditions for all of our subprocessors. You need to copy the content from Annex III in the doc and put it there. Put a link in the footer under Privacy Policies to this page On Privacy policies page, besides what other content you're going to add with Jason, have a section to include Annex II Technical and Organisational Measures (TOMs) Then I need another page, called Require Data Processing Agreement (DPA) that simply contains a form with email, company name, company address, notes. This form should send a copy to me and Jason and we're going to process the DPA offline
[Framer] Refactoring Formflow project
Target: Improve project loading and performance, making it easier to update and maintain in the future as we scale. To do: Reduce all pages from 4 breakpoints to 3 to minimize lag Remove all unnecessary components Completely remove all elements and items related to the Formflow Prototype Remove all unused/obsolete pages and components (including variants and drafts) Update CMS and third-party components, and apply new Framer feature updates Remove all unused code files and asset files (duplicate colors, fonts, links, etc.) A backup of the project has been created, so nothing will be lost and we can revert at any time.
Enhance scoring with custom categories
There's some likely questions on: Responses: do we show, per answer, only the dominant as a result: like High risk, or we show each category with %. Conditional split: In this case they could go equals 'high risk' and have a branch from it? The mention of the total score will just be the label of the dominant answer at the point it's used, right? I think we can create a dynamic results kinda element later - this can have the option, show 1, 2, 3, 4, 5 or all etc, and it would go High risk 88% Moderate 12% 3. correct, mention of score would be the custom value they created the system will basically tally in a % like high risk so lets say 10 questions, 10 times ive added high risk so potential 100% in conditional split i can just choose "Score Result" High Risk Low Risk No Risk And i can just multiple chocie select it and be like "if user gets high risk" go to > and being able to mention @score-{{custom}} eg: @score-heartrisk = High risk, or whatever the system says it is based on % Customer Consensus on Advanced Quiz Scoring Overall sentiment Very positive. Multiple people said this would be a game changer and exactly what they need. Strong agreement that this will make Formflow much better for lead gen and personality-style quizzes. Key points raised Dominant vs. full breakdown Most users are fine with showing the dominant value first in v1. However, several asked that a full breakdown by percentage or score for each category is available (either now or soon after). Some specifically want the ability to show the top two or even all results (not just one). Handling ties Customers flagged this as an important edge case. Suggestions: Default to the “middle” value (if Balanced and Strong tie → Balanced). Present both tied results (e.g. Defender/Dancer). Allow a deciding question or user choice if top two are tied. Multiple categories / assessments Very well received. People are excited about using this for multi-section assessments (e.g. Heart Risk + Lung Risk + Emotional Health). This unlocks use cases like health assessments, financial capability tests, leadership styles, etc. Advanced personality quiz needs Cathy Simmons described needing a quiz with 12 personality types and 120 questions, where the scores for all types must be displayed (not just one). Her key requirement: user sees full results, can identify top two, and resolve ties. This confirms that some users need a more “assessment report” style output, not just a single outcome. Conditional logic + personalization Multiple people mentioned how valuable it will be to redirect based on results or trigger specific outputs (emails, pages, recommendations). Siu Ling Hui specifically wants ranges mapped to automated emails. Recommendations for v1 scope Core: Custom categories + dominant value output (per category). Important to add soon: Option to show full breakdown of all categories with percentages or scores. Edge cases: Define a simple rule for ties in v1 (e.g., show both). Add more advanced tie-breaking later. Future roadmap: Support multi-top outputs (top 2, top 3), and range-based outputs for automated personalization. Bottom line: Customers are very excited. Dominant value is good for MVP, but full breakdown + top 2 results are critical follow-ups to meet advanced use cases.
New element type: Address
Figma: Custom logic required to be discussed
Form embed - pass google ads validation
Form embed - pass google ads validation is planned for Formflow. We will share more details as implementation progresses.
Better auth - password fallback
Better auth - password fallback is planned for Formflow. We will share more details as implementation progresses.
Debug: webhook does not send score/score cats
To be checked with Mihnea, but customers sent tickets that they don't get scoring/scoring cats via webhook
Mention enhancements
Allow the users to mention an entire page like @pagename or the whole form, like @all-answers. The format of the output should be: Page1 Question1: answer1 Question2: answer2
Filters don't work, they reset immediately after applying
This is a debugging process, because these used to work before. We firstly need to understand what causes the reset, most likely some concurrency on useeffects form the page.
New element type: Signature
Figma: Questions: I'm trying to map out what we want the MVP to do. So normal flow is: you add a new element type in canvas called Signature, you can mark it as required or not Then in the style editor you can probably style the label and description. For the signature block itself, do we want to introduce any properties in style editor? I see in the figma we have background, radius, border and shadows. I'm not sure if we want to let them change the background, because all signatures are usually black on white. In the form itself, you'll be able to draw a signature. Then in responses: we show Signature in the details view and also in export. I'm thinking to have a column in table Signature that has a checkmark for yes or empty, and then in details and export we show the png of the actual signtarue Now, I see some comments where it gets a bit unclear: You say in one comment that it should work for pencils on tablets, that's fine Then you say to have security for legal docs, what does that mean? The other point is the design with 2 signatures. I would recommend keeping this out of the MVP, because it can get tricky, or I don't understand the use-case exactly. Let's say we have a doc where we want 2 people to sign. How would the form work, because we don't have any journeys where you can share your form answers with somebody so somebody else would complete just the signature. Or the 2 signatures to be the use-case of owner signature + customer signature. In this case, the form owner can configure his in canvas somewhere or somewhere in user-settings and to have a toggle in canvas settings for double signature and in customer form to show the owner signature already? So the customer can see it's double signed? Jason's answers: Id leave the BG on this one FOR now, if we need more later we can add it. Users may have a black form and a white block on black woul;d be weird. but later problem re form journeys, i know we don't have this, good to index, being able to share the form journey has been requested a lot but it's not nearly as much as just regular e-sigs OR payments so it can be indexed into an idea, if we need to do later okay. i think we just leave the double sig - its gonna require an almost "shared" version of the form where two people might see a form and be able to answer it but be tied to one response. so you might have signer and signee later, but a future problem Legal wise, I did an analysis on this: Jason's feedback: can we just use a fineprint under signiture box" i agree to xxx" seems like if we wanna be serious we may need the QES eventually, but i do again think thats a later thing IF we get enough traction for it im happy with the MVP solution, i dont think we need a fully advanced version YET
Replace Clerk authentication
Bug reporting steps: We get a report or a problem through slack or any other channel channel The engineer will index the task in click-up, along with a description of the problem and any additional information that were provided (screenshots, urls, user story) Add an estimation of time A branch is created based on the github integration The problem is fixed, it's moved into PR/MR. This allows any shareholder that checks the task on the board to understand what is it about New Feature reporting: Feature description (detailed explanation) Include design (Figma link) Split the feature into sub-tasks for granular explanation Priority (if you know this) Estimation of time (if you know this)
Email Node Update (Color Issues)
Jason: we've had several complaints the "email node" has a red border thinking theres an error, can we just fix this and make the border blue? Here is the new primary color for the Email node — please use this design as the reference.
Test uk number in SMS sending - worker
am putea pune o regula rapida in worker, daca tonumber are +44, e uk, sa avem From nr nou de uk. As vrea sa putem face un test temporar doar pt UK,
Calculations node
The module MVP has been discussed and concluded: We're only going to have expression mode on the calculator, we won't be doing simple mode vs advanced mode When the result is being used, we're just going to print out the result, we won't be having the widget variable edit in MVP We will be able to use as inputs, data from simple text, dropdowns and single selection, where values will be cast to numbers We will enhance this later when we're going to have specific element types for numbers Full specs below -------------- Calculate Node concept: 1. Purpose of the Calculate Node A dedicated node in the Formflow canvas that lets creators perform math operations on data collected from earlier steps in the form. Outputs the result as a variable that can be reused later (e.g., on a Thank You page, in emails/SMS, or in other nodes). 2. Core Inputs Label – Friendly name for the calculation (e.g., Estimate, Repayment). Expression – The math formula that defines the calculation. Can use @variable references pulled from previous nodes (e.g., @how long, @type of car). Supports basic operators (+, -, *, /), exponents, square root, percentages. Outputs – The named result(s) of the calculation for downstream use. Units & Formatting – Predefine units (m, cm, %, $, decimal places). 3. Expression Builder Modes Simple Mode – Point-and-click builder for non-technical users (sum, multiply, divide). Expression Mode – Text-based, where the creator types formulas using variable references. 4. Variable Handling Variables come from earlier form fields (e.g., sliders, dropdowns, multiple choice). Can be fixed (from the original input) or variable (changeable later by the user to recalculate results in real time). Variables are auto-suggested in the expression builder for easy insertion. 5. Preview & Validation Live Preview – Shows example calculation using the most recent input values (18 * 49 = 882). Error Handling – Warns if a variable is missing, value type mismatch, or division by zero. 6. Dynamic Interaction After Submission Clickable Variables on Thank You Page – Users can adjust certain variables after seeing the result to instantly recalculate (e.g., change loan length, rate, or price). Backwards Linking – Option to feed a new input (like multiple choice add-ons) back into a Calculate node to re-run calculations without advancing steps. 7. Example Use Cases Car Rental Inputs: Days (@how long), Daily rate from car type (@type of car), Add-ons (@extras). Formula: @how long * (@type of car + @extras). Output: Total cost. Mortgage Calculator Inputs: Interest rate slider, Loan length, House cost, Down payment. Formula: Complex interest/loan repayment formula. Output: Monthly repayment, total interest paid. 8. Downstream Usage Output variables from the Calculate node can: Feed into Conditional Splits (e.g., “If repayment < $2000…”). Be merged into Thank You pages, Emails, or SMS. Trigger different flows or offers.
New feature - custom domains
sdfsf
Images for options in multi select/drop-down
We need to allow customers to add images to options in multi selects and dropdowns. Here is the proposed design: There might be a change in the settings panel, in canvas, where you select the type We need to take the images through compression for this task Then we need the new styles available for images, type, position, etc
Re-test meta integration
Re-test meta integration is planned for Formflow. We will share more details as implementation progresses.
OTP - SMS for lead to confirm the verification
We're goint to use verify API for the element type of phone, if the setup is OTP verification - on Available to Pro plan and buy credit system. Price 50c per verified lead, we pay twilio 0.05 for verify In form render, at that step, when moving fw, show the verify sms pop-up in the results page, show a verified icon on the record
Text display element type - add text editor - tiptap
We need to allow the customers to edit their text display and style it freely, similar to how Clickup is doing. The recommendation would be to use Tiptap, seems to be the one that's mostly recommended in communities, but feel free to recommend something else: The way I'd see this working is to show the text editor directly in the form. In order to not have styling issues, I'd remove the whole Text Styles from the right hand side and just have a message there: Style your text directly in the editor. So in style editor we would only have Size, while text styles would be directly from editor.
Remove RxJS completely
Bug reporting steps: We get a report or a problem through slack or any other channel channel The engineer will index the task in click-up, along with a description of the problem and any additional information that were provided (screenshots, urls, user story) Add an estimation of time A branch is created based on the github integration The problem is fixed, it's moved into PR/MR. This allows any shareholder that checks the task on the board to understand what is it about New Feature reporting: Feature description (detailed explanation) Include design (Figma link) Split the feature into sub-tasks for granular explanation Priority (if you know this) Estimation of time (if you know this)
Validation rules for all element types
Design above ^ Rules: Short text: Suffix Prefix Min & max characters Show countdown of characters (if max characters is set) Type restrictions (not sure if V1, tbd): Alphabetic only Numeric only Alphanumeric Custom pattern (Regex) Contain: Not Contain: Long text: Min & max characters Show countdown of characters (if max characters is set) Contain: Not Contain: Email: Here I just see Pattern/Regex, where they can enforce a different rule than ours Later the email validation via crediting system Contain: Not Contain: Phone: min & max lenght Countries: which countries to allow, not allow (multi-choice) Multiple choice: If multiple, not single, I can see a nice rule to set minimum/maximum choices. File upload: Max file size Max number of files Type of file (multi-choice) Date field min & max date range V2: within 30 days, before X, Address, Signature - only required/non required
AI Copilot V1
AI Copilot V1 is planned for Formflow. We will share more details as implementation progresses.
Layers display in style editor
Layers display in style editor is planned for Formflow. We will share more details as implementation progresses.
New element types: slider, ranking, number, checkbox
Figma with all rules here: On top of that, we should modify the dropdown behaviour for the customer to be able to enable 'Other behviour'. When other is selected, an input to type will be allowed.
Image element type
We need to create a new element type in the canvas called simply Image. It will work very similarly with what we did on the multiple choice images. Canvas flow: New element type → Image. It will look similar to File upload, but no required choice, as it will be simply a static element type. Design wise, we need an icon to open the files gallery, as it does on multiple choice. They can add an image here. That's all, no label or anything, just the image. If we need a label/description, we will keep it there just for reference, but don't show it on the style editor In the style editor, it will look similarly to multiple choice image when clicking on the image. It will have option Image styles I would increase the possible width and height on the slider to go 1200px max We need to remove the position, since we won't have a label We need to remove active style. (optional) I'd let the user change the image in the style editor too, the way it does on the logo. Technically it would open the same file management Then on Label styles I would name it "Container Styles" where we keep Align, Padding, Margin, Gap
Guarding subscription plans and UI improvements for upgrades
We need to guard the rules for the subscription plans, based on the packages here: Other changes/improvements: Trial becomes Free package. No expiration, just starter plan with only 100 emails and 100 submissions/mo Current Lifetime will be sunset. We're leaving all customers with current rules, but we're creating Lifetime V2, that's a stripped down version of lifetime. Here is what we currently advertise as Lifetime V2: We need to create a list of what we're restricting (conditional split, etc) When we track the number of submissions, we should count them down, like 199 submissions left, it converts better A submission is counted right now if they reach the end, but we need to change it to consider it if it passed 1st page Results page to take into account limits Related tickets:
Twilio card not looking correctly in messages
Our contact card looks strange when received: Here are 2 examples for twilio where rendering is correct.
