Hi I have a single page with bootstrap and a form, but the form is like disabled, it doesn't show the cursors to type inside.
I have reviewed the css to see if there was any wrong class but everything seems ok.
Heres my html
<form id="contact-form" method="post" action="contactForm.php" class="contact-form form" role="form">
<div class="controls">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Your firstname *</label>
<input type="text" name="name" id="name" placeholder="Enter your firstname" required="required" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="email">Your email *</label>
<input type="email" name="email" id="email" placeholder="Enter your email" required="required" class="form-control">
</div>
<div class="form-group">
<label for="message">Your message for us *</label>
<textarea rows="4" name="message" id="message" placeholder="Enter your message" required="required" class="form-control"></textarea>
</div>
<div class="text-center">
<input type="submit" value="Send message" class="btn btn-primary btn-block">
</div>
</div>
</form>
And the following scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
http://jsfiddle.net/xyroL86j/
You probably have an element laying over the top of your form and links. Use your browser's document inspector to find it. Look for forced heights, absolute positioning, and negative margins.
Related
I am working with Laravel 5.4 Framework and I get this issue when the form does not submit anything except the csrf_token().
If I put an input outside of those <div> it will work and submit it, otherwise the browser (Chrome) will only submit the token, as if everything inside the <div> is not part of the form.
How can I submit all the data while using Bootstrap's form-group divs? The layout is not the problem as it does not work even when removing it.
#extends('layouts.master')
#section('content')
<div class="container" style="margin-top: 1%">
<p>Welcome, {{$user->name}}, here you can submit a new company for our database.</p>
<form name="suggestCompanyForm" method="post">
{{csrf_field()}}
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" aria-describedby="companyNameHelp" placeholder="Enter company name">
<small id="companyNameHelp" class="form-text text-muted">Enter the company's name you would like to suggest</small>
</div>
<div class="form-group">
<label for="companyEmail">Email address</label>
<input type="email" class="form-control" id="companyEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter the company contact email.</small>
</div>
<div class="form-group">
<label for="selectCategory">Select main category</label>
<select class="form-control" id="selectCategory">
<option>Food&Drink</option>
<option>Cosmetics</option>
<option>Electronics</option>
<option>Consumer Goods</option>
<option>Services</option>
</select>
</div>
<div class="form-group">
<label for="description">Company description.</label>
<textarea class="form-control" id="description" rows="5"></textarea>
</div>
<div class="form-group">
<label for="logo">File input</label>
<input type="file" class="form-control-file" id="logo" aria-describedby="logoHelp">
<small id="fileHelp" class="form-text text-muted">Add company logo.</small>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="check" class="form-check-input">
I agree that my submission follows the website rules.
</label>
</div>
<button id="submitCompany" type="submit" class="btn btn-primary" >Submit</button>
</form>
</div>
#endsection
your form inputs are not being submitted because you didn't give them names ...
Try
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
You have to add the action attribute to the form tag.
Edit this line
<form name="suggestCompanyForm" method="post">
to
<form name="suggestCompanyForm" action = "<url-for-the-submission>" method="post">
.You will also need to add this
name="name_of_input_to_submit"
to each input not only the textarea and you are also uploading a file you have to add this to the form tag too.
enctype="multipart/form-data"
So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.
One of my text field inputs is not rendering properly. I'm using bootstrap. Here's what it looks like.
This is the code I'm using.
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label for="input1">First Name</label>
<input type="text" class="form-control" id="input1" placeholder="First Name">
</div>
<div class="form-group">
<label for="input2">Last Name</label>
<input type="text2" class="form-control" id="input2" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
I noticed that when then input type is exactly text the input field is not rendered properly, but when the type is anything else, the input field is ok. What exactly am I doing wrong?
It seems like, and this is just a guess without being able to see all of your code, you have some style that is matching input[type="text"], and that is what's giving you the odd result.
This is not something wrong with bootstrap, rather, it's probably something on your end.
Works fine, this means you may have old Bootstrap, or some style is overriding default input[text] and notice, bootstrap doesn't care about type="text2" as by default is type of text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label for="input1">First Name</label>
<input type="text" class="form-control" id="input1" placeholder="First Name">
</div>
<div class="form-group">
<label for="input2">Last Name</label>
<input type="text2" class="form-control" id="input2" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
I'm working on a form I styled with bootstrap and connected to google docs doing a little hack.
The form works great when I test it in the browser and the developer tools emulators. If I leave a blank space, a small pop tells me to fill that space before continuing and it doesn't post the information into the spreadsheet nor advancing to the greeting page (expected behavior).
However when I test this in my iPhone and other mobile devices it doesn't work. I can leave blank spaces and it just simply ignores the "required" condition and it takes me to the greeting pages.
As you can see that's a problem. I want the form to behave as it behaves on the browser. Any ideas?
<!-- Form -->
<div class="col-lg-6 form-container" style="margin-top: 20px; margin-left:-20px">
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='thank-you.html';}"></iframe>
<form class="form-horizontal" action="https://docs.google.com/a/xxxxxxxx.com/forms/d/1psz4JlSVCmr99r7Qdg0LsV0WJjwzm1aSZBECmWpFX-w/formResponse" method="post"
target="hidden_iframe" onsubmit="submitted=true;">
<fieldset>
<!-- Form Name -->
<h3 class="centered"><span class="glyphicon glyphicon-ok"></span> Get Your API Key Today</h3>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Full Name">Full Name*</label>
<div class="col-md-4">
<input type="text" name="entry.492241038" value="" class="form-control input-md required" id="entry_492241038" dir="auto" aria-label="1 " aria-required="true" required="" title="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Company">Company*</label>
<div class="col-md-4">
<input type="text" name="entry.22144039" value="" class="form-control input-md required" id="entry_22144039" dir="auto" aria-label="2 " aria-required="true" required="" title="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Company Email">Company Email*</label>
<div class="col-md-4">
<input type="text" name="entry.1882859742" value="" class="form-control input-md required" id="entry_1882859742" dir="auto" aria-label="3 " aria-required="true" required="" title="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Phone Number">Phone Number*</label>
<div class="col-md-4">
<input type="text" name="entry.1063706991" value="" class="form-control input-md required" id="entry_1063706991" dir="auto" aria-label="4 " aria-required="true" required="" title="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="How will you use the API?">How will you use the API?*</label>
<div class="col-md-4">
<textarea name="entry.1508475478" rows="3" cols="0" class="form-control input-md required" id="entry_1508475478" dir="auto" aria-label="5 " aria-required="true" required=""></textarea>
</div>
</fieldset>
<div class="submit-button centered">
<!-- <input type="submit" name="submit" value="Submit" id="ss-submit"> -->
<button href="thank-you.html" class="btn btn-info btn-lg btTxt submit" id="ss-submit" name="submit" type="submit" value="Submit"> Get Started Now </button>
</div>
</form>
</div>
The required Attribute is not fully working, you might want to use a polyfill. In case you use webshim, you get it to work with the following lines:
<script src="js/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//request the features you need:
webshims.polyfill('forms');
</script>
Here is an example with bootstrap including instant validation:
http://jsfiddle.net/trixta/T29Kx/light/
You need to wrap your forms in a row. It also looks like you are trying to nest your columns to? Go over the grid docs one more time:
http://getbootstrap.com/css/#grid
I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.
<h1>Register</h1>
<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">
here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line
Reference the inline form styling on Bootstrap's site.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
Alternatively, you can also use columns to put form elements next to one another:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>