Contact Form 7 Styling Questions.

IMHO, you’re asking to much.

Basically, you need to style the form with CSS.

Rounded Corners
https://www.w3schools.com/css/css3_borders.asp

1. Please add this to your Contact Form 7 code, then update the form. I’ll add styles to it once I can actually see it.

<h2 class="form-title">Discover if you're a candidate!</h2>

.

2. You can remove the (required) text in your form 7 code. It’s pretty obvious on the form setting page.

As for the styling:

.wpcf7-form p {
    font-weight: 700;
    color: #4c7c9c;
    font-size: 18px;
    margin-bottom: 20px;
}

.

3. You really should add some class to your form elements, man. That would make it much easier to style them.

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

.

4. Change the min-width & max-width as you see fit.

.wpcf7 {
    width: 100%;
    min-width: 200px;
    max-width: 600px;
    margin: 0 auto;
}

.

5. If you’ve applied all the codes above, then your submit button would have been fixed already (meaning it’s now inside the form). This is additional styles to make it green and all that fun stuffs:

.wpcf7-form input.wpcf7-form-control.wpcf7-submit {
    background-color: #9dc145;
    font-size: 36px;
    font-weight: 700;
    padding: 25px 20px; /* Spacing around the text, the order of the number is padding: TOP/BOTTOM RIGHT/LEFT; */
    border-radius: 10px; /* The rounded corner, bigger number = more rounded */
}

.

6.

This makes the check boxes stay next to each other:

/* checkbox */
.wpcf7-form span.wpcf7-list-item {
    display: inline-block;
    width: auto;
    margin-left: 0; /* spacing to the left */
    margin-right: 15px; /* spacing to the right */
}

/* checkbox label */
.wpcf7-form span.wpcf7-list-item-label {
    width: auto;
}

If you want to make them stay on the same line as the paragraph text, then you need to remove the <br> code in that paragraph (check your form 7 code page for it), then add this code:

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

.

7. The form already has rounded corner. Could you please clarify on this?

.

And done! Yay!

ThePixelMe thank you so much!!! Its real close.

Between the time I saw your post I started to add some classes to the p’s in the contact 7 form editor.

The only thing I am stuck on is something is overriding the width of the fields.

I notice when I leave out these last two adjustments the width works:

/* checkbox label */
.wpcf7-form span.wpcf7-list-item-label {
width: auto;
}

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

Noah helped me with the rounded corners ..thank you Noah!

Thank you for all your help. So awesome!

Check it out its real close.

Dang I think I broke it. Can’t get the checkboxes to stay on the same line. I had it working. https://www.hitsthespotmedia.com/landing-page

I am not sure what is canceling each other out.

Since you got the classes, you can add your classes to the original code; you also need to add some more styles because switching to classes might have left out a few elements.

So now that you’ve named that area .text_checkboxes, the .wpcf7-form part is not even necessary any more. Let’s go with this code:

/* checkboxes */
p.text_checkboxes span.wpcf7-list-item {
    display: inline-block;
    width: auto;
    margin-left: 15px ; /* spacing to the left */
    margin-right: 0; /* spacing to the right */
}

/* checkbox label */
p.text_checkboxes span.wpcf7-list-item-label {
    width: auto;
}

/* checkbox wraper */
p.text_checkboxes span.wpcf7-form-control-wrap {
    width: auto;
}

/* spacing with the next element */
p.text_checkboxes {
    margin-bottom: 20px;
}

ThePixelMe you rock!!! Thank you so much.

The only thing I am having trouble with now is styling the button. I tried adding a class to the <p> the submit button is in in the form but I couldn’t get it to work so I removed the class.

I will leave this page up for others who are struggling to customize their Contact 7 Form for reference in case it helps anyone out. https://www.hitsthespotmedia.com/landing-page

The classes I named are:
p.form_title
p.form_name
p.text_checkboxes

You will have to assign these to your existing <p>s in your form for this to work exactly like mine.

/* Contact Form 7 Styles
———————————*/

.wpcf7 {
background-color: #bee6ff;
border: 1px solid #98b8cc;
border-radius: 10px;
width: 420px;
}

.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 10px;
}

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

.wpcf7-submit {
text-align: center;
background: #555555;
color: #ffffff;
font-size: 36px;
font-weight: 700;
}

p.form_title {
font-family: Arial, Verdana;
font-size: 24px;
font-weight: 900;
color: #006e99;
margin: 0px;
padding: 0px;
margin-bottom: 12px;
}

p.form_name {
font-family: Arial, Verdana;
font-size: 18px;
font-weight: 300;
color: #006e99;
line-height: 150%;
margin: 0px;
margin-bottom: 22px;
}

p.text_checkboxes {
font-size: 14px;
color: #006e99;
}

textarea {
height: 80px;
resize: none;
}

.wpcf7-form span.wpcf7-list-item {
display: inline-block;
width: auto;
margin-left: 0;
margin-right: 15px;
}

.wpcf7-form p.text_checkboxes span.wpcf7-list-item {
display: inline-block;
width: auto;
margin-left: 15px ;
margin-right: 0;
}

.wpcf7-form p.text_checkboxes span.wpcf7-list-item-label {
width: auto;
}

.wpcf7-form p.text_checkboxes span.wpcf7-form-control-wrap {
width: auto;
}

.wpcf7-form p.text_checkboxes {
margin-bottom: 20px;
}
———————————*/

If anyone sees something to make this code cleaner in case things are being repeated or whatever, please share.

Thank you again ThePixelMe!!!!!!

The only thing I am having trouble with now is styling the button. I tried adding a class to the <p> the submit button is in in the form but I couldn’t get it to work so I removed the class.

Styles for button, without adding a custom class to it:

.wpcf7-form input.wpcf7-form-control.wpcf7-submit {
    background-color: #9dc145;
    font-size: 28px;
    font-weight: 700;
    padding: 15px; /* Spacing around the text */
    border-radius: 10px; /* The rounded corner, bigger number = more rounded */
}