Display Fields
Add paragraphs, images, and custom buttons to enhance form UX and provide context to users.
💡 About Display Fields:
Display fields are non-editable elements that enhance your form's user experience. They don't collect data but provide information, instructions, visual elements, or navigation options. Most display fields are custom fields that you add directly in SyncForms without needing to create them in QuickBase first.
Overview
Display fields help you create more informative and user-friendly forms. Use them to provide instructions, show images, or add navigation buttons. These fields are read-only and don't submit data to QuickBase.
Paragraph Fields
Paragraph fields display custom text content on your form. Perfect for instructions, descriptions, disclaimers, or any informational text you want users to see. You can customize the font size, color, and style.
How to Add:
- 1Open your form in the Form Builder
- 2Click Add Field and select Custom Field
- 3Choose Paragraph as the field type
- 4Enter your text content and customize appearance
Customization Options:
- Font Size: Choose from 14px, 16px, 18px, 20px, or 24px
- Text Color: Set a custom hex color for the text
- Text Style: Normal, Bold, or Italic
- Show Label: Toggle to show or hide the field label
Use Cases:
- Form instructions or guidelines
- Section headers or descriptions
- Legal disclaimers or terms
- Helpful tips or additional information
Image Fields
Image fields display images on your form from a URL. Perfect for logos, diagrams, instructions, or any visual content that enhances your form's appearance and usability.
How to Add:
- 1Click Add Field and select Custom Field
- 2Choose Image as the field type
- 3Enter the image URL (must be publicly accessible)
Image Requirements:
- Image URL: Must be a publicly accessible URL (e.g., https://example.com/image.jpg)
- Supported Formats: JPG, PNG, GIF, SVG, and other web image formats
- Responsive: Images automatically scale to fit the form width
Use Cases:
- Company logos or branding
- Instructional diagrams or flowcharts
- Product images or visual examples
- Decorative elements or headers
Image URL Accessibility
The image URL must be publicly accessible. Images hosted on private servers or behind authentication will not display. Consider using a CDN, image hosting service, or ensuring your image server allows public access.
Button Fields
Button fields add custom navigation buttons to your form. Users can click these buttons to navigate to external URLs, open links in new tabs, or trigger other actions. Perfect for linking to documentation, external resources, or related pages.
How to Add:
- 1Click Add Field and select Custom Field
- 2Choose Button as the field type
- 3Configure the button URL, text, color, and target window
Configuration Options:
- Button Text: Customize the text displayed on the button (defaults to field label)
- Button URL: The URL to navigate to when clicked
- Open In: Same window or new tab/window
- Button Color: Customize the button background color (defaults to form submit button color)
- Button Text Color: Set the text color for the button (defaults to white)
Use Cases:
- Link to help documentation or FAQs
- Navigate to related forms or pages
- Open external resources or tools
- Provide quick access to support or contact pages
Best Practices
- Use Paragraphs for Instructions: Add paragraph fields at the top of your form or before complex sections to guide users through the form completion process.
- Visual Hierarchy: Use different font sizes and styles in paragraph fields to create visual hierarchy and make important information stand out.
- Image Optimization: Use optimized images with reasonable file sizes to ensure fast form loading. Consider using compressed images or modern formats like WebP.
- Button Placement: Place button fields strategically to provide helpful navigation without disrupting the form flow. Consider placing help/documentation buttons at the top or bottom of the form.