• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

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

Question

azazz    0

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>';
    }
}
    }
?>

post-539998-0-24203100-1424956242.jpg

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
ashpowell    81

Just make the error have position absolute 

Share this post


Link to post
Share on other sites
  • 0
pqt    275

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.

Share this post


Link to post
Share on other sites
  • 0
ashpowell    81

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

Share this post


Link to post
Share on other sites
  • 0
pqt    275

Bootstrap columns are relative, so would work fine

 

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

Share this post


Link to post
Share on other sites
  • 0
ashpowell    81

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

 

Only thing I do use atm I love it lol

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.