I'm having trouble centering Contact Form 7 on my page!

[core365]

Hi, I’m working on a site and I’ve created a global block element with a temporary email signup and I’ve adapted Contact Form 7 so the button is on the same row as a field, but I can’t figure out how to then center it on the page! I hope you don’t mind taking a look for me, I’ll put the CSS for your reference below:

Here’s the CSS I’ve used on the form itself:

<div class="clearfix">
<div id="left">
[email* your-email "Enter your email"]
</div>
<div id="right">
[submit "Subscribe"]
</div>
</div>

I’ve then added in some CSS to the global block:

input.wpcf7-form-control.wpcf7-submit {
  font-family: "Raleway",sans-serif;
  font-weight: 700;
  font-size: 1.4em !important;
  text-shadow: none;
  padding: 0.45em 0.85em 0.4em;
  border: none;
  color: rgb(61,61,61);
}
input.wpcf7-form-control.wpcf7-submit:hover {
  text-shadow: none;
  color: #fff;
  background-color: #435a69;
}
.wpcf7 input[type="email"] {
  font-size: 16px;
  color: #000;
    font-family: "Open Sans",sans-serif;
}
.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
  border: solid 2px rgb(190,190,190);
}
#left {
    width: 40%;
    float: left;
    margin-right:3%;
  margin-left: 10%;
}
#right {
    float: left;
}
.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
.clearfix {
    display:block;
}
form {
  margin: 0;
}

I’ll put the URL of the page it’s on in a secure note as it’s on a temp link at the minute!

Thanks!

[mldarshana]

Hi There @core365

Thanks for writing in! Increase #left width to ‘50%’ from your above code.

#left {
    width: 50%;
}

Then add the following CSS rules as well into your X -> Theme Options -> CSS area.

.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
}

That should center your form.

Note: Customizations are out of the scope of our support. Since you already have added your own customizations it may conflict as well. So I recommend to use our solution as a guidance only and then change according to your requirement.

Hope that helps.

[christian]

Hey @core365,

Your #left should not have a margin and its width should be around like 60%. Your #right should float right and the submit button in it should span 100%. Your clearfix div should also be inline block and lastly, you would most probably need a media query for mobile like this code below. Please watch the video in the secure note to understand what I mean.

@media (max-width: 955px) {
    #left,
    #right {
        width: 90% !important;
        float: none;
    }
}

Please note that what I’ve given here serves only as a guide. This is beyond the scope of our support and if issues arise from the use of this guide and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[core365]

Hi @christian_y

That’s great, thank you, it’s spot on! I really appreciate the time taken to do the video too, it made it much easier to understand!

Thank you soooooooo much!

[christian]

You’re welcome. I’m glad it helped.