Title: Label alignment issue
Last modified: August 2, 2024

---

# Label alignment issue

 *  Resolved [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/)
 * (@justanothertechbro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/)
 * I am trying to create a contact form like the one in the footer. The problem 
   I can’t get the label alignment working. In addition, is there a way to make 
   the submit bottom center in relationship to the bottom message box.
   I try to 
   insert css styling by following this guide [Styling contact form | Contact Form 7](https://contactform7.com/styling-contact-form/)
   but just treat it as text
 * “Editing CSS style sheets is the best method to style contact forms.”
 * Which css style sheets is the article referring to
 *     ```wp-block-code
       <label> Name[text* your-name autocomplete:name] </label><label> Number [tel* tel-323] </label><label> Email[email* your-email autocomplete:email] </label><label> Division [text* text-692] </label><label> Message [textarea* textarea-290] </label>[submit "Submit"]
       ```
   
 * [Imgur: The magic of the Internet](https://imgur.com/a/svTyn69)
   I tried the Ultimate
   Addons for CF7 Options and still can’t get the “textbox” to align
 * [Imgur: The magic of the Internet](https://imgur.com/a/CWWfkJY)
    -  This topic was modified 1 year, 10 months ago by [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/).
    -  This topic was modified 1 year, 10 months ago by [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/).
    -  This topic was modified 1 year, 10 months ago by [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/).

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

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17930631)
 * Where can we see the website in question?
 *  Thread Starter [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/)
 * (@justanothertechbro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17936489)
 * [@takayukister](https://wordpress.org/support/users/takayukister/) Sorry for 
   the late reply.
 * [https://jaysmetalstructural.com/contact-us/](https://jaysmetalstructural.com/contact-us/)
   is the test page. It looks like it is working, but as soon as I put it in the
   footer, it is a completely different story. The space between the text input 
   box is significantly larger than the form in contact-us form
 *  Thread Starter [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/)
 * (@justanothertechbro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17936697)
 * The full code for the footer in case that will help
 * EDIT: Moved the location of the shortcode removed the space but can’t get the
   label to align with the text input box and the submit button to align with the
   message box
 * EDIT: I am also trying to get the bottom margin all align.
 * EDIT: moving the location of the short code resulted in this error
 * [https://imgur.com/a/j1vz1Er](https://imgur.com/a/j1vz1Er)
 *     ```wp-block-code
       <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} --><div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:columns {"align":"wide"} --><div class="wp-block-columns alignwide"><!-- wp:column {"width":"30%","layout":{"type":"default"}} --><div class="wp-block-column" style="flex-basis:30%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} --><div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} --><h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Contact Us</h2><!-- /wp:heading -->[contact-form-7 id="2c5ab04" title="Contact Us"]<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group"><!-- wp:shortcode --><!-- /wp:shortcode --></div><!-- /wp:group --></div><!-- /wp:group --></div><!-- /wp:column --><!-- wp:column {"width":"20%"} --><div class="wp-block-column" style="flex-basis:20%"></div><!-- /wp:column --><!-- wp:column {"width":"50%"} --><div class="wp-block-column" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} --><div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} --><div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} --><h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">About</h2><!-- /wp:heading --><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} --><div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} --><!-- wp:navigation-link {"label":"Team","url":"#"} /--><!-- wp:navigation-link {"label":"History","url":"#"} /--><!-- wp:navigation-link {"label":"Careers","url":"#"} /--><!-- /wp:navigation --></div><!-- /wp:group --></div><!-- /wp:group --><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} --><div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} --><h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Privacy</h2><!-- /wp:heading --><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} --><div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} --><!-- wp:navigation-link {"label":"Privacy Policy","url":"#"} /--><!-- wp:navigation-link {"label":"Terms and Conditions","url":"#"} /--><!-- wp:navigation-link {"label":"Contact Us","url":"#"} /--><!-- /wp:navigation --></div><!-- /wp:group --></div><!-- /wp:group --><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} --><div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} --><h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Social</h2><!-- /wp:heading --><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} --><div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} --><!-- wp:navigation-link {"label":"Facebook","url":"#"} /--><!-- wp:navigation-link {"label":"Instagram","url":"#"} /--><!-- wp:navigation-link {"label":"Twitter/X","url":"#"} /--><!-- /wp:navigation --></div><!-- /wp:group --></div><!-- /wp:group --></div><!-- /wp:group --></div><!-- /wp:column --></div><!-- /wp:columns --></div><!-- /wp:group -->
       ```
   
    -  This reply was modified 1 year, 10 months ago by [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/).
      Reason: some improvement
    -  This reply was modified 1 year, 10 months ago by [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/).
    -  This reply was modified 1 year, 10 months ago by [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/).
 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17937738)
 * What other plugins and theme do you use on the site?
 *  Thread Starter [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/)
 * (@justanothertechbro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17939002)
 * [@takayukister](https://wordpress.org/support/users/takayukister/) I only use
   the default theme [Twenty Twenty-Four](https://wordpress.org/support/theme/twentytwentyfour/)
   and all the plugins I am using
 * [https://imgur.com/a/VXXoGqL](https://imgur.com/a/VXXoGqL)
 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17940146)
 * So, what problems do you have now? I don’t see any label alignment issue [on the page](https://jaysmetalstructural.com/contact-us/).
 *  Thread Starter [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/)
 * (@justanothertechbro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17941255)
 * [@takayukister](https://wordpress.org/support/users/takayukister/) I migrated
   current issue to [Mobile Alignment and email user input | WordPress.org](https://wordpress.org/support/topic/mobile-alignment-and-email-user-input/)
 * Brief summary is my approach of label alignment does not work under mobile device.
   In addition, I can’t get email message to work properly

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

The topic ‘Label alignment issue’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [additional information](https://wordpress.org/support/topic-tag/additional-information/)
 * [form](https://wordpress.org/support/topic-tag/form/)

 * 7 replies
 * 2 participants
 * Last reply from: [justanothertechbro](https://wordpress.org/support/users/justanothertechbro/)
 * Last activity: [1 year, 10 months ago](https://wordpress.org/support/topic/label-alignment-issue/#post-17941255)
 * Status: resolved