djrichiez

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!!!!!!

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.

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.