Menu icon Foundation
Postfix submit button out of place when using labels

Has anyone else experienced this problem?

Submit button is out of place when using labels. Need to use a label for the button to keep it in line.

Any recommended solutions?

<!--Input Form-->
      <form class="row" data-abide method="post" action="send_form_email.php" name="contactform" autocomplete='off'>
      <fieldset>
        <!--Name input-->
        <div class="row">
        <div class="small-5 column">
          <label>What shall we call you?</label>
          <input name="text" type="email" placeholder="First">
        </div>
        </div>
        <!--Email Input-->
        <div class="row collapse">
        <div class="small-9 medium-10 columns">
          <label>How can we stay in touch?</label>
          <input name="email" type="email" placeholder="[email protected]">
          <small class="error">An email address is required.</small>
        </div>
        <div class="small-3 medium-2 columns">
          <label>label</label>
          <input type="submit" value="Sign-Up" class="button postfix">
        </div>
        </div>
      </fieldset>
      </form>
            

         

Screenshot1

Screenshot2

buttonsformscontact form

Has anyone else experienced this problem?

Submit button is out of place when using labels. Need to use a label for the button to keep it in line.

Any recommended solutions?

<!--Input Form-->
      <form class="row" data-abide method="post" action="send_form_email.php" name="contactform" autocomplete='off'>
      <fieldset>
        <!--Name input-->
        <div class="row">
        <div class="small-5 column">
          <label>What shall we call you?</label>
          <input name="text" type="email" placeholder="First">
        </div>
        </div>
        <!--Email Input-->
        <div class="row collapse">
        <div class="small-9 medium-10 columns">
          <label>How can we stay in touch?</label>
          <input name="email" type="email" placeholder="[email protected]">
          <small class="error">An email address is required.</small>
        </div>
        <div class="small-3 medium-2 columns">
          <label>label</label>
          <input type="submit" value="Sign-Up" class="button postfix">
        </div>
        </div>
      </fieldset>
      </form>
            

         

Screenshot1

Screenshot2
Norbert Stüken over 5 years ago

Hello Ray,
I had the same problem. I solved it by moving the label to a new row prior to the row with the input field and the postfix button. In order to keep the relation to the input field, just add a "for"-attribute to the label and an "id"-attribute to the input field. Your code would look like this then:

<!--Email Input-->
<div class="row">
     <div class="small-12 columns">
          <label for="email">How can we stay in touch?</label>
     </div>
</div>
<div class="row collapse">
     <div class="small-9 medium-10 columns">
          <input name="email" type="email" id="email" placeholder="[email protected]">
          <small class="error">An email address is required.</small>
     </div>
     <div class="small-3 medium-2 columns">
          <input type="submit" value="Sign-Up" class="button postfix">
     </div>
</div>

Hope this helps.

Lyn over 5 years ago

Hey there,

You can also simply move your label 1 line above to make it behave like you want : http://jsfiddle.net/7dJZZ/3/

Regards,

Lyn.

Jota almost 5 years ago

      <input type="submit" value="Sign-Up" class="button postfix round">