I am trying to make the form fields for a Contact Form 7 form to align to the left of the page (piehole.costatechnologies.com 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;
}
FORM SOURCE CODE
<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>
<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="" />
</div>
<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>
</div>
