The form fails to work, when the subscribe button is clicked, and there is no reaction or error.
See the code here:
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<div class="input-group-addon subscribe-addons">subscribe</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You have to use a button in order to submit your data. And additionally in your form, I have added a way to pass data, in method="post".
Please refer the doc.
https://www.w3schools.com/css/css_form.asp
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form method="post" action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<input type="submit" value="Subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You're not using an input you're simply styling a div, change the subscribe div to an input with the type="submit" like below and it'll fire. Also add a method to the form.
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form method="post" action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<input type="submit" value="subscribe" class="input-group-addon subscribe-addons">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I have contact us page, where i have contact form, but i want align to center. I tried use in more divs and elements add text center, but nothing works. Can you help me? Thanks
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<legend class="text-center header">Contact us</legend>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
<div class="col-md-8">
<textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
You can try this way, hope it will works
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
......
</div>
</div>
</div>
I am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am working on a modal that adds the product. The modal has seperated tabs which is needed to add details. The question is that how can I handle validation.
Each tab has own form and submit button is the same. Also the "required" rule is not working. Any help please ?
Edit: Html code added. Don't read description after here. Because text is mostly code so I need to add more description. Also is there a way to handle this issue.
<div class="modal fade" id="product_add_modal" tabindex="-1" role="dialog" aria-labelledby="tab_modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header p-b-15">
<h4 class="modal-title">Product Setup</h4>
<ul class="card-actions icons right-top">
<a href="javascript:void(0)" data-dismiss="modal" class="text-white" aria-label="Close">
<i class="zmdi zmdi-close"></i>
</a>
</ul>
</div>
<div class="modal-body p-0">
<div class="tabpanel">
<ul class="nav nav-tabs p-0">
<li class="active" role="presentation">General Info</li>
<li role="presentation">Product Images</li>
<li role="presentation">Price</li>
<li role="presentation">Inventory</li>
<li role="presentation">Shipping</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fadeIn active" id="product_add_general">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form class="form-horizontal" action="/somewhere" method="POST">
#csrf
<div class="form-group label-floating is-empty">
<label class="control-label">Title</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<textarea id="add_product_desc" required></textarea>
</div>
<div class="chips chips-placeholder"></div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_images">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form action="#" class="dropzone" id="product_add_images_form" enctype="multipart/form-data"></form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_price">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Price</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Compare at price</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="togglebutton m-b-15 ">
<label>
<input type="checkbox" class="toggle-info" checked> Charge taxes on this product
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_inventory">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="control-label">SKU (Stock Keeping Unit)</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="control-label">Barcode (ISBN, UPC, GTIN, etc.)</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="" class="control-label">Inventory policy</label>
<select class="select form-control">
<option selected>Don't track inventory</option>
<option>Track this product's inventory</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_shipping">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Width</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Height</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Depth</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<label class="control-label">Weight</label>
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn suffix-select">
<select class="select form-control">
<option>lb</option>
<option>kg</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Extra Shipping Fee</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Add Product</button>
</div>
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
</div>
i am trying to control my width's for my input but i am having some trouble. Here is my mark up
<section class="bg-lb pt40 pb40 btborder">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bg-white ">
<div class="pt40 pb40">
<a class="btn btn-default hvr-fade">Login</a>
<span id="cricle"><b>OR</b></span>
<a class="btn btn-default hvr-fade">Register</a>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span></div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span></div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
<a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
</form>
</div>
</div>
</div>
</div>
</section>
im just simply trying to reduce the width of the input and center the form,
live preview here
http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview
If you want to continue using the grid system you can change the way your col-'s are setup.
Change:
<div class="row">
<div class="col-sm-12">
<div class="bg-white">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
To:
<div class="row">
<div class="bg-white">
<form>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
The main difference is that <div class="col-md-6 col-md-offset-3"> is now specifically wrapping the <div class="form-group">. Where the col-md-offset-3 is what will be centering your form.
Or to go a bit further, create a new <div class="row"> for each <div class="form-group"> instead of embedding all columns into one row.
The bootstrap way is to reduce the width of the column the form is in. With 3 columns you can center the form:
<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>
http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview
Just override bootstrap .css in a particular place. Try this for eg:
put it inside the css:
input.form-control{
max-width: 100px;
}
input.form-control will override every input with class set to : form-control
Or you can shrink the entire container class
.container{
max-width: 250px;
}
Test here : http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview
I'm tryind to understand bootstrap v2.3.2.
I want to make form like this using divs...
I done this code with divs
<form class="form-horizontal">
<fieldset>
<div class="row-fluid no-space">
<div class="span3 blockkk">
<p class="pull-right">1111111111111:</p>
</div>
<div class="span3 blockk ">
<p class="pull-left">22222222</p>
</div>
<div class="span3 blockkk">
<p class="pull-right">3333:</p></div>
<div class="span3 blockk">
<p class="pull-left">4444444444444</p></div>
</div>
<div class="row-fluid no-space">
<div class="span3 blockkk">
<p class="pull-right">1111111111111:</p>
</div>
<div class="span3 blockk ">
<p class="pull-left">22222222</p>
</div>
<div class="span3 blockkk">
<p class="pull-right">3333:</p></div>
<div class="span3 blockk">
<p class="pull-left">4444444444444</p></div>
</div>
</fieldset>
</form>
it looks exactly as i need
Now i'm trying to ad there inputs and lables using divs 'control-group',
'control-label', 'controls' and it becomes hell :[ I dont understand how to place them there correctly(
<form class="form-horizontal">
<fieldset>
<div class="row-fluid no-space">
<div class="span6 ">
<div class="control-group">
<div class="row-fluid">
<div class="span6 blockkk">
<div class="pull-right">
<label class="control-label" for="textinput">Text Input</label>
</div>
</div>
<div class="span6 blockk">
<div class="pull-left">
<div class="controls">
<input id="textinput" name="textinput" placeholder="placeholder" class="input-small" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span6 blockk">
second row
</div>
</div>
</fieldset>
</form>
Tried this way but the code is huge, and i can't find the way to make this input move left... noway.
How to solve this issue correctly?
Thank you!
Using Bootstrap3 try the below :
<form class="form-horizontal">
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">Text:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">Text:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-2 col-lg-offset-1">
<label class="control-label pull-right">Text another one:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-2 col-lg-offset-1">
<label class="control-label pull-right">Text another one:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">And more:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">And more:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
</form>
Using v2.3.2, try this - edit offset as required
<form class="form-horizontal">
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="text">Text:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="text">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="text2">Text:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="text2">
</div>
</div>
</div>
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="textAnother">Text another one:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="textAnother">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="textAnother2">Text another one:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="textAnother2">
</div>
</div>
</div>
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="andMore">And more:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="andMore">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="andMore2">And more:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="andMore2">
</div>
</div>
</div>
</form>