Контактная форма 7 - Ввести одно поле на всю ширину

Question

Я очень доволен, я научился успешно создавать форму CF7 со столбцами. http://venturekitchen.co/ Это похоже на то, как я хочу, но не могу взломать эту последнюю вещь - я хочу, чтобы поле электронной почты было полной ширины, как поле сообщения.

Это код контактной формы 7, который у меня есть:

<div class="content-column one_half"><div style="padding:"0;"><label> Contact Name*
    [text* your-name] </label></div></div>

<div class="content-column one_half last_column" style="padding-bottom: 25px;"><label> Job Title*
    [text* job-title] </label></div><div class="clear_column"></div>

<div class="full_width"><div style="padding:0;padding-bottom:25px;"><label> Contact Email*
    [email* your-email] </label></div><div class="clear_column"></div>

<div class="content-column one_half"><div style="padding:"0;"><label> Company Name*
    [text* company-name] </label></div></div>

<div class="content-column one_half last_column" style="padding-bottom: 25px;"><label> Company Website*
    [url* CompanyWebsite] </label></div><div class="clear_column"></div>

<div class="three">
<div class="content-column one_third"><div style="padding:"0;"><label> Opportunity Type*
[select* OpportunityType "Fast Casual" "QSR" "Casual " "Food CPG"] </label></div></div>

<div class="content-column one_third"><div style="padding:"0;"><label> Revenue in Last 12 Months*
[select* Revenue "Pre-revenue" "0 — 250k" "250k — 1M" "1M — 3M" "3M — 5M" "5M — 10M" "10M+" "Not disclosed"] </label></div></div>

<div class="content-column one_third last_column" style="padding-bottom: 25px;"><label> Zip Code*
    [text* zip-code] </label></div><div class="clear_column"></div>
</div>

<div class="full_width"><div style="padding:"0;"><label> Description
<span style="font-size: 18px;">Business description and reason for reaching out to Venture Kitchen in 250 words or less.</span>
    [textarea description] </label></div><div class="clear_column"></div>

[submit "SUBMIT"]

В частности, код, на котором я сосредоточен, предназначен для поля электронной почты:

<div class="full_width"><div style="padding:0;padding-bottom:25px;"><label> Contact Email*
    [email* your-email] </label></div><div class="clear_column"></div>

Это CSS, который я связал с CF7:

.wpcf7-form {
    max-width: 800px;
    margin: 0 auto !important;
    font-family:'Bebas Neue';
    line-height: 1.1;
    font-size:22px;
    color:black;
}

.wpcf7-form-control.wpcf7-submit {
    background-color: black;
    border:none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius:0px;
    border-top-right-radius:0px;
    border-top-left-radius:0px;
    margin:0 auto !important;
    font-family: 'Bebas Neue';
    font-size:22px;
    letter-spacing:2px;
    padding-top:15px;
}

textarea {
    width:810px;
}
.three {
    max-width:600px;
}

Я рассмотрел добавление пользовательского класса JUST для поля ввода, но не могу понять, куда его поместить, попытался поместить пользовательский класс по всему разделу div для раздела электронной почты и затем сделать ширину: 810 пикселей, но не сработало. Любые другие предложения для этого?

Answer 1

Попробуйте поместить это перед закрывающим тегом поля ввода электронной почты в коде вашей контактной формы:

style="width:810px"

Пример:

<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" style="width: 810px;">

Я получаю это, когда добавляю это с помощью консоли в Chrome:

Answer 2

Вот что мы используем в нашей дочерней теме, чтобы сделать все поля на всю ширину контейнера.

span.wpcf7-form-control-wrap .wpcf7-date, span.wpcf7-form-control-wrap .wpcf7-quiz, span.wpcf7-form-control-wrap .wpcf7-number, span.wpcf7-form-control-wrap .wpcf7-select, span.wpcf7-form-control-wrap .wpcf7-text, span.wpcf7-form-control-wrap .wpcf7-textarea {
    width: 100%;
}

span.wpcf7-form-control-wrap {
    width: 100%;
}

Answer 3

попробуй потаскать так

 [text* your-name class:your-class]