CODEWITHSUNDEEP
htmlcsswordpresscontact-form-7
Devilism
Devilism

Reputation: 157

Adjust width of text field in contact form 7

I am new to WordPress . I used a plugin contact form 7, And I need to adjust its width of fields. for now it is 100 % width.

By doing some google I came to know that I need to edit custom CSS for this and I added these lines but still nothing

input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}

And i am using avada theme

Upvotes: 1

Views: 31070

Answers (7)

Gustavo Oliveira
Gustavo Oliveira

Reputation: 1

Is simple, add "size:number" in locate:

[text* your-name autocomplete:name size:80 class:form-control]

Upvotes: 0

Constantine Anastasiades
Constantine Anastasiades

Reputation: 13

The example bellow is for Contact form 7 Wordpress - Inside form edit section - Use "80/" or "40/" depends the size you want Or 80x10 for textarea

<label> name
    [text* your-name autocomplete:name **80/**] </label>

<label> email
    [email* your-email autocomplete:email **80/**] </label>

<label> subject
    [text* your-subject **80/**] </label>

or

<label> name
    [text* your-name autocomplete:name **80/**] </label>

<label> email
    [email* your-email autocomplete:email **80/**] </label>

<label> subject
    [text* your-subject **80x10**] </label>

Upvotes: 0

Theo
Theo

Reputation: 43

If you wanna adjust all your fields to be 100 % width, you can simply use this css:

input {
 width: 100%;
}

If you need to specify certain fields:

input[type="text"] {
 width: 100%;
}

As mentioned, there's a styling guide.

Upvotes: 3

Atish Dipankar Baidya
Atish Dipankar Baidya

Reputation: 31

I have solved the problem using this:

.wpcf7-form.init label{width:100%; max-width:inherit;}

Upvotes: 3

muya.dev
muya.dev

Reputation: 975

It might not work because the plugin css styles are overridden by other styles. You might need to either add !important to your property as shown below.

input[type="text"] {
  background-color: #fff;
  color: #000;
  width: 50% !important;
}

This is usually not recommended see this article https://uxengineer.com/css-specificity-avoid-important-css/.

The best approach is to add a class or id before the css style to apply the styling only to that element. See the full code below:

#form_container_with_contact_form input[type="text"] {
    background-color: #fff;
    color: #000;
    width: 50%;
}

Upvotes: 1

Adri&#225;n S&#225;nchez
Adri&#225;n S&#225;nchez

Reputation: 26

input[type=text], #respond textarea, .post-password-form input[type=password], .wpcf7-form-control.wpcf7-date, .wpcf7-form-control.wpcf7-number, .wpcf7-form-control.wpcf7-quiz, .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
    width: 59%;
    margin-bottom: 24px;
    padding: 17px 30px;
    border: 1px solid #ccc;
    outline: 0;
    font-size: 15px;
    color: #797979;
    font-family: "Crimson Text",serif;
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

You have to change the "width" element, in percentage.

Upvotes: 1

sani
sani

Reputation: 230

Inspect the text field on browser and apply the same style to the class assigned to the input as per scope. I think the contact form input usually has a class name "input". Something like this might help

.et_pb_contact p input
{
background-color: #fff;
color: #000;
width: 50%;
}

Upvotes: 0

Related Questions