Introduction
In Web Forms 2.0, Templates and Layouts are now separate pieces that can be configured independently – for example, a custom code change made to a layout will not affect the template, and vice versa. This guide shows users how the Forms 2.0 template and layout matchups work, and how to select them together to get the correct cosmetic result for a form. This is useful even for users who aren't adding custom code.Table of Contents
Templates vs. Layouts in Forms 2.0
CharityEngine is currently in a transition period from legacy-style web forms to Forms 2.0. While this transition is underway, both legacy and 2.0 designs exist in the system, and some templates are being intermingled between the two.
Within Forms 2.0 specifically, a Layout controls the structure of the form – for example, whether it is presented as a single page or broken into multiple steps. A Template controls the cosmetic design laid over that structure. A 2.0 template can only be used with its matching layout of the same name. If a chosen layout does not have a corresponding template, the Default template (the Web 2.0 standard) must be used instead – there is no separate cosmetic template to apply on top of it.
Instruction - Select a Matching Layout and Template for a Web Form
Step 1: Navigate to Online > Web Forms > Search and Manage.
Step 2: Click the plus icon in the top right to create a new record.
Step 3: Select Donation Form as the form type and click Continue.
Step 4: In the modal that appears, choose a Layout from the dropdown. There are far fewer layouts than templates; the standard out-of-the-box 2.0 layouts include options such as Standard, Split Story, Split Panel, and Right Aligned. For this walkthrough, leave the layout on the default Standard option, then click Create.
Step 5: The new form opens on the Manage Form screen. Click the Design tab – this is where all Template and Layout configuration happens. The Template and Layout fields appear at the top of this tab.
Step 6: Confirm the Template is set to Default and the Layout is set to Standard – together these give a baseline Web 2.0 form. Click Save.
Note: Legacy themes (for example, Standard Centered Theme or Standard Centered Narrow) cannot be used with 2.0 layouts. Web Forms 2.0 requires a 2.0 template paired with its corresponding layout.
Step 7: Click the General tab, then click the form's URL/web link to preview the base Web 2.0 design. This baseline intentionally looks similar to legacy forms to ease the transition, while including 2.0 updates such as rounded field styling, updated buttons, a processing fee option included by default, new payment icons, and a restyled Give/Total button.
Step 8: Back on the Design tab, change the Layout to Multi-Step. The Default template can be used together with the Multi-Step layout. Click Save.
Step 9: Click the General tab again and open the form's URL to view it. The form will look the same cosmetically (same rounded field edges, button layout, etc.) but will now be broken into multiple steps – for example, Gift Amount, then Dedication, then Contact Information, each reached by clicking Next.
Step 10: Choose a different Layout to further change the form's structure (for example, Split Story Card Left Form or Split Panel Right Form).
Step 11: Check whether a Template exists with a matching name to the layout just selected. If one exists (for example, a Split Story Card template matching the Split Story Card Left Form layout), select it to fully apply the new cosmetics. The preview area will update to show the new design.
Step 12: If no matching template exists for the chosen layout (for example, there is no Multi-Step template to pair with the Multi-Step layout, which is why Default was used in Step 8), leave the Template set to Default.
Step 13: Click Save.
Step 14: Click the General tab, then click the form's web link/URL to preview the live form and confirm the new layout and template have been applied.
Note: A newly applied template may come with default colors that don't suit the form's content (for example, white text on a white background). Return to the Design tab to configure the header background, text color, image properties, page background and colors, and button properties as needed. If adding a background image, use the template's recommended pixel dimensions for the best result. Save and preview from the General tab again after each change to confirm it.
FAQs & Additional Reading
Q. Can any 2.0 template be used with any 2.0 layout?
A. No. A 2.0 template can only be used with its matching layout of the same name. If a chosen layout has no matching template, the form must remain on the Default template.
Q. Why were Templates and Layouts separated in Forms 2.0?
A. To create more stability when customizing a form – for example, adding custom code to a layout will not affect the template, and vice versa. See the Forms Transition Guide article for more background on this change.
