• 0

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


Question

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

post-539998-0-24203100-1424956242.jpg

Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
ashpowell

Just make the error have position absolute 

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
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

Link to post
Share on other sites
  • 0
pqt

Bootstrap columns are relative, so would work fine

 

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

Link to post
Share on other sites
  • 0
ashpowell

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

 

Only thing I do use atm I love it lol

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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save 73% off the Interactive Learn to Code Bundle - now just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle. Kick off your career as an expert web developer & designer with 69+ hours of content on Java, HTML, CSS3, APIs, and more.



      What's the deal?
      This deal consists of the following courses:

      The Complete 2020 HTML5 CSS3 Course with Flexbox, Grid & SASS
      Acquire Fundamental Skills You Need to Become One of the Most Sought-After Web Developers Modern Web Design Complete HTML & CSS
      Learn HTML, CSS, & JavaScript and Create Web Pages from Scratch The Ultimate HTML Developer
      Learn HTML/HTML5 & Put Your Skills Into Practice by Creating an Entire Web Page Build Responsive Real-World Websites with CSS3 v2.0
      Learn CSS3 Flexbox, Animations, Transitions, Transformations & Responsive Design Create an 8-Bit Website
      Create an 8-Bit Style Website from Scratch with Just HTML & Some Basic CSS Understanding APIs & RESTful APIs Crash Course
      An Introduction on How APIs & RESTful APIs Work — No Coding Involved JavaScript for Beginners: Learn with 6 Main Projects
      Everything You Need to Become a Confident JavaScript Developer Git Essentials: The Step-by-Step Guide to Git & GitHub Mastery
      Master the Daily Git Workflow That Every Developer Uses JavaScript Essentials
      The Basis of JavaScript Including Programming Fundamentals You Can Use in Vue.js, React.js & Node.js Python for Everybody: The Ultimate Python 3 Bootcamp
      Learn Python from A to Z & Become a Ninja Python Coder Web Design JavaScript Front-End Code Course
      Explore How to Write JavaScript Code to Create Interactive & Dynamic Web Pages Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This 2020 Ultimate Web Developer & Design Bootcamp Bundle normally costs* $2,200, but you can pick it up for just $39.99 for a limited time - that represents a saving of $2,160.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 70% off Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 97% off the 2020 Learn to Code Full Stack Developer Certification Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off the 2020 Learn to Code Full Stack Developer Certification Bundle. Become a high-earning web developer with 50+ hours of instruction from top-tier instructors, including Rob Percival and John Elder.



      What's the deal?
      This deal consists of the following courses:

      Microsoft SQL Server & T-SQL Course For Beginners
      Understand the Benefits of SQL & Earn Big Bucks as a Skilled Developer Learn C# by Building Applications
      Understand the Concepts of C#6 &C#7 and Use Them to Build Real World .NET Console Apps Beginner Object-Oriented Programming in C# & .NET Core
      Climb Up the Developer Hierarchy by Mastering Object-Oriented Programming & Its Fundamental Concepts Using MySQL Databases with Python
      Learn MySQL Database with Python the Fast & Easy Way with John Elder HTML Programming for Everyone
      Learn to Build Awesome Websites Using HTML & the Bootstrap CSS Framework Intro to PHP for Web Development
      Learn PHP for Web Development & Become a Backend Coder in No Time The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples with Rob Percival Advanced Python Training
      Go from Complete Beginner to a Python Language Expert Learn Angular by Creating a Web Application
      Master this Popular Web Dev Framework by Building an Interactive Virtual Cookbook Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This 2020 Learn to Code Full Stack Developer Certification Bundle normally costs* $1,650, but you can pick it up for just $38.99 for a limited time - that represents a saving of $1,611.01 (97%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By News Staff
      Save 73% off a lifetime license to Blueprints Website Builder
      by Steven Parker

      Today's highlighted deal comes from our Apps & Software section of the Neowin Deals store, where for only a limited time, you can save 73% off a lifetime license to Blueprints Website Builder. Instantly build websites with 200 examples pages, 500 responsive blocks, 30+ navigation panels and more — No coding knowledge required!



      What's the deal?
      Do slow web design workflows prevent you from reaching your goals? That's where the Blueprints app by Bootstraptor comes in! Blueprints is a turbo prototyping tool for website ideation that will help you burn through your wire-framing time with holy fire. Simplify your work using 500+ ready-made blocks, 200+ prototype starter templates, and 30+ navigation panels. Not only easy without code, this website builder is also SEO-oriented with every page of the theme getting 96+ on Google PageSpeed Insights. The pages are also automatically adapted. This means you can view your site on any device and it will surely look great!

      Easily customize your website w/ 00+ ready-made blocks, 200+ prototype starter templates & 30+ navigation panels Boost your searchability thanks to its SEO-oriented nature, 96+ on Google PageSpeed Insights View your website on all devices: desktops, tablets & 500+ ready-made blocks, 200+ prototype starter templates, and 30+ navigation panelshones Export ready-to-web publishing HTML flat file in 1 sec Good to know
      Length of access: lifetime (no expiry) Redemption deadline: redeem your code within 30 days of purchase This plan is only available to new users For terms, specifications, and license info please click here.

      What's the benefit?
      A lifetime license to Blueprints Website Builder normally costs* $149, but it can be yours for just $39 for a limited time, that's a saving of $110 (73%) off!

      >> Get it now, or learn more about it <<
      See all of our current Apps + Software deals. This is a limited-time sale!

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By News Staff
      Save 98% off this Ultimate Adobe CC Training Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can save 98% off* this Ultimate Adobe CC Training Bundle. Level up your Adobe skills and create captivating photos, graphics, UI, and more with 12 Adobe courses.



      What's the deal?
      This bundle consists of the following courses:

      Photoshop Efficiency: Techniques for Consistent Marketing
      Use Photoshop to Repurpose Your Designs Across Multiple Media & Formats

      Adobe Illustrator CC: Advanced Training
      Take a More Advanced Look at Adobe Illustrator

      UI/UX & Web Design Using Adobe XD
      Get Familiar with Adobe's Web Design Platform, Adobe XD

      Web UI/UX Design Using Adobe XD: Adobe Experience Design
      Create Beautiful User Interfaces & Streamlined User Experiences

      Dreamweaver Templates & JavaScript Menus
      Build a Portfolio Website Using Adobe Dreamweaver

      Adobe Illustrator CC: Essentials Training
      Learn How to Use Adobe Illustrator & Complete Real-World Projects

      Animate: HTML5 Banner Advertising in Adobe Animate
      Start Making HTML5 Banner Ads & Work Through the World of HTML5 Advertising

      After Effects: Animated Infographic Video & Data Visualisation
      Animate Infographics & Bring Potentially Boring Data to Life Using After Effects

      After Effects: Learn Motion Graphic Design
      How to Use After Effects for Motion Graphics & Infographics

      Adobe Photoshop CC: Advanced Training
      Learn Professional Workflows & Shortcuts to Save Hours Using Photoshop

      Adobe Photoshop CC: Essentials Training
      Everything You Need to Know to Get Started with Photoshop

      Adobe InDesign CC: Advanced Training
      Take a More Advanced Look at Adobe InDesign

      Good to know
      Length of time users can access this course: 1 year Certificate of completion included Redemption deadline: redeem your code within 30 days of purchase For full details, terms, and instructor info, click here.

      What's the benefit?
      The Ultimate Adobe CC Training Bundle normally costs* $2,400, but it can be yours for just $39 for a limited time, that's a saving of $2,361 (98%) off.

      >> Get this deal, or learn more about it <<
      See all of the discounted Online Courses on offer · This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.