How adjust email field width and height in Contact form 7 in wordpress

June 23, 20230 Views

I am working on creating a blog in wordpress where I used a contact form 7 plugin. Here the email text box looking different. check here.

I am not aware of the coding stuff. How do I make email text box look like other text boxes? Please help me to solve this problem.

Post Views: 0

2 comments

Anonymous says:

June 23, 2023 at 4:02 am
The reason it currently looks different is this part of your CSS code (line 195 of wp-content/themes/simple-catch/style.css):
```
/* Form */
input[type=text], input.text, input.title, textarea, select {
    background-color:#fff;
    border: 1px solid #ccc;
    color:#aaa;
    padding:9px 10px;
    font-style:italic;
    width: 368px;
    box-shadow: 0 2px 2px #e5e5e5 inset;
    margin: 0 0 20px;
}
```
As you can see, the selector doesn’t include an input with a type of “email” and your email input doesn’t have a class text or title, so this rule isn’t triggered on the email field.

The solution is very simple – change the selector to something like this:
```
input[type=text], input[type=email], input.text, input.title, textarea, select {
```
Now the styling should be applied on the email input as well as on the other text inputs.
Anonymous says:

June 23, 2023 at 4:02 am

Your plugin has applied the styles you see to input[type='email'] and not to input[type='text']

Do you have custom CSS plugin installed on your wordpress? If so, you need only give the same properties to input[type='email'] as are applied to input[type='text']. You can find these styles in developer mode in your browser

Comments are closed.