Label alignment issue

  • Resolved justanothertechbro

    (@justanothertechbro)


    3 months, 4 weeks ago

    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 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

    <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

    I tried the Ultimate Addons for CF7 Options and still can’t get the “textbox” to align

    Imgur: The magic of the Internet

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter justanothertechbro

    (@justanothertechbro)

    @takayukister Sorry for the late reply.

    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

    (@justanothertechbro)

    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

    <!-- 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 -->
    Plugin Author Takayuki Miyoshi

    (@takayukister)

    What other plugins and theme do you use on the site?

    Thread Starter justanothertechbro

    (@justanothertechbro)

    @takayukister I only use the default theme Twenty Twenty-Four and all the plugins I am using

    https://imgur.com/a/VXXoGqL

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    So, what problems do you have now? I don’t see any label alignment issue on the page.

    Thread Starter justanothertechbro

    (@justanothertechbro)

    @takayukister I migrated current issue to Mobile Alignment and email user input | www.remarpro.com

    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)
  • You must be logged in to reply to this topic.