# Right Sidebar in Form and Survey Builder > Use the Right Sidebar to style GHL Customer Care forms and surveys. Control layout, spacing, colors, and per‑field label alignment (Single Column only; mobile = Top). - Source: https://docs.ghlcustomercare.com/docs/sites/forms/right-sidebar-in-form-and-survey-builder - Section: Sites / Forms - Reading time: 6 min - Images: 5, each explained below - Modified on Wed, 9 Sep at 11:47 PM --- The **Right Sidebar in GHL Customer Care’s Form and Survey Builder** centralizes styling and configuration while you build. Use Styles, Themes, and Advanced Settings to control your form or survey's layout, input appearance, spacing, colors, and more! --- **TABLE OF CONTENTS** - [Overview of the Right Sidebar in Form and Survey Builder](#overview-of-the-right-sidebar-in-form-and-survey-builder) - [How to Open the Right Sidebar](#how-to-open-the-right-sidebar) - [Styles Tab](#styles-tab) - [Themes Tab](#themes-tab) - [Advanced Tab](#advanced-tab) - [Element-Level Label Alignment](#element-level-label-alignment) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **Overview of the Right Sidebar in Form and Survey Builder** The Right Sidebar is the form and survey builder’s control panel for visual and layout settings. It includes tabs for Styles, Themes, and Advanced, so you can fine‑tune how your form or survey looks and behaves. Keeping all design controls within reach makes it faster to preview changes and maintain consistency. The right sidebar consists of 3 tabs: - **Styles:** Fine-tune layout and look of your form or survey - **Themes:** Apply ready‑made presets for consistent branding - **Advanced:** Access extra options for specialized needs --- ## **How to Open the Right Sidebar** To open the right sidebar from within the Form or Survey Builder, click the **Styles & Options** button in the upper right corner of the builder. Click the **Style & Options** button again to collapse it. ![How to Open the Right Sidebar (image 1 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054082291/original/6UY4qozJsRosRb0QWBE1Dw59qFXdcSzEZQ.png) **How to Open the Right Sidebar (image 1 of 5)** This screenshot appears in the "How to Open the Right Sidebar" section of "Right Sidebar in Form and Survey Builder". The text alongside this image reads: To open the right sidebar from within the Form or Survey Builder, click the Styles & Options button in the upper right corner of the builder. Click the Style & Options button again to collapse it. Immediately after, the guide continues: The Styles tab is where you set the core layout for your form or survey. From this tab, you control the layout, color scheme, and branding. Controls within the Styles tab include. - Where to go: To open the right sidebar from within the Form or Survey Builder, click the Styles & Options button in the upper right corner of the builder. Click the Style & Options button again to collapse it. - Controls: Styles & Options, Style & Options - Next: The Styles tab is where you set the core layout for your form or survey. From this tab, you control the layout, color scheme, and branding. Controls within the Styles tab include: --- ## **Styles Tab** The Styles tab is where you set the core layout for your form or survey. From this tab, you control the layout, color scheme, and branding. Controls within the Styles tab include: - **Layout:** Define the overall arrangement and field presentation, including how inputs and labels appear, widths, spacing, padding, and the top margin above your form or survey. Use the top-margin controls to adjust space without **custom CSS**. Changes update live in the preview, and leaving margin fields blank keeps the default spacing. [Click here for more information on Element-Level Label Alignment](#element-level-label-alignment) - You can now set **Top and Bottom padding** to 0 px for a true edge-to-edge layout. Previously, published assets could still show extra vertical spacing even when padding was set to 0. - **Footer (Surveys):** The Survey Footer controls the navigation and progress information respondents see as they move through a survey. Customize the footer's behavior, appearance, and navigation controls to match your survey design while keeping it easy for respondents to move between steps. Available Footer settings include: - **Footer Behavior:** Choose **Stick to card** or **Stick to page** to control how the footer behaves as respondents move through the survey. - **Background Fill:** Customize the footer background. - **Footer Height:** Adjust the height of the footer area. - **Typography:** Configure the font family, font size, and font weight used in the footer. - **Progress Bar:** Enable the progress bar to give respondents a visual indication of their progress through the survey. - **Button Type:** Choose the available presentation for survey navigation controls, including supported text and arrow options. - **Button Position:** Control the placement of navigation buttons within the footer. - **Button Text:** Customize the labels displayed for **Previous, Go Back, Next, and Submit** actions. - **Button Colors:** Customize the available navigation button and text colors to match your survey design. - Preview the survey after changing Footer settings to confirm that navigation, progress, and styling appear as expected for respondents. - **Colors & Background:** Set font settings, choose background colors and where supported, apply background or header imagery to match your brand. - **Miscellaneous:** Apply or turn-off agency‑level branding ![Styles Tab (image 2 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054084354/original/mWGHumaIC874yBVUsW7iygaVDtzYdyhfiQ.png) **Styles Tab (image 2 of 5)** This screenshot appears in the "Styles Tab" section of "Right Sidebar in Form and Survey Builder". The text alongside this image reads: Layout: Define the overall arrangement and field presentation, including how inputs and labels appear, widths, spacing, padding, and the top margin above your form or survey. Use the top-margin controls to adjust space without custom CSS. Changes update live in the preview, and leaving margin…. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: The Themes tab lets you quickly create professional looking forms and surveys using presets. Use Themes to accelerate the setup, then use Styles to fine‑tune spacing and widths afterward. - What to choose: Layout: Define the overall arrangement and field presentation, including how inputs and labels appear, widths, spacing, padding, and the top margin above your form or survey. Use the top-margin controls to adjust space without custom CSS. Changes update live in the preview, and leaving margin fields blank keeps the default spacing. Click here for more information on Element-Level Label Alignment You can now set Top and Bottom padding to 0 px for a true edge-to-edge layout. Previously, published assets could still show extra vertical spacing even when padding was set to 0. Footer (Surveys): The Survey Footer controls the navigation and progress information respondents see as they move through a survey. Customize the footer's behavior, appearance, and navigation controls to match your survey design while keeping it easy for respondents to move between steps. Available Footer settings include: Preview the survey after changing Footer settings to confirm that navigation, progress, and styling appear as expected for respondents. Colors & Background: Set font settings, choose background colors and where supported, apply background or header imagery to match your brand. Miscellaneous: Apply or turn-off agency‑level branding - Fields: Miscellaneous: Apply or turn-off agency‑level branding - Controls: custom CSS, Top and Bottom padding, Stick to card, Stick to page, Previous, Go Back, Next, and Submit - Next: The Themes tab lets you quickly create professional looking forms and surveys using presets. Use Themes to accelerate the setup, then use Styles to fine‑tune spacing and widths afterward. Full procedure: 1. Layout: Define the overall arrangement and field presentation, including how inputs and labels appear, widths, spacing, padding, and the top margin above your form or survey. Use the top-margin controls to adjust space without custom CSS. Changes update live in the preview, and leaving margin fields blank keeps the default spacing. Click here for more information on Element-Level Label Alignment 2. You can now set Top and Bottom padding to 0 px for a true edge-to-edge layout. Previously, published assets could still show extra vertical spacing even when padding was set to 0. 3. Footer (Surveys): The Survey Footer controls the navigation and progress information respondents see as they move through a survey. Customize the footer's behavior, appearance, and navigation controls to match your survey design while keeping it easy for respondents to move between steps. Available Footer settings include: 4. Preview the survey after changing Footer settings to confirm that navigation, progress, and styling appear as expected for respondents. 5. Colors & Background: Set font settings, choose background colors and where supported, apply background or header imagery to match your brand. 6. Miscellaneous: Apply or turn-off agency‑level branding --- ## **Themes Tab** The Themes tab lets you quickly create professional looking forms and surveys using presets. Use Themes to accelerate the setup, then use Styles to fine‑tune spacing and widths afterward. To apply a theme to your form or survey, hover over the desired theme and select **Use Theme**. In the pop-up, confirm your selection by clicking **Proceed**. **Please Note:** Switching themes will result in the loss of the current style modifications. ![Themes Tab (image 3 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054084653/original/f4E9xHjwkUNtIcEhn4ZIfZkLi-31PamvAQ.png) **Themes Tab (image 3 of 5)** This screenshot appears in the "Themes Tab" section of "Right Sidebar in Form and Survey Builder". The text alongside this image reads: Please Note: Switching themes will result in the loss of the current style modifications. Immediately after, the guide continues: The Button Styling Panel centralizes all button appearance controls so you can apply polished, consistent styles without custom code. Use presets to start fast, then fine-tune typography, spacing, borders, radius, shadows, and width. - What this covers: Please Note: Switching themes will result in the loss of the current style modifications. - Controls: Use Theme, Proceed - Next: The Button Styling Panel centralizes all button appearance controls so you can apply polished, consistent styles without custom code. Use presets to start fast, then fine-tune typography, spacing, borders, radius, shadows, and width. --- ## **Button Styling Panel** The Button Styling Panel centralizes all button appearance controls so you can apply polished, consistent styles without custom code. Use presets to start fast, then fine-tune typography, spacing, borders, radius, shadows, and width. Note: Prior button controls now appear under grouped sections in this panel for easier styling and faster updates. ### **Open the Button Styling Panel** 1. ### Open a Form in the builder. 2. Click the button element on the canvas. 3. In the right sidebar, expand **Button** (or **Styles → Button**) . ### **Choose a Button Theme (Gallery + Preview)** 1. Click **Select Themes**. 2. Browse **Filled**, **Border**, and **Text Only** categories. 3. Hover or select a theme to preview changes live on the canvas. 4. Click **Apply** to set the theme on the selected button. ### **Customize Button Styles (Grouped Controls) ** Purpose: Fine-tune the theme to match brand standards without CSS. **Colors & Background:** Set text, background, and border colors. **Typography:** Choose font family and weight (supports custom fonts). Set size, letter spacing, and text transform. Screenshot Placeholder: Typography group. **Layout & Alignment:** Align the button **Left / Center / Right**. Toggle **Full Width** to span the container. Screenshot Placeholder: Layout & Alignment group. **Padding:** Adjust top/bottom and left/right padding (link/unlink values). **Border & Corner Radius:** Set border width and style. Adjust corner radius for rounded vs. square buttons. Screenshot Placeholder: Border & Corner Radius group. **Shadow:** Enable shadow, then adjust blur/distance/spread. **Reset or Revert** Click **Reset** or **Revert** to undo style changes. Reopen **Select Themes** to pick a different starting point. --- ## **Advanced Tab** The Advanced tab provides extra options for specialized needs beyond core layout and theme controls. Use it when you need deeper fine‑tuning while keeping the form maintainable. Control types within the Advanced tab include: - **Form:** Adjust the form container’s borders, corners, and shadow - **Input Field:** Style the input elements themselves, including text and focus colors, borders and corners, width, padding, and shadows - **Label:** Control label typography and color - **Short Label:** Configure short‑label typography and color - **Placeholder:** Customize placeholder text appearance - **Custom CSS:** Add custom CSS for precise control. **Please Note:** Custom CSS takes precedence over Styles and Themes and may impact theme styling. ![Advanced Tab (image 4 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054085253/original/Xi1ZJLAWDG_jGOnc3EKFJ6MrvFLZ2SRjwQ.png) **Advanced Tab (image 4 of 5)** This screenshot appears in the "Advanced Tab" section of "Right Sidebar in Form and Survey Builder". The text alongside this image reads: Please Note: Custom CSS takes precedence over Styles and Themes and may impact theme styling. This part of the guide covers 3 fields, listed below. Immediately after, the guide continues: Element-level label alignment lets you set a different label position for each field, instead of applying one global alignment to the whole form or survey. Use it to fine‑tune visual rhythm and spacing, especially in compact layouts. - What this covers: Please Note: Custom CSS takes precedence over Styles and Themes and may impact theme styling. - Fields: Label: Control label typography and color, Short Label: Configure short‑label typography and color, Placeholder: Customize placeholder text appearance - Next: Element-level label alignment lets you set a different label position for each field, instead of applying one global alignment to the whole form or survey. Use it to fine‑tune visual rhythm and spacing, especially in compact layouts. Full procedure: 1. Form: Adjust the form container’s borders, corners, and shadow 2. Input Field: Style the input elements themselves, including text and focus colors, borders and corners, width, padding, and shadows 3. Label: Control label typography and color 4. Short Label: Configure short‑label typography and color 5. Placeholder: Customize placeholder text appearance 6. Custom CSS: Add custom CSS for precise control. --- ## **Element-Level Label Alignment** Element-level label alignment lets you set a different label position for each field, instead of applying one global alignment to the whole form or survey. Use it to fine‑tune visual rhythm and spacing, especially in compact layouts.  Here is what you need to know before using Element-Level Label Alignment: - Available in Forms, Surveys, and Quizzes (only available for forms with the Single Column layout) - Existing forms retain their global alignment unless explicitly updated at the field level - Applies to standard fields such as text inputs, drop downs, radios, and more - On mobile, alignment automatically defaults to Top, ensuring a clear, user-friendly layout regardless of desktop settings ### **How to set Element-Level Label Alignment** 1. In the Form or Survey Builder, select a single field 2. In the right sidebar that pops up, locate **Label Alignment** 3. From here, select the desired label alignment for that element using the Arrows (Top, Left, Right or Form Default) ![How to set Element-Level Label Alignment (image 5 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054087925/original/NpDjnZgtei4aDFmaUUA8AmL5pN6yXZ0acg.png) **How to set Element-Level Label Alignment (image 5 of 5)** This screenshot appears in the "How to set Element-Level Label Alignment" section of "Right Sidebar in Form and Survey Builder". The text alongside this image reads: In the Form or Survey Builder, select a single field In the right sidebar that pops up, locate Label Alignment From here, select the desired label alignment for that element using the Arrows (Top, Left, Right or Form Default). This part of the guide covers 2 fields, listed below. Immediately after, the guide continues: Q: Do changes in the Right Sidebar save automatically? No, click Save in the builder to commit your changes. - Where to go: In the Form or Survey Builder, select a single field In the right sidebar that pops up, locate Label Alignment From here, select the desired label alignment for that element using the Arrows (Top, Left, Right or Form Default) - Fields: In the Form or Survey Builder, select a single field, In the right sidebar that pops up, locate Label Alignment - Controls: Label Alignment - Next: Q: Do changes in the Right Sidebar save automatically? No, click Save in the builder to commit your changes. Full procedure: 1. In the Form or Survey Builder, select a single field 2. In the right sidebar that pops up, locate Label Alignment 3. From here, select the desired label alignment for that element using the Arrows (Top, Left, Right or Form Default) --- ## **Frequently Asked Questions** **Q: Do changes in the Right Sidebar save automatically?** No, click Save in the builder to commit your changes. **Q: Will changing Themes later overwrite my detailed styling?** A new Theme can reset parts of the visual style. Re‑check your Styles after switching. Custom CSS still overrides Themes and Styles, so review CSS for conflicts. **Q: How do I quickly test different theme presets without losing my current look?** After applying a new theme to your form or survey, you can revert to the pervious look by hitting the Back button in the upper-right corner of the builder. **Q: What happens to per‑field label alignment if I switch the layout to Two Column or Single Line?** Element-Level label alignment is only available in Single Column. Switching layouts removes per‑field control and the labels will default back to the default setting. **Q: If I change the global label alignment later, what happens to fields I already set?** Fields set to Form Default update to the new global automatically. Fields explicitly set to Left/Right/Top keep their per‑field choice. --- ## **Related Articles** - [Forms, Surveys & Quizzes: Inline Editing](https://docs.ghlcustomercare.com/docs/sites/forms/forms-surveys-quizzes-inline-editing) - [Mobile Editor for Forms, Surveys, and Quizzes](https://docs.ghlcustomercare.com/docs/sites/forms/mobile-editor-for-forms-surveys-and-quizzes) - [How to Quickly Add and Edit Custom Fields in Forms and Surveys](https://docs.ghlcustomercare.com/docs/sites/forms/how-to-quickly-add-and-edit-custom-fields-in-forms-and-surveys) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com