CODEWITHSUNDEEP
csswordpressformscontact-form-7
Emigriff
Emigriff

Reputation: 197

Contact Form 7 - Make input of one field full width

I am super stoked I learned how to create a CF7 form with columns successfully. http://venturekitchen.co/ It's close to looking exactly how I want but can't crack this last thing - I want the email field to be full width like the message field.

This is the contact form 7 code I have: 

<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"]

Specifically, the code that I am focused on is for the email field:

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

This is the CSS I have related to 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;
}

I looked into adding a custom class JUST for the input field but can't figure out where to put it, tried putting custom class around the whole div for email section and then making width: 810px but didn't work. Any other suggestions for this?

Upvotes: 0

Views: 16946

Answers (4)

somtam
somtam

Reputation: 377

You can avoid css and just set the size attribute.

<label> Email*
    [email* your-email size:100] </label>

Upvotes: 3

Trevor J
Trevor J

Reputation: 11

Try placing this before the closing email input field tag in the code for your Contact Form:

style="width:810px"

Example:

<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;">

I get this when I add this using Console in Chrome: screenshot

Upvotes: 0

ljvincent
ljvincent

Reputation: 43

Here is what we use in our child theme to make all fields full width of the container.

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%;
}

Upvotes: 1

Gustavo Chagas
Gustavo Chagas

Reputation: 359

try somenthing like that

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

Upvotes: 1

Related Questions