Submit button too close to form - Bootstrap

Question

The submit button of the form tends to be soo close to the field for some reason. I am using Bootstrap by the way.

Code:

<div class="row" >
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form class="form-group" role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
    <input type="email" class="form-control" name="email" value="$email" id="email">
    <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div

The site has other forms in other pages and all, and doesnt really had the problem. Not sure why is it happening for this one.

Note : closing <form> just before the button fixes the issue, but then it wont submit since the button is no longer the part of the form.!

Looking to find whats wrong in the code, rather than a hack fix in the css.

This is how it looks.

FIX : In the code, made <div class="form-group"> and ended the div before the input button. Fixed it. Fixed Codes, just incase come here from Google with similar issue :

<div class="row" >
<div class="col-xs-6">
<h3 class="page-header">Contact Email</h3>
<div class="form-group">
<form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
<input type="email" class="form-control" name="email" value="$email" id="email">
</div>
<button type="Submit" class="btn btn-success pull-right">Submit</button>
</form>
</div>

Answer 1

Wrap your input in an element with the form-group class. This class souldn't be on the form itself as you currently have it...

<div class="row">
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
      <div class="form-group">
        <input class="form-control" name="email" value="$email" id="email" type="email">
      </div>
      <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div>

DEMO

Answer 2

See the demo

Standard rules for the form layouts:

Always use <form role="form"> (helps improve accessibility for people using screen readers) Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) Add class .form-control to all textual <input>, <textarea>, and <select> elements like, for eg:

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

For your case, it should be like,

<div class="row" >
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
     <div class="form-group">
    <input type="email" class="form-control" name="email" value="$email" id="email">
     </div>
    <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div>