Left align submit button with text fields

  • Hello there,

    I’m sure this is an easy fix, however, I’ve tried all the possibilities I can think of, and yet the submit button still sits way off on the right out of alignment with the text fields. I’d like to align it left. I know it’s picking up my pre-existing CSS which floats all submit buttons to the right, but I want to be able to JUST align the contact form submit button to the left, not all my other submit buttons. Is there some easy way to do this that I’ve been overlooking? I tried adding something like:

    .input.wpcf7-submit a. button {
    float: left;
    }

    to the CSS but it didn’t work. I also tried adding it within the plugin’s CSS, but this also didn’t work. At this point, I’d really appreciate some possible solutions. Thanks again guys!

    website: https://www.thepeacetribe.com

    (check under the ‘contact’ tab to see what I mean)

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)

  • Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    ??Note: I’d avoid using float: left; to override any float: right; styling, as this can cause flow on effects in following elements. Rather try to use float: none; with sufficient CSS Specific?ity to over-ride the existing styles.

    .wpcf7-submit{
    float: left;
    clear: both;
    margin-bottom: 20px;
}

    try this if you are still looking for a solution

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Left align submit button with text fields’ is closed to new replies.