Contact Form 7 多行acceptance标签左对齐问题求助

Hey there! I’ve run into this exact issue with Contact Form 7’s acceptance fields before—when the label wraps to a second line, it defaults to aligning under the checkbox instead of the start of the first line. Let’s fix that with a couple of straightforward CSS solutions:

Solution 1: Absolute Positioning for Precise Control #

This method locks the checkbox in place and ensures label text wraps cleanly to the first line’s starting point:

/* Target the acceptance field container */
.wpcf7-acceptance {
  position: relative;
  /* Add left padding to make space for the checkbox */
  padding-left: 24px;
  /* Optional: Adjust line height for better text spacing */
  line-height: 1.5;
}

/* Position the checkbox absolutely within the container */
.wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  left: 0;
  /* Adjust top value to vertically align checkbox with text */
  top: 3px;
}

Solution 2: Flexbox for Responsive Alignment #

If you prefer modern, responsive-friendly code, flexbox keeps the checkbox and label aligned while handling text wrapping seamlessly:

.wpcf7-acceptance {
  display: flex;
  /* Align items to the top so checkbox stays with the first line */
  align-items: flex-start;
  gap: 8px; /* Space between checkbox and label */
  line-height: 1.5;
}

/* Prevent checkbox from shrinking in the flex container */
.wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px; /* Fine-tune vertical alignment */
}

How to Apply the CSS #

1. Head to your WordPress dashboard → Appearance → Customize
2. Navigate to the Additional CSS section
3. Paste either code block above (tweak padding/margin values to match your site’s styling)
4. Click Publish and test your form!

You can adjust the padding-left, top, or margin-top values to get the perfect alignment for your checkbox size and text font.

内容的提问来源于stack exchange，提问作者Tom Endres