• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials CSS Styles

Limit Contact Form Widths in Genesis Themes

June 23, 2015 Updated on November 23, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email
stylized input forms


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.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    Very (VERY!) well written and easy to understand Marcy. Thank you for taking the time to explain basic gripes that affect us all. You have a way of identifying the most common issues we have with WordPress (Genesis) and then explaining the fixes (with options) in a clear, patient and precise manner.

    Thank you!

    Reply
    • Marcy Diaz says

      Thank you, Marcus! I’m glad you found the post helpful!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework