Help Center
Go to Upflowy
Help Center
Go to Upflowy
Getting Started
Upflowy 101: How to use Upflowy in 5 minutes
Building a Flow
How to set up a logic split in UpflowyHow to set up an A/B test in UpflowyHow to create nested flowsChanging between desktop and mobile viewsHow to make your flow's redirect URL open in a new tab (for embedded flows)How to use the UTM Parameters in Conditional LogicHow to inject custom parameters into your flowHow to redirect your Upflowy flow to a custom error pageHow to add parameters from your flow to your redirect URLHow to proceed to the next step automatically
Steps and Components
How Components WorkHow to include hidden fields in your Upflowy flowHow to add a default value to your Input componentText, Sub-Heading, and Heading, components: What they do and how to use them.How to add a hidden Input to your flowThe Image component: What it does and how to use itThe Spacer Component: What it does and how to use itThe Input Component: What it does and how to use itThe Multiple Choice Component: What it does and how to use itThe Dropdown component: What it does and how to use itThe Link component: What it does and how to use itThe Content Cards component: What it does and how to use itHow to recall data from previous steps in your flowHow to use the Cards component as a buttonHow to remove borders and background from the card component using CSSThe Nested Dropdowns component: What it does and how to use itThe Upload Documents Component: What it does and how to use itThe Button Component: What it does and how to use itThe Video Component: What it does and how to use it
Find Extra Components (Or Request One!)
Styling, Design and Brand Kits
Theme Settings: What they doHow to upload a custom loading gif into your Upflowy flowHow to use LayoutsHow to change the style of flow elements using CSSHow to add effects and animation to your flowHow to optimize your Upflowy experience for mobile How to customize your flow with custom CSS
Connect & Integrate your data
NEW! Connect to 1000+ apps
Analytics and Reporting
Collaboration
Documents
Email Marketing
Productivity
Scheduling
API Documentation
How to share, embed and trigger your flow
How to share your flow starting from a specific step
Share your flow as a URL
Embed your flow on a webpage
Triggering your flow
Checking your results
Answers PageDownload your data as a CSV
Settings / My Account
Adding a coupon codeHow to Add, Edit and Delete a User in Upflowy
Frequently Asked Questions
Security and DataFeatures and FunctionalitiesHow to make a quiz in Upflowy
Release Updates
Release 22.2.8 - Pre-populating fields, Hidden Inputs, Bug Fixes

How to use Layouts

When it comes to sharing your flow with the World, you have a couple of options on how to display it.

From the step view, on the left-hand side, you can reach our Layouts tab. This is where you can change the physical arrangement of the fields, as well as the size of the flow. 

At the moment we have two main types of layouts with two more options to choose from. 

Modal

Modal layouts let you display your flow on top of other content as a pop-up window. It is best used on websites, however, by adding a background image behind the flow, you can use the modal type of flows standalone as well. 

Important: modals will open in full-screen in mobile view to retain as much screen real estate as possible. 

Full Page

Flow layouts in standalone mode will utilize the full screen, in both mobile and desktop views: 

If you embed your flow in your website as an iframe, however, you can change it's size dynamically and it will take up the space you provide it. 

Form and Content Fields 

Besides choosing between modal and full-screen modes, you can also decide whether you would like to have a content field on your flow, or you would like to have the form only. 

At Upflowy, we call the main part of the flow the form field. This is the space where you can add: 

  • input fields
  • text fields
  • images, videos, and other content, like the map

The form field will always appear, both in desktop and mobile views. 

The content field, on the other hand, is an optional part of the flow that you can fill up with contextual components. You can add: 

  • images, videos, and other content, like the map
  • text fields

The content field is best used for storytelling and to enhance the design, however, it cannot contain input fields. 

In desktop view, the field will appear on the right side of the flow, and in mobile, on top. However, if the screen is too small, the field gets hidden. 

The Content Field in mobile view

While the input field is always visible in both desktop and mobile views, that is not the same for the content field. 

In the editor, this field contains two content blocks where you can drag components, one upper one, and one a bit below: 

The top block is designed to appear in both desktop and mobile views - while the bottom one will only appear on desktop, due to the smaller screen size of mobile devices. 

If you would like the content to appear in both views, make sure to add your content on the top - however, if it is for desktop viewers only, you can use the bottom block. 

Here is a short video of how the same content would look in different views. In this demo, the text is added to the top, while the unicorn is part of the block at the bottom: 

Powered by Product Fruits