Contact Form 7 with Enfold Styles

Hello – my query is for styling with CSS on similar topic to above – using contact form 7.
So far I have added this Quick CSS as below and it mostly looks fine. I used a combination of your ideas above and some from this Tutorial video:- https://www.youtube.com/watch?v=bKarC0QO5og

/* Submit Button CSS Styles */
.wpcf7 input[type=submit] {
padding:15px 45px;
background:#FCE228;
color:#232323;
font-size:16px;
font-weight:bold;
border:0 none;
cursor:pointer;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* Submit Button CSS Hover Styles */
.main_color input[type=’submit’]:hover {
background-color: #232323;
color: #FCE228;
}

/* Label Text Styles */
.wpcf7 label {
padding: 0 0 10px 0;
font-size: 20px;
color:#232323;
}

I want to style further as follows:- Numbered to help your reference :).

1. Make the NAME and EMAIL input fields on same line when the browser width permits. This is how the old Enfold Contact form worked by default. Here’s a screen shot showing ENFOLD default above and CF7 below. I assume it will need to default to stacked on top of each other for mobile view as it does now.

2. My CSS above wasn’t able to add more padding below the label. I tried 20, 40 etc – but it looked just the same. Assuming 20px is the bottom padding?

3. How to add the styling to make the input boxes like my enfold screenshot – with borders coloured #232323 – and with the same rounding as enfold – assume 3px radius?

4. [EDIT- FOUND SOLUTION TO THIS NOW! ] How to add a thin coloured ( #232323) border to the Send button – as I had on the old Enfold contact form? There was also a border colour on the button Hover CSS above but I found it didn’t seem to do anything.

Hope you can help with the above. Much appreciated.

Pete

my website contact form page is here:-

• This reply was modified 6 years, 7 months ago by premedia.

HI Victoria – thanks for getting back to me.
Your code above did a great job for the input boxes, border colours and fixed the problem I was having when adding padding above the box/below the label :).

STILL OUTSTANDING:
One of the key things I was trying to do was my query number 1. – how to make the CF7 Name and Email input boxes sit alongside each other on a desktop screen (just like they do on my Enfold form screenshot ) and then stack on top of each other as they also do with Enfold contact form for mobile? My contact page is split 2/3 for the form on the left and 1/3 for the yellow block on the right (although the RH yellow block moves below the contact form on mobile view.

Hope you can help

thanks

Pete

• This reply was modified 6 years, 7 months ago by premedia.

Thanks so much Victoria! thats a really clever bit of CSS!

I’ve set it at 1368px – just wider than iPad pro screen horizontal.
It works fine apart from a couple of small things:-

1. On the wide desktop version where the name and email are side by side – the space between that line and the SUBJECT line below seems to be wider than when the 2 fields are stacked on top of each other.

2. Also on desktop perhaps the gap/padding above the Name/Email line is wider making a large gap between that line on desktop view and the bulleted text above. Ideally I would like the gaps above/below field to be consistent between desktop and mobile.

3. The CSS you provided to create black field borders is being carried into the Enfold Search field. Is there a way I can restrict this border styling to the CF7 form?

Here’s the full quick CSS i have for this contact page at the moment including your latest fixes.

/* CF7 Submit Button CSS Styles */
.wpcf7 input[type=submit] {
padding:15px 45px;
background:#FCE228;
color:#232323;
font-size:16px;
font-weight:bold;
border:1px solid #232323;
cursor:pointer;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* CF7 Submit Button CSS Hover Styles */
.wpcf7 input[type=submit]:hover {
background-color: #232323;
color: #FCE228;
border:1px solid #232323;
}

/* CF7 Label Text Styles */
.wpcf7 label {
padding: 0 0 10px 0;
font-size: 20px;
color:#232323;
}

/* CF7 File Upload Button CSS Styles */

.wpcf7 input[type=file] {
padding:0px 0px;
background:none;
color:#000;
font-size:14px;
border:none;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* CF7 Input Field Heights */
.wpcf7 input[type=text] {height:40px;}
.wpcf7 input[type=email] {height:40px;}

/* CF7 Input Field border and radius */
#top .main_color .input-text,
#top .main_color input[type=’text’],
#top .main_color input[type=’input’],
#top .main_color input[type=’password’],
#top .main_color input[type=’email’],
#top .main_color input[type=’number’],
#top .main_color input[type=’url’], #top .main_color input[type=’tel’],
#top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select {
border-color: #232323;
border-radius: 3px;
margin-top: 5px;
}

/* CF7 name and email Fields alongside but not on mobile */
@media only screen and (min-width: 1368px) {
#top .wpcf7-form-control-wrap.your-name input[type=text] {
width: 95%;

}
.wpcf7-form div + p, .wpcf7-form div + p + p {
width: 50%;
float: left;

}
.wpcf7-form div + p + p {
clear: right;
}

}

————-
I also have some styling on the ENFOLD search button etc from some previous work as below:-

/* ENFOLD Search Button and Hover CSS Styles */

#searchsubmit {
background-color:#fce228!important;
}
#searchsubmit {
color:#232323!important;
}
#searchsubmit:hover{
background-color:#232323!important;
}
#searchsubmit:hover {
color:#fce228!important;
}

Thanks for your help :)

Pete