Bootstrap inline form error text doesn't line up with input field.

[azazz]

I have a bootstrap inline form that I am using with php. Its working however when the form validation error text displays it messes up my inline form.

The error text does not line up with the input fields.

The form is at the below url. 

http://www.kinectwebdesign.com/test_folder/Test.php

 

I hope I have entered everything ok, my brain is tired from this and it's my first time here.

I have attached a pic of what it looks like.

My code is this:

<form  class="form-inline" role="form" method="post" action="/test_folder/Test.php">
    <div class="form-group ">
        <label for="name" class="sr-only control-label">Name</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" minlength="3" id="name" name="name" placeholder="First Name" value="" required>
           <span class='text-danger'></span>        </div>
    </div>
    <div class="form-group">
        <label for="email" class="sr-only control-label">Email</label>
        <div class="col-sm-4">
            <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="" required>
           <span class='text-danger'></span>        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="sr-only control-label">Phone</label>
        <div class="col-sm-4">
            <input type="tel" class="form-control" name="phone" pattern=".{8,10}" placeholder="AU00000000"   value="" required> 
           <span class='text-danger'></span>        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4">
            <input id="submit" name="submit" type="submit" value="Get quote" class="btn btn-info">
        </div>
    </div>
       <div class="form-group">
        <div class="col-sm-12">
              
        </div>
    </div>
</form> 

<?php
    if ($_POST["submit"]) {
        $name = $_POST['name'];
        $email = $_POST['email'];
		$phone = $_POST['phone'];
        $from = 'Demo Contact Form'; 
        $to = 'admin@kinectwebdesign.com'; 
        $subject = 'Message from Contact Demo ';
        
        $body = "From: $name\n E-Mail: $email\n phone:\n $phone";
 
        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your name';
        }
        
        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Please enter a valid email address';
        }
        
        //Check if message has been entered
        if (!$_POST['phone']) {
            $errPhone = 'Please enter your phone';
        }
        
 
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errPhone) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch shortly.</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
    }
}
    }
?>

[ashpowell]

Just make the error have position absolute 

[pqt]

Three potential ideas

1. Display the error above the form in a stand-alone error
2. Since you're only checking for an input rather than the format of an input, you could adjust the field to read the error as a placeholder and use the bootstrap styling to adjust the colour scheme of the input to error
3. Display a Tooltip or alternatively a popover

Otherwise you could add the 'required' attribute to the input field to avoid submission entirely without a valid entry.

 

Just make the error have position absolute 

 

Depends entirely on whether or not the columns are relatively positions (they are if memory serves me right) but I personally wouldn't do that in this case.

[ashpowell]

Three potential ideas

1. Display the error above the form in a stand-alone error
2. Since you're only checking for an input rather than the format of an input, you could adjust the field to read the error as a placeholder and use the bootstrap styling to adjust the colour scheme of the input to error
3. Display a Tooltip or alternatively a popover

Otherwise you could add the 'required' attribute to the input field to avoid submission entirely without a valid entry.

 

 

Depends entirely on whether or not the columns are relatively positions (they are if memory serves me right) but I personally wouldn't do that in this case.

 

 

Bootstrap columns are relative, so would work fine

[pqt]

Bootstrap columns are relative, so would work fine

 

Haven't used it in a while but that makes sense

[ashpowell]

Haven't used it in a while but that makes sense

 

Only thing I do use atm I love it lol