Longevity interaction with Contact Form 7 plug-in

I’m going to guess you are referring to the email field?

In this theme, I have this styling:

input[type="text"], select, textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 0.875rem;
    line-height: 1.42857143;
    color: #616161;
    background-color: #FFF;
    border: 1px solid #d9d9d9;
}

But it looks like I left out a few fields to adopt that styling. There is one thing you can do (which I will need to add to the next update for the theme, is to add a plugin like Simple Custom CSS and then in that, copy and paste this:

input[type="email"],
input[type="text"],
select,
textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 0.875rem;
    line-height: 1.42857143;
    color: #616161;
    background-color: #FFF;
    border: 1px solid #d9d9d9;
}

It adds the input type “email”.

Note: Using the Simple Custom CSS plugin will allow you to make custom CSS changes to your site/theme without losing them whenever there is an update.

By the way, that’s an amazing photo you are using for your banner image…it works really well.

Hi there,

Thanks for the tip on CSS editor. Wow, so much to lern.

Your code fixes one problem but creates another…the line height restriction compacts the message box (it was several lines high before). Eliminating that line of code lets the template/plug-in define the height of each…problem solved with everything else and it looks great!

Now I gotta install this on my other site and fix it there. Thanks a bunch for your help!

PS…also added it for input type “tel”. They have a bunch…wonder if there is a simpler way to code it for “any input via Contact Form 7”. that would be great.

Or basically, since it has to work with any theme/plug-in…”any input form” would be terrific!

You can actually override the height of the textarea field with the contact form settings, but the height of this field by default is set to “auto” in the theme and also has a resizer in the lower right corner.

textarea {
    height: auto;
}

To use Contact Form settings, you can refer to this link for the text area and other fields. Scroll part way down and it has a table of attributes you can add to your textarea field ??

Regarding your last PS reply, I have to humbly admit I could have done a much better way of styling the form elements. There is a way, but it would require changing how form buttons and perhaps a couple others to be modified. Example just using the global “input” could do it:

input,
select,
textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 0.875rem;
    line-height: 1.42857143;
    color: #616161;
    background-color: #FFF;
    border: 1px solid #d9d9d9;
}

Only problem is that other form elements that are “input” based would be affected…mostly form submit buttons.

You could try the method I just posted, plus add this for the submit buttons:

input[type="submit"] {
    width: auto;
}

If you make these new changes, make sure you keep a backup of your CSS before you do this in case you had to revert back.

But to get back to your PS and the reasoning behind it, you are correct. I’ve made my latest themes less restrictive with form styling, although there are still some elements from my older themes being used, ie Longevity. But the good news is that with my new theme I am finishing up this coming week, my form styling will be basic and universal without style conflicts…for reasons as you brought to my attention.

Thank you for your feedback too, because this is what makes my themes even better.