My form fields are not fully inline after enabling the inline form option - Code Parrots

Knowledge Base

My form fields are not fully inline after enabling the inline form option

Article Last Updated: March 4, 2021

We’ve done our best to calculate the form field and submit button widths. Unfortunately, each theme acts differently. While some themes work perfectly fine out of the box, others may not and will cause the submit button to drop below the form fields.

In case your theme does not calculate the form fields properly, you’ll need to make a tiny CSS tweak to your theme. What were going to do, is make the submit button narrow, to ensure that it fits on the same line as the other form fields.

Example:

Inline Form Option Inaccuratley Calculating Widths.

.yikes-easy-mc-form .submit-button-inline-label {
   width: 15% !important;
}

If you are unsure of how to make edits to your themes style.css file, we highly recommend using a third party plugin such as Simple Custom CSS.

You may need to play with the percent value for your specific theme, as there is no magic number that will work with all themes. Keep in mind there is a minimum width of 90px set on the submit button, so if your % value causes the submit button below 90px. IF that’s the case, you’ll need to adjust the width of the form fields, which have the class .yikes-easy-mc-form label.label-inline.

Results:

Inline Form with Custom CSS Fix