Campaign eForms Customization

Campaign eForms Customization: Color-coded Controls and Their Elements

The customization of campaign eForms includes several options that allow users to modify the appearance and behavior of templates. These are controlled through Fields Options and Styling Options tabs. Below is an explanation of the colored boxes, which highlight specific control settings and their corresponding elements in the forms.

Styling Options

This section lets you modify the visual appearance of the eForms. Here's how the settings correspond to the elements:

1. Primary Background (Highlighted in Blue Box)

   • This controls the main background color of the form. Example: The background where the text fields and buttons are placed.

2. Secondary Background (Highlighted in Yellow Box)

   • Determines the color for supporting sections, such as descriptions or secondary panels.

3. Button (Highlighted in Orange Box)

   • Sets the color of action buttons like "Continue to Pay" or "Submit" on the forms.

4. Primary Text Color (Highlighted in Green Box)

   • Changes the color of the main text displayed on the form fields.

5. Secondary Text Color (Highlighted in Light Green Box)

   • Adjusts the color of less prominent text such as hints, descriptions, or tooltips.

6. Typography (Highlighted in Yellow Box under Typography section)

   • Lets you select the font type (e.g., Montserrat) to use for all text in the form.

7. Shapes (Located in the Styles Section)

   • Options like "Rounded" allow you to customize the corners of buttons or fields for a more polished design.
     
     
     
     

Field Options

This section customizes the functional and textual content of the form fields. Each page has its unique settings.

1. Page 1 Settings (e.g., Donation Page)

   • Heading Page 1 (Highlighted in Yellow Box)
     • The main title for Page 1. Example: "Donation".
   • Text Page 1 (Highlighted in Orange Box)
     • Text instructions or descriptions shown below the heading. Example: "1/2 Please provide your account details".
   • Button Page 1 (Highlighted in Light Green Box)
     • Text shown on the action button to proceed to the next step. Example: "Continue to Pay".

2. Page 2 Settings (e.g., Payment Details Page)

   • Heading Page 2 (Highlighted in Yellow Box)
     • The main title for Page 2. Example: "Card Details".
   • Text Page 2 (Highlighted in Orange Box)
     • Instructions for entering payment details. Example: "2/2 Please enter your payment card information below to complete your payment".
   • Button Page 2 (Highlighted in Light Green Box)
     • The text on the submission button. Example: "Submit".
       
       

Preview

The final preview illustrates how the settings from the Styling Options and Field Options tabs reflect in the form. For example:

• Primary Background: Visible in the main form areas.
• Button Color and Text: Shown as the "Continue to Pay" or "Submit" button.
• Headings and Instructions: The text displayed for each page.

This intuitive and customizable approach ensures that campaigns align with branding needs while maintaining a user-friendly interface.