It appears that I either have trouble spacing correctly or making things stack either horizontally or vertically.
Still new to Bootstrap but I'm pretty happy with what I got so far. Currently I have this for my login form:
I would like to make my contact form the same way, vertically stacked. But here is what I end up with:
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact me!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<form role="form" class="navbar-form" action="" method="post">
<span>Your Name</span>
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
<span>Your Email</span>
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
<span>Your Message</span>
<textarea id="contact-message" class="form-control" placeholder="Your message..." required></textarea>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use form-groups. Just make sure you wrap your input in <div class="form-group"></div>:
<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>
Related
I'm trying to send a message to an email like in this code, once you click on "Enviar", your message goes to your email with the name, email and message info. I'm using this provider but it's not working: https://formsubmit.co/ this is the code:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Contáctanos</h4>
</div>
<div class="modal-body">
<form>
<form action="https://formsubmit.co/myemaiL#gmail.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email-1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</div>
</div>
</div>
</div>
</div>```
Hopefully someone can help me out, thanks!
The problem with your code is that submit button is outside <form> open and close tag. However the <form tag immediately after the modal-body class is not necessary
Your code should be like this
<form action="https://formsubmit.co/laide_lawal#yahoo.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email-1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</form>
I have created a register form inside a modal of index page , when user submit it, user gets directed to 2nd page which is confirmation through PHP.
If users gets an error it is necessary to go back to previous page and fill the whole form again, how can i save the values inputted by user recently and when he gets redirected to previous page he see the form but filled of his recent values
<div class="modal fade" id="registermodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"> x </span><span class="sr-only">Close</span></button>
<h3 class="modal-title text-center" id="lineModalLabel"> Register </h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form action="confirmation.php" method="POST" enctype="multipart/form-data">
<div id="cfirstname" class="form-group" style="float:left;width:45%;">
<label for="firstname"> First Name </label>
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off">
</div>
<div id="clastname" class="form-group" style="float:right;width:45%;">
<label for="lastname"> Last Name </label>
<input oninvalid="this.setCustomValidity('Please enter your last name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" autocomplete="off">
</div>
<div id="cemail" class="form-group" style="clear:both;">
<label for="email"> Email </label>
<input oninvalid="this.setCustomValidity('Please enter your email name')" oninput="setCustomValidity('')" required type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div id="ccategory" class="form-group" style="clear:both;">
<label for="category"> Category </label>
<input oninvalid="this.setCustomValidity('Category is Required')" oninput="setCustomValidity('')" required type="text" class="form-control" id="category" name="category" placeholder="Category" autocomplete="off"> <span class="help">Enter the category you are expert in </span>
</div>
<div class="form-group ">
<label for="Password"> Password </label>
<input oninvalid="this.setCustomValidity('Please enter a password)" oninput="setCustomValidity('')" required type="password" class="form-control" name="rpassword" id="password" placeholder="Password" autocomplete="off">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
</div>
<div class="form-group ">
<label for="Password">Confirm Password </label>
<input oninvalid="this.setCustomValidity('Please confirm your password')" oninput="setCustomValidity('')" required type="password" class="form-control" name="rcpassword" id="cpassword" placeholder="Repeat Password" autocomplete="off">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
<div id="cfblink" class="form-group">
<label for="fblink"> Facebook profile link </label>
<input type="text" class="form-control" id="fblink" name="fblink" placeholder="Facebook Link" autocomplete="off">
</div>
<div class="form-group">
<label for="ppic">Please upload an image of yourself</label>
<input class="btn btn-default" required="required" type="file" name="file" id="file">
<span id="cppic" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Image uploaded
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group" role="group">
<button type="submit" id="signup" name="signup" class="btn btn-default btn-hover-green" role="button"> Proceed </button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
well i found answer myself just put the variable as value input tag
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off" <?php echo 'value="'.$variable_name.'"'; ?> >
I have the following code on 2 pages:
<input class="btn btn-primary" type="button" value="Sign Up" data-toggle="modal" data-target="#myModal"/>
<!-- my modal dialog-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<form id="myform" action="add_user.php" method="POST">
<div class="form-group">
<input class="form-control" type="text" id="username" name="username" placeholder="Username"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-input" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-confirm-input" placeholder="Confirm Password" onblur=";"/>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="User Type"/>
</div>
<div class="form-group" id="msg">
<input class="form-control" type="text" name=email placeholder="E-mail Address"/>
</div>
<div>
<label id="label" for="male"></label>
</div>
<br>
<div class="form-group pull-right">
<input class="btn btn-success" type="submit" id="create_user2" value="Create User"/>
</div>
</form>
</div>
</div>
</div>
</div>
This code works on the index.php page, a modal dialog pops up.
in another page, dashboard.php, it does not.
I have the exact same button and modal code in the body tags
Be sure you have bootstrap JS references in both pages:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I need help i cant figure out why my modal login form is not conforming to any changes and doesn't look like the standard bootstrap form.
nav.php
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<p>Please log in below</p>
<form action="#" method="post" accept-charset="UTF-8">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<label class="label" for="user" style="color: black">Username</label></br>
<input id="user" type="text" name="user" size="30" class="input-large" placeholder="username" required/>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<label class="label" for="pass"style="color: black">Password</label></br>
<input id="pass" type="text" name="pass" size="30" class="input-large" placeholder="Password"required/>
</div>
</div>
<label class="string optional" for="user_remember_me"> Remember me</label> <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<input class="btn btn-success" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 6px;" type="submit" name="submit" value="submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
here is what it looks like
here is an example of what i want it to look like
The documentation is your friend. Forms, inputs, and their labels need form-group and form-control (among other classes) attached to them.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
First time posting here on Stackoverflow, can you guys tell me what's missing with this code? It's supposed to be a form but the "Submit" button does nothing. Thanks!
<div class="container">
<span class="reg"> <h1>Register Now</h1> </span>
<div class="row">
<div class="conent-part">
<div class="form-body">
<div class="fome-body">
<form>
<div class="row">
<div class="form-part">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email Address">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Nominee's Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Nominee's Email">
</div>
</div>
<div class="form-part">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Nominee's Sport">
</div>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Accomplishments"></textarea>
</div>
</div>
</div>
<div class="custom_btn">
<button type="button" class="btn btn-primary btn2">Submit</button>
</div>
</form>
Change
<div class="custom_btn">
<button type="button" class="btn btn-primary btn2">Submit</button>
</div>
To
<div class="custom_btn">
<button type="submit" class="btn btn-primary btn2">Submit</button>
</div>
By just typing type=button you're just telling us that its a button without stating a function for it.The type="submit" will automatically submit the form to the specified URL.
<button type="button">
has no default behaviour, if you want to submit the form you'd just use <button> without the type attribute defined (submit is the default value).
See the docs for more info.