Logo
Logo

Comment Form

The Comment Form element allows users to add a comment section to their website with customizable styling options. Users can adjust the container settings, form fields, typography, and spacing to match their site’s design. This element also includes advanced settings for responsiveness and additional customization for form components like the submit button and stepper navigation.

Design Controls

Container

These controls allow you to style the overall container of the comment form. You can adjust its width, background color, padding, borders, and shadow to fit the design of your website.

  • Width – Set the width of the container.
  • Background – Choose a background color for the container.
  • Padding – Customize the padding inside the container.
  • Borders – Configure the border settings for the container.
    • Radius – Set the border radius to create rounded corners.
    • Styling – Choose the border style for the container.
    • Shadow – Add a shadow effect to the container.

Form

These controls let you style the form fields, labels, and overall layout. Customize spacing, background colors, borders, shadows, and focus styles to ensure the form fits your site’s design.

  • Spacing – Adjust the spacing around form elements.
    • Between Fields – Set the space between form fields.
    • After Label – Set the space after labels.
    • Sub Label – Adjust the space below the sub labels.
  • Fields – Customize the appearance of the form fields.
    • Background – Choose a background color for the fields.
    • Borders – Configure border settings for the fields.
      • Radius – Set the border radius for the fields.
      • Styling – Choose the border style for the fields.
      • Shadow – Add a shadow effect to the fields.
    • Focused – Customize the appearance of focused fields.
      • Background – Set the background color for focused fields.
      • Border – Choose a border color for focused fields.
      • Shadow – Add a shadow effect to focused fields.
    • Padding – Customize the padding inside the fields.
    • Placeholder – Set the placeholder text color.
    • Required – Customize the required field indicator.
      • Color – Choose a color for the required field indicator.
      • Size – Set the size of the required field indicator.
      • Nudge X – Adjust the horizontal position of the required field indicator.
      • Nudge Y – Adjust the vertical position of the required field indicator.
    • Advanced – Access advanced field customization options.
      • Hide Labels – Toggle the visibility of field labels.
      • Radio & Checkbox – Customize radio buttons and checkboxes.
        • Size – Set the size of radio buttons and checkboxes.
        • Color – Choose a color for radio buttons and checkboxes.
      • File Input – Customize file input fields.
        • Drag & Drop – Configure drag & drop settings for file input.
          • Text – Set the text color for drag & drop file input.
          • Link – Choose a color for drag & drop file input links.
          • Background – Set the background color for drag & drop file input.
          • Border Color – Choose a border color for drag & drop file input.
          • Icon Color – Set the icon color for drag & drop file input.
          • Padding – Adjust the padding for drag & drop file input.
          • Active – Customize the appearance of active drag & drop file input.
            • Text – Set the text color for active drag & drop file input.
            • Link – Choose a link color for active drag & drop file input.
            • Background – Set the background color for active drag & drop file input.
            • Border Color – Choose a border color for active drag & drop file input.
            • Icon Color – Set the icon color for active drag & drop file input.
          • Files List – Customize the list of uploaded files.
            • Space Between – Set the space between uploaded files.
            • Background – Choose a background color for the files list.
            • Delete Color – Set the color for the delete icon in the files list.
            • Padding – Adjust the padding for the files list.
            • Borders – Configure border settings for the files list.
              • Radius – Set the border radius for the files list.
              • Styling – Choose the border style for the files list.
              • Shadow – Add a shadow effect to the files list.
            • Typography – Set the typography for the files list.
        • Button – Customize the file input button settings.
          • Size – Configure the size of the file input button.
            • Size – Choose the size of the file input button.
            • Padding – Adjust padding for the file input button.
            • Override Width – Set a specific width for the file input button.
            • Full Width At – Define the breakpoint for a full-width button.
          • Background – Set the background color for the button.
          • Outline – Toggle the button outline.
          • Color – Choose a color for the button outline.
          • Width – Set the width of the button outline.
          • No Fill On Hover – Toggle fill on hover effect for the button.
          • Typography – Customize the button typography.
          • Corners – Set the corner style for the button.
          • Corner Radius – Adjust the corner radius for the button.
          • Effects – Configure effects for the button.
            • Transition Duration – Set the duration of button transitions.
            • Scale On Hover – Adjust the button’s scale on hover.
            • Shadow – Add a shadow effect to the button.
          • Icon – Configure the icon settings for the button.
            • Icon – Choose an icon for the button.
            • Position – Set the position of the button icon.
            • Size – Define the size of the button icon.
            • Color – Set the color of the button icon.
            • Space Before – Adjust the space before the icon.
            • Space After – Adjust the space after the icon.
            • Hover Transform – Set a hover transform effect for the icon.
      • Quantity Input – Customize the quantity input fields.
        • Max Width – Set the maximum width for the quantity input.
        • Background – Choose a background color for the quantity input.
        • Typography – Set the typography for the quantity input.
        • Borders – Configure the border settings for the quantity input.
          • Radius – Set the border radius for the quantity input.
          • Styling – Choose the border style for the quantity input.
          • Shadow – Add a shadow effect to the quantity input.
        • Padding – Adjust the padding for the quantity input.
        • Buttons – Customize the buttons in the quantity input.
          • No Overlap – Ensure the buttons do not overlap.
          • Between Inputs – Set the space between quantity input buttons.
          • Width – Define the width of the quantity input buttons.
          • Height – Set the height of the quantity input buttons.
          • Background – Choose a background color for the quantity input buttons.
          • Icon Color – Set the icon color for the quantity input buttons.
          • Icon Size – Define the icon size for the quantity input buttons.
          • Borders – Configure the border settings for the quantity input buttons.
            • Radius – Set the border radius for the quantity input buttons.
            • Styling – Choose the border style for the quantity input buttons.
            • Shadow – Add a shadow effect to the quantity input buttons.
          • Padding – Adjust the padding for the quantity input buttons.
          • Nudge – Adjust the position of the quantity input buttons.
            • X – Set the horizontal nudge for the quantity input buttons.
            • Y – Set the vertical nudge for the quantity input buttons.
      • Responsive – Configure responsive settings for the fields.
        • Full Width At – Define the breakpoint for full-width fields.
  • Typography – These controls allow you to style the text within the comment form, including labels, sub-labels, values, and links. Adjust typography settings to ensure the form text matches your website’s design.
    • Labels – Customize the typography for form labels.
    • Sub Labels – Set the typography for sub-labels.
    • Values – Adjust the typography for form values.
    • Links – Configure the typography for links within the form.
  • Messages – These controls let you style the messages displayed in the form, such as error and success messages. Customize background colors, borders, shadows, and typography to ensure these messages are clear and match your site’s design.
    • Space Above – Set the space above messages.
    • Padding – Adjust the padding for messages.
    • Error – Customize the appearance of error messages.
      • Background – Set the background color for error messages.
      • Borders – Configure border settings for error messages.
        • Radius – Set the border radius for error messages.
        • Styling – Choose the border style for error messages.
        • Shadow – Add a shadow effect to error messages.
      • Typography – Adjust the typography for error messages.
    • Success – Customize the appearance of success messages.
      • Background – Set the background color for success messages.
      • Borders – Configure border settings for success messages.
        • Radius – Set the border radius for success messages.
        • Styling – Choose the border style for success messages.
        • Shadow – Add a shadow effect to success messages.
      • Typography – Adjust the typography for success messages.
  • Submit Button – These controls let you customize the appearance and behavior of the submit button. Adjust alignment, styles, typography, and effects to ensure the button fits your form’s design and functions as needed.
    • Alignment – Set the alignment of the submit button.
    • Styles – Customize the styles for the submit button.
  • Other – These controls let you configure additional settings for the form, such as stepper navigation and responsiveness. Customize stepper appearance, button styles, and how the form behaves on different screen sizes.

Typography

These controls allow you to style the text within the comment form, including the title, text, and links. Adjust typography settings to ensure the form text matches your website’s design.

  • Title – Customize the typography for the form title.
  • Text – Set the typography for the form text.
  • Links – Configure the typography for links within the form.

Spacing

These controls manage the spacing around the Comment Form element, helping you to maintain a well-balanced and visually appealing layout. Adjust margins to ensure proper alignment with other page elements.

  • Margin Top – Set the top margin of the Comment Form element.
  • Margin Bottom – Set the bottom margin of the Comment Form element.