Back to Community
Home / Community / General

Fixing Checkbox Alignment Issues in MetForm

11 threads Sep 9, 2025

Content

Getting your form checkboxes to align neatly, especially when you want them in multiple horizontal rows, is a common challenge for MetForm users. This guide will explain why this happens and provide the most effective solutions.

Why Checkbox Alignment Can Be Difficult

By default, the MetForm checkbox widget is designed to display options in a single column (vertically) or a single row (horizontally). The widget's core settings do not include a built-in multi-column grid layout, which is why simply adjusting padding and margin often fails to produce the desired, clean alignment across multiple rows.

Common Solutions for Checkbox Alignment

1. Use the Vertical Layout Option

The simplest solution is to use the widget's built-in vertical layout. This stacks all checkbox options neatly on top of each other in a single column.

  • Edit your form in Elementor.
  • Select the Checkbox widget.
  • In the widget's Layout section, choose the Vertical option from the 'Checkbox Style' dropdown.

2. Custom CSS for a Horizontal Multi-Row Grid

If a vertical layout doesn't fit your design, you can create a custom horizontal grid using CSS. This method provides greater control over the appearance.

  1. In your WordPress dashboard, navigate to Appearance > Customize > Additional CSS.
  2. Paste the following CSS code snippet. You may need to adjust the width and margin values based on your theme and the number of columns you want. 
    .mf-input-wrapper .mf-checkbox-list.horizontal {
    display: flex !important;
    flex-wrap: wrap !important;
}
.mf-input-wrapper .mf-checkbox-item {
    width: 30% !important; /* Adjust this percentage for column width */
    margin-right: 3% !important; /* Adjust for spacing between items */
}
  3. Publish the changes.

Important Considerations

  • Theme & Plugin Conflicts: Custom CSS can sometimes be overridden by your theme or other plugins. If the CSS doesn't work immediately, you may need to use more specific CSS selectors or investigate potential conflicts.
  • Responsive Design: When using custom CSS, always test how your checkboxes look on mobile devices. You may need to add additional media queries to ensure the layout stacks correctly on smaller screens.

While not a native feature, combining the widget's options with some custom CSS is the most reliable way to achieve professional, aligned checkbox rows in your MetForm forms.

Related Support Threads Support