Multi Column Layouts

The Multi Column/Grid module allows you to create responsive multi-column layouts for your Contact Form 7 forms. This module provides an easy way to organize form fields in columns without complex CSS.

Step 1: Create a Row

• In your CF7 form editor, click the Insert Tag button
• Find and click Row from the tag generator list
• Configure the row settings:
  • Gap (px): Space between columns (default: 16px)
  • CSS Class: Additional CSS classes (optional)
• Click Insert Tag

This generates: [lfcf7-row gap:16][/lfcf7-row]

Step 2: Add Columns

• Place your cursor inside the row shortcode
• Click Insert Tag again
• Find and click Column from the tag generator list
• Configure the column settings:
  • Column Width: Choose from predefined widths:
    • Full Width (100%)
    • Half Width (50%)
    • One Third (33%)
    • Two Thirds (67%)
    • Quarter (25%)
    • Three Quarters (75%)
  • CSS Class: Additional CSS classes (optional)
  • Click Insert Tag

This generates: [lfcf7-col width:50%][/lfcf7-col]

Step 3: Add Form Fields

Place your Contact Form 7 field shortcodes inside the column shortcodes:

[lfcf7-row gap:20]
[lfcf7-col width:50%]
[text* your-name placeholder "Your Name"]
[/lfcf7-col]
[lfcf7-col width:50%]
[email* your-email placeholder "Your Email"]
[/lfcf7-col]
[/lfcf7-row]

Custom Gap Sizes

You can set custom gap sizes between columns:

[lfcf7-row gap:30]
[lfcf7-col width:50%]Field 1[/lfcf7-col]
[lfcf7-col width:50%]Field 2[/lfcf7-col]
[/lfcf7-row]

Custom CSS Classes

Add custom CSS classes for additional styling:

[lfcf7-row gap:20 class:my-custom-row]
[lfcf7-col width:50% class:highlight-column]
[text* your-name placeholder "Your Name"]
[/lfcf7-col]
[lfcf7-col width:50%]
[email* your-email placeholder "Your Email"]
[/lfcf7-col]
[/lfcf7-row]

Best Practices

1. Always Use Rows

• Every column must be inside a row container
• Rows define the gap between columns

2. Choose Appropriate Widths

• 50%: Perfect for two-column layouts
• 33.33%: Ideal for three-column layouts
• 25%: Great for four-column layouts
• 75% + 25%: Good for main content + sidebar

3. Consider Mobile Responsiveness

• Columns automatically stack on mobile devices
• Use appropriate gap sizes for mobile viewing

4. Keep It Simple

• Don’t overcomplicate your layouts
• Test your forms on different screen sizes

Technical Details

Generated HTML Structure

The module generates clean, semantic HTML:

<div class="lf-row" style="--lf-gap: 20px;">
  <div class="lf-col" style="width: 50%;">
    <!-- Your form fields here -->
  </div>
  <div class="lf-col" style="width: 50%;">
    <!-- Your form fields here -->
  </div>
</div>

CSS Classes

• .lf-row: Container for columns
• .lf-col: Individual column
• Custom classes: Added via the CSS Class option

Responsive Behavior

• Columns automatically stack on mobile devices
• Gap spacing is maintained across all screen sizes
• No JavaScript required for responsive behavior

Troubleshooting

Columns Not Displaying Side by Side

Problem: Columns are stacking vertically instead of side by side.

Solution:

1. Ensure columns are inside a row: [lfcf7-row]...[/lfcf7-row]
2. Check that column widths don’t exceed 100% total
3. Verify the module is enabled in Lean Forms settings

Gap Not Working

Problem: No space between columns.

Solution:

1. Make sure you’re using the row shortcode with a gap value
2. Check that the gap value is a positive number
3. Try increasing the gap value: gap:30

Form Fields Not Appearing

Problem: Form fields are missing from the frontend.

Solution:

1. Ensure form fields are placed inside column shortcodes
2. Check that Contact Form 7 shortcodes are valid
3. Verify the form is published and active

Mobile Considerations

The grid system is fully responsive:

• Desktop: Columns display side by side
• Tablet: Columns may stack depending on width
• Mobile: Columns always stack vertically for better usability

Styling Tips

Custom Gap Colors

Add custom CSS to style the gap area:

.lf-row {
  background-color: #f0f0f0;
}

Column Borders

Add borders to columns:

.lf-col {
  border: 1px solid #ddd;
  padding: 15px;
}

Responsive Adjustments

Customize behavior for different screen sizes:

@media (max-width: 768px) {
  .lf-col {
    width: 100% !important;
    margin-bottom: 10px;
  }
}