Whether it’s product feedback, a job application, or new customer requests—there’s important information you need to collect from others that’s essential to your work. With Yeeflow public forms, you can collect information from anyone with a custom form that plugs directly into your data list.
Pro Tip
You can create multiple public forms to share with different target audiences.
Accessing the Designer
To create a new public form, or edit an existing public form, firstly go access one of the existing data list, and click more operations button from the top-right title bar, and select Public form from the dropdown menu.
Click New form button to create a new public form. Or, select an existing public form, and form the more operations menu, click Edit form to open in designer.
Add controls panel
This opens the Add panel from where you can add controls from the Controls panel
There are different type of controls in the controls panel, which are grouped by categories:
Custom List Fields: Here list or the custom fields you created for this content list. Like the employee list includes fields like Employee name, Contract info, Job title, Location etc.
Default List Fields: The system generated fields of a data list, which includes item ID, created by/time, modified by/time..
General: Includes general form layout related controls, which can be used to create well-designed form styles.
Advanced: Includes advanced style controls, progress controls, embed control, and submit form button etc.
Page settings
Click Page from the add controls panel to switch to the Page settings tab.
Background & Content Area
Set the background color of this form, and the content area style here. Please refer Page Background and Content Area Styles to learn more details.
Appearance
Set the default title-field alignment:
Horizontal: Set the title display on the left of the field control by default.
Vertical: Set the title display on the top of the field control by default.
Pro Tip
You can change the title-field alignment for each different field control from the control's properties settings panel. Your content goes here
Custom CSS
Add custom CSS which will be used on this form. Learn more about custom CSS, please refer: Custom CSS
Thank you page & Redirect
With your form shared, you’ll start receiving submissions! Stay on top of every new submission by customizing your post-submission form settings—when a form is submitted, you can show a customized message that will be shown once a form has been submitted.
If you check the Redirect to URL after the form is submitted toggle, a text box will appear for you to enter the redirect URL.
Pro Tip
You can configure your internal post-submission activities with the data list's notifications and workflow functions. like send an email, trigger a workflow etc.
Custom Scripts
Custom Scripts in Yeeflow allow you to add specific JavaScript or CSS that can modify or enhance the behavior of your form. This feature is particularly useful for:
Tracking and Analytics: Insert scripts like Google Analytics or Facebook Pixel to track user interactions and conversions directly from your form.
Enhanced Interactivity: Implement custom JavaScript to create dynamic form behaviors that respond to user inputs in real-time.
To add a custom script:
Navigate to the Custom Script section in the form settings.
You can input scripts to be included before the
</head>tag or before the</body>tag. This allows for flexibility depending on whether the script needs to be loaded in the head (for early loading) or just before the body closes (typically for scripts that require the entire DOM to be loaded).
SEO Settings
Optimizing your form for search engines can increase its visibility and accessibility. Yeeflow’s SEO settings enable you to specify:
Page Title: This title appears in browser tabs and search engine results. It’s a critical element of SEO, providing users and search engines with a concise description of the form’s content.
Meta Description: Offers a brief description of the form’s purpose, which appears under the title in search engine results. This description should be compelling to encourage users to click through to the form.
Featured Image: When sharing your form on social media, the featured image will be displayed. This image is also important for Image SEO, as it helps your form stand out visually in search results and social feeds.
To configure SEO settings:
Go to the SEO Settings section within the form designer.
Fill in the Page Title and Meta Description with relevant keywords and descriptions to enhance search engine visibility.
Upload a Featured Image that is visually appealing and relevant to the form’s content. Ensure the image follows the recommended size and aspect ratio to appear optimally across all platforms.
The bottom navigation bar
The bottom navigation bar shows you the options to open navigator, or preview your design.
Navigator
Shows the hierarchy of every element on the page you are currently on. Here, you can visually interact with these elements. Learn more about the Navigator.
Preview
Toggles between the preview and design mode of the Designer, allowing you to see how your form will look when published.
Show / Hide the Controls Panel
When using the editor, the default view pins the controls panel to the left side of the screen. It’s useful for when you’re designing, but not so much when you want to preview how everything looks on the page.
One way to collapse the panel is to click the arrow along the right edge of it:
The Canvas
The major area in the Designer is the Canvas. It's where you can interact with the form in real-time. You can select elements, move them around, and edit content right on the page. Learn more about the Canvas.
The top bar
The top bar provides another set of view settings as well as some useful tools to edit temporary variables, actions, save changes and close this designer.
Variables
In the top-right bar, you can see "Variables" where temporary variables can be set on the form.
Actions
Clicking the "Actions" button at the top-right of the form designer opens the Actions management window.
Click "+ New action" to create a new action and click "+ Add a step," and you will see five available action types to choose from.
To learn how to use actions, click Form Actions | Yeeflow Help Center
Page indicator
Shows which page you are currently on.
Share form button
Once you get your public form ready, click the "Share form" button to share this form to public access:
Create a shared link and copy the link, or download the QR code. You can also protect the shared link with a password.
Embed this form on your site: Create an embed code to add on your web site.
Click "Disable shared link" to disable this link. You can also set the expiration date to automatically disable this link at the specified date.
Open form button
Click this button to open the shared link in a new window.
Breakpoints buttons
Located in the middle of the top bar, these icons allow you to switch between different breakpoints to see and edit the design of your form on these breakpoints.
Operations
Save: Click to save changes of this from.
Close: Click the close button to exit from the designer model.