The fields are too small

Ok I use the Avada theme and it allows me a number of options when laying out my page. I can divide the page with containers of varying widths. I recommend for what I’m about to suggest that you try to use a full width container as an experiment…

OK So I have just fought a personal battle to learn how to control my form. As a result I have created a two column CF7 form. You might want to create what I have and see if it helps you, or if you can adjust parameters to get what you want.

Good luck, I hope that you have complete control over your form at the end of this ??

OK so here is the form code:

<div class=”clearfix”>
<div id=”Culeft” >
[text* id:CuFirstName First-name placeholder “First Name”] <br/>
[text* id:CuLastName last-name placeholder “Last Name”] <br/>
[select* FindUs id:CuFindUs “How Did You Find Us?” “Recommendation” “Marketing Material” “Google” “Facebook” “Twitter” “Pinterest” “Houzz” “MySpace”]
</div>
<div id=”Curight”>
[email* id:CuYemail your-email placeholder “Email Address”] <br/>
[text* id:CuYphone your-phone placeholder “Phone Number”] <br/>
[select* HelpYou id:CuHelpYou “How Can we help you?” “General Enquiry” “Curtains” “Blinds” “Lighting” “Renovation” “Fabrics and Wallpaper” “Furniture” “Upholstery” “Property Staging” “Design Consultation”]
</div>

<div id=”CuUserMessage”>
<br/>[text Subject id:CuSubject placeholder "Subject"] <br/>
[textarea* Message id:CuMessage placeholder “Type your message here”]
</div>
</div>
[recaptcha id:CuCaptcha] [submit id:CuSubmit “Send Message”]

Paste that into an empty CF7 form. Then add this CSS to your custom css code, usually in your child theme:

/* ————————————————————————–*/
/* ————- Contact Form 7 Contact Us form Styling ——-*/
/* ————————————————————————–*/

/* Create 2 columns with Divs and then set their widths and float them */
/* Create a third Div to layout the full width subject and message fields */
/* Then clear the floats so as not to affect the non column elements */
/* Next place the captcha and submit button side by side */
/* Styling the submit button */
/* Set the edges of the form and its background colour */

/* Set the position and width of the left column */
#Culeft {
width: 32%;
float: left;
margin-top:5%;
margin-Left:15%;
margin-right:6%;
}

/* Set the position and width of the right column */
#Curight {
margin-top:5%;
width: 32%;
margin-right:15%;
float: left;
}

/* This clears the floats of the first two Div groups so that
Fresh placement can take place for the last one and the
ReCaptcha and Submit button */

.clearfix:after {
content:”\0020″;
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}

/* Put everything back as blocks of text */
.clearfix {
display:block;
}

/* Set the input box height for text and email fields */
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
{
height:25px;
}

/* Set the styling for the dropdown boxes */
#CuFindUs,#CuHelpYou{
height:30px;
font: 100% forum, Helvetica, sans-serif;
width: 90%;
font-size:16px;
line-height: 18px;
border: solid 1px #9f9f9f;
border-radius:8px;
box-shadow: inset 1px 1px 2px #bababa;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

/* Set the styling for all input fields */
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 Select,
.wpcf7 textarea {
font: 80% forum, Helvetica, sans-serif;
width: 90%;
color:#000000;
font-size:16px;
line-height: 16px;
border: solid 1px #9f9f9f;
border-radius:8px;
box-shadow: inset 1px 1px 2px #bababa;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

/* Place the ReCaptcha where I want it and use display and float to
Put the Submit button on the same row */
#CuCaptcha {
Margin-left:15%;
display: inline-block!important;
Float: Left!important;
Margin-bottom:5%;
}

/* Control the Submit Button */
#CuSubmit {
/* Button placement */
Margin-left: 5%!important;
margin-bottom:5%;
Margin-top:1%;
/* Button Styling */
background-color: #a8a8a8!important;
border: 1px solid WHITE!important;
border-radius: 27px!important;
transition: all 0.23s ease-in-out 0s;
color: #ffffff!important;
cursor: pointer;
font-size: 16px;
font-weight: bold;
/* Drop Shadow */
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

}
/* Sets the color when hovering over the submit button */
#CuSubmit:hover {
background-color: #d3d3d3!important;
color: #000000!important;
}

/* CuUserMessage is the third DIV group in the form and so
We are setting the format for Subject and Message box together */
#CuUserMessage {
width: 70%;
float: left;
margin-Left:15%;
margin-right:6%;
}

/* Set the background color and curved edges for the form */
.wpcf7-form{
background-color: #f7f8f9;
border-radius:27px;
text-align: center;
Width 80%;
}

/* Change Colour when Clicking the Submit button */
.wpcf7 input.wpcf7-submit:active{
top: 1px;
color: #d8c6e2;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#737074), to(#737074));
background: -moz-linear-gradient(top, #737074, #737074);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#737074′, endColorstr=’#737074′);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#737074, endColorstr=#737074)"
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* CF7 Message Responses */
.wpcf7 .wpcf7-validation-errors{
border:none;
color:White;
background-color:#6d6d6d;
margin:0;
padding:20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok{
border:none;
background-color:#a2d083;
margin:0;
padding:20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng{
border:none;
background-color:#ffffff;
margin:0;
padding:20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: white;
}

.wpcf7 span.wpcf7-not-valid-tip{
border:none;
background-color:#6d6d6d;
padding:10px;
padding-left: 15px;
padding-right: 15px;
border-radius:10px;
width: 180px;
color: white;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

/* ————————————————————————–*/
/* —— End of Contact Form 7 Contact Us form Styling —-*/
/* ————————————————————————–*/

thanks for the answer but where do i copy all of this code ??
it does not work on the css sheet

• This reply was modified 7 years, 11 months ago by ugur31.

The first section should go into a blank contact form 7 form.

So in my theme I have a section for Custom CSS, I use the Avada theme and in my WordPress dashboard under the avid theme there is a custom CSS option.

That is where I put the second section, the CSS code.

I don’t know where in your theme you will find that section, sadly. You may have to Google to check if it is not obvious.

All the best,
Sam