Web Forms: How To Configure the Form Field Display

Introduction

When creating a form, configuring how the form fields will be displayed is also an important aspect of the overall display of the form. Configuring the display of each individual field is not required as the out of the box and default options will work, however if you want your fields to be displayed in a certain way, you will need to change the configurations.

Instructions

To configure your display for the form field, navigate to the form field and then to the display tab.

From this page you will be able to configure the settings for the individual form field. All configurations made will only affect this field and not any of the others.

The first three configurations control if the field is enabled, the label of the field and if there is a line break



The next sections of configurations will allow you to show or hide certain pages from the form within the form field using radio buttons. Select the show button if you would like the page to be shown and the hide button if you don’t want the page to be shown.

Note: all fields are set to display by default on every page but the success page. You must click the radio buttons to hide if you do not want them to be displayed.

If your options are a radio or checkbox field type, you will also need to configure the layout of the options. Select your option form the drop downs 

The Layout dropdown will determine how your options will be displayed. You can select Flow, ordered list, table, or unordered list.

The Layout Direction will determine if you want your options listed vertically or horizontally.



If you select to display the form field options horizontally, the options will be displayed like the below.



If you select to display the form field options vertically, the options will be displayed like the below.



The last layout configuration will be the Label Alignment to either the left or right side of the page.

• Sustainers: How to Create and Manage Recurring Donors
• Web Forms: Creating a Donation Form (or other Web Form) - What’s Standard/Out of the Box?
• Pro Tips For Creating Forms
• Web Forms: Using Email Auto Responders with Forms
• Web Forms: Using the WYSIWYG Editor for Forms and Emails
• Managing Web Form Fields- Adding Validations
• Shopping Cart: Creating a Fulfillment Center
• Shopping Cart: How to Configure the Checkout Subtab
• Shopping Cart: How To Create a Shopping Cart to Sell a T-shirt
• Shopping Cart: Custom Fields and Variants for Products
• Shopping Cart: Configuring Product Inventory
• Shopping Cart: How To Create Products
• Contacts: How to Create, Use and Manage Cases
• Web Forms: How to Design Your Web Form
• Web Forms: How to Managing Fields
• Sustainer Re-Activation: How to Send Sustainers the Re-activation Form
• Why and How to Use "Donor Covers Processing Fee" as a Fundraising Tool for Online Donation Forms
• Single Line Address
• Web Forms: How to Manage Out of the Box Payment Block
• Advanced Web Forms: How to use CharityEngine Tokens to Customize Your Form templates
• Web Forms: Character Limit on Text Fields
• Web Forms: How to Manage Out-of-the-Box Donation Block
• How to Configuring URL Redirects
• Events: How to add Custom questions/Survey Questions to Event Forms
• Web Forms: How to Test Web Forms
• Web2CRM User Guide
• Web Forms: Creating and Mapping Custom Field on a Form
• Web Forms: How to Add an Email Opt-In List
• How to Configure Your Billing and Auto Deactivation
• Web Forms: How to Change the URL Suffix
• Online: User Center Front End
• Contacts: Managing Contact Status Types and Priority
• Online
• Web Forms: How to Add an E-Card to a Form
• Adding Global Javascript Code
• Promo Codes & Discounts
• Landing Page URL
• Pledge: How to Create and Manage Pledges - A Comprehensive Guide
• Web Forms: How To Customize Out of the Box Sections and Fields
• Configuration: How to Configure for a Fiscal Year and Downstream Reporting
• Web Froms: How to Create an Internal Form (for a Telethon, Radiothon, or Conference)
• Campaign - Surveys: How to Create a Poll & Survey Form and How to View the Results
• Web Forms: How to Create a List Sign Up Form (Contact Type Web Forms)
• API Configuration: How to Configure your WealthEngine API Key
• Web Forms: Defining CharityEngine Web Form Types
• Transactions: Preparing & Sending Year End Statements
• Online: User Center Configuration
• Creating an Event with Free Tickets
• Configuration: User Role Permission Levels
• Memberships: How to Create a Membership Type (Configuration)
• Peer to Peer: Comprehensive Guide for Set Up, Configuration, and Reporting
• Online: Widgets - Embedding Donation, Sign-Up, and Legislature Look-up Forms
• Developer: API - Installing the CharityEngine Public Web API
• Embedding Quick Action Donation Forms with HTML
• Embedding Quick Action Donation Forms with Javascript
• Web Forms: How to Assign Tags through Form Submission
• Web Forms: How to Hide Tickets on an Event Form
• How to Bypass Payment Information on a Free Event
• Developer: API - Public API Troubleshooting
• Events: How to Create a Survey for Your Event
• Allowing Organizations to Donate on Web Forms
• How to Add Multiple Funds to a Web Form
• Data Import: How to Import Soft Credits
• Adding Seasonal Address
• Browser Security Changes & Iframeing CharityEngine Donation Forms & Online Fundraising Apps
• Events: Creating a Standard Out of the Box Web Form
• Pledges: Creating Pledge Web Forms
• Web Forms: How to add CAPTCHA to your form
• Contacts - Editing Contact Record Panels
• Contacts: Comprehensive Guide for Usage and Management of Tributes
• Online - Web Forms: Wallet Payment Options (Apple Pay and Google Pay)
• Web Forms: Guide on Replicating Forms
• Web Forms: How to Create an SMS Opt-In Form for SMS Campaigns
• Web Forms: Preventing Fraudulent Activities with Security Settings & Features
• Creating a New CMS Website
• In-Kind Gifts: How to Create and Manage In-Kind Gifts - A Comprehensive Guide
• Web Forms: Advanced Web Form Design Elements
• Events & Volunteers: Tickets
• Adding "Double the Donation" to a Form
• Reordering Form Fields
• Configuring Event Types for P2P
• Reordering Sections