Limit Contact Form Widths in Genesis Themes

A number of Genesis child themes set the default styles for form fields (your contact form) to a width of 100%. This makes a nice mobile-friendly form on phones or tablets. On larger screens, it may not be the look you want for your contact form, especially if your child theme is full-width.

You can make a few quick edits to the “Forms” section of your style.css to limit contact form widths. I’ll be using the Genesis Sample theme, but you’ll find the same section in most of the child themes.

Note that there may be additional styles added to your theme for specific forms plugins. I prefer using Ninja Forms because they use my theme styles, and it’s easy to add additional styles, if I want to do more.

Inputs and Text Areas

The first code section defines the styles for the input (for name and email fields), select (for the category or archive drop down), and textarea (for the contact form message area).

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-weight: 300;
	padding: 16px;
	width: 100%;
}

If you want to make the input (for name and email fields) less wide than full-width (100%), you can add this just below the code above.

input {
	max-width: 450px;
}

If you use select field in your contact form, you may want to add it to the above CSS, as well.

If you also want to limit the width of the textarea, you can add this instead.

textarea {
	max-width: 800px;
}

You can adjust these widths so it looks best to you. For instance if you want all your input fields to be the same width, but don’t want them to be 100% for full-width pages, you could use:

input,
select,
textarea {
max-width: 700px;
}

Form Submit Buttons

Usually the submit buttons will be set to a width of auto, which generally works well for most forms. The submit button sizes itself to accommodate the button text.
This is the code section with the submit button in the Genesis Sample theme.

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	background-color: #333;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	padding: 16px 24px;
	text-transform: uppercase;
	width: auto;
}

If you don’t like the look of the auto width, you can adjust the width or even add a max-width for each of these selectors, as well. If you do add a max-width, make sure that it accommodates the text width on all your submit buttons.

Comment Form Below Posts

In the “Comments” section of style.css, you’ll find the styles for the comment form.

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 50%;
}

Using 50% for the width, allows the comment form to scale, the 50% width for the input fields may be too small on a phone. You can change these so that they’re 100% with a max-width of 450px, like you did for the contact form.

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 100%;
	max-width: 450px;
}

The nice thing about setting a max-width in pixels, instead of percent, is that you really don’t need to adjust the width again at smaller screen sizes. The fields will automatically be full width at small screen sizes.

There you have it — a few quick edits to the “Forms” section of your style.css to limit contact form widths in Genesis themes.