Align Contact Form 7 to left inside a widget?

I am trying to make the form fields for a Contact Form 7 form to align to the left of the page ( is the site). I think this can be accomplished with custom CSS, but I cannot find the correct CSS to make this happen. The form is in a “Contact Section for FrontPage” widget. What CSS directive should I be using here? I’m attaching a screenshot showing the problem, where the form fields appear to be aligned right.

/* Contact Form 7 Styles
.wpcf7-form {
margin-left: 0px;

<h1>Sign Me Up - I Want One!</h1><p class=“mb64”> Pi-Hole dramatically improves the web browsing experience by blocking ads and preventing trackers. If you are interested in purchasing Pie-Hole upon release, please complete the form below. You will be notified via email when the product is available. </p> </div>
<div class=“row”>
<div class=“col-md-4”>
<div class=“col-md-8”>
<div role=“form” class=“wpcf7” id=“wpcf7-f12-o1” lang=“en-US” dir=“ltr”>
<div class=“screen-reader-response”></div>
<form action="/#wpcf7-f12-o1" method=“post” class=“wpcf7-form mailchimp-ext-0.4.51” novalidate=“novalidate”>
<div style=“display: none;”>
<input type=“hidden” name="_wpcf7" value=“12” />
<input type=“hidden” name="_wpcf7_version" value=“5.1.1” />
<input type=“hidden” name="_wpcf7_locale" value=“en_US” />
<input type=“hidden” name="_wpcf7_unit_tag" value=“wpcf7-f12-o1” />
<input type=“hidden” name="_wpcf7_container_post" value=“0” />
<input type=“hidden” name=“g-recaptcha-response” value="" />
<p><label> First Name: (required)<br />
<span class=“wpcf7-form-control-wrap first-name”><input type=“text” name=“first-name” value="" size=“40” class=“wpcf7-form-control wpcf7-text wpcf7-validates-as-required” aria-required=“true” aria-invalid=“false” /></span> </label></p>
<p><label> Last Name: (required)<br />
<span class=“wpcf7-form-control-wrap last-name”><input type=“text” name=“last-name” value="" size=“40” class=“wpcf7-form-control wpcf7-text wpcf7-validates-as-required” aria-required=“true” aria-invalid=“false” /></span> </label></p>
<p><label> Your Email Address: (required)<br />
<span class=“wpcf7-form-control-wrap your-email”><input type=“email” name=“your-email” value="" size=“40” class=“wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email” aria-required=“true” aria-invalid=“false” /></span> </label></p>
<p><label> Comments:<br />
<span class=“wpcf7-form-control-wrap your-message”><textarea name=“your-message” cols=“40” rows=“10” class=“wpcf7-form-control wpcf7-textarea” aria-invalid=“false”></textarea></span> </label></p>
<p><input type=“submit” value=“Send” class=“wpcf7-form-control wpcf7-submit” /></p>
<div class=“wpcf7-response-output wpcf7-display-none”></div><p style=“display: none !important”><span class=“wpcf7-form-control-wrap referer-page”><input type=“hidden” name=“referer-page” value=“direct visit” class=“wpcf7-form-control wpcf7-text referer-page” aria-invalid=“false”></span></p>
<!-- Chimpmail extension by Renzo Johnson --></form></div> </div>

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

#shapely_home_contact-2 .col-md-4 {
display: none;
shapely_home_contact-2 .col-md-8 {
width: 100%;

and if you want to center form use this code:

div#wpcf7-f12-o1 {
width: 50%;
margin: 0 auto;

Colorlib Support Team

Thanks, Noda. This works perfectly. I appreciate your help here.

Thank you, If you’re happy with our service, don’t forget to rate us: [Shapely] Reviews |