so i need to style my form - i want the label to be inside of the field container as a place holder and i also want to stretch the input field containers but i am not winning:
<style>
.infusion-field-label-container {
font-size: 14px;
font-family: arial,sans-serif;
}
.infusion-field-input-container {
color: #000000;
font-size: 12px;
}
.infusion-option label {
color: #000000;
font-size: 14px;
font-family: arial,sans-serif;
}
</style>
<div align="center">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" />
<label for="inf_field_Phone1">Cell Number *</label>
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" />
<label for="inf_field_Email">Email *</label>
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" />
<input type="submit" value="Register" />
</div>
</div>
</form>
so i have most of it fixed:
<style>
.infusion-field-label-container {
font-size: 14px;
font-family: arial,sans-serif;
}
.infusion-field-input-container {
color: #000000;
font-size: 12px;
}
.infusion-option label {
color: #000000;
font-size: 14px;
font-family: arial,sans-serif;
}
</style>
<style type="text/css">
.infusion-field-label-container {
text-align:Left;
}
.infusion-field-input-container {
width:300px;
}
.infusion-field-label-container {
vertical-align:Middle;
}
</style>
<div align="center">
<div class="infusion-field">
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="First Name*"/>
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" placeholder="Cell Number*" />
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" placeholder="Email*" />
<input type="submit" value="Register" />
</div>
</div>
</form>
Just cannot get the button styled - any hint please?
Related
Working on converting some of the forms on our website to be housed within our new emailing platform (Pardot, a part of Salesforce). Using their CSS editor to create the forms, but I don't have much experience in CSS. I got all the labels for a checkbox to align vertically, but they're in a diagonal line instead of a vertical line. Any tips on how to fix that?
I also attached an image of what the form looks like on the website.
Here's the CSS:
pardot-form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;
}
Will this work for you? I pulled some basic form elements from an existing Pardot form.
form.form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height: 18px;
width: 18px;
padding: 0;
margin-top: 5px;
display: inline;
}
<form class="form">
<p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom ">
<label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
<span class="value"> <span>
<input type="checkbox" name="2" id="2" value="598212" onchange="">
<label class="inline" for="2">General Information</label>
</span> <span>
<input type="checkbox" name="3" id="3" value="598214" onchange="">
<label class="inline" for="3">Membership</label>
</span> <span>
<input type="checkbox" name="4" id="4" value="598216" onchange="">
<label class="inline" for="4">Alumni</label>
</span> <span>
<input type="checkbox" name="5" id="5" value="598218" onchange="">
<label class="inline" for="5">Show</label>
</span> <span>
<input type="checkbox" name="6" id="6" value="598220" onchange="">
<label class="inline" for="6">Band</label>
</span> </span> </p>
</form>
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Contact us</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text2' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>* required fields</div>
<div>
<span class='error'>
<?php echo $formproc->GetErrorMessage(); ?>
</span>
</div>
<div class='container2'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text2' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='email' >Email Address*:</label><br/>
<input type='text2' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='phone' >Phone Number:</label><br/>
<input type='text2' name='phone' id='phone' value='<?php echo $formproc->SafeDisplay('phone') ?>' maxlength="15" /><br/>
<span id='contactus_phone_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='query_type' >Regarding:</label><br/>
<select name='query_type'>
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
</div>
<div class='container2'>
<div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div>
<label for='scaptcha' >Enter the code above here:</label>
<input type='text2' name='scaptcha' id='scaptcha' maxlength="10" /><br/>
<span id='contactus_scaptcha_errorloc' class='error'></span>
<div class='short_explanation'>Can't read the image?
<a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div>
</div>
<div class='container2'>
<input type='submit' name='Submit' value='Submit' />
</div>
</fieldset>
</form>
</article>
</div>
</div>
</div>
#contactus fieldset{
padding:20px;
border:1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin:0 auto;
width:459px;
}
#contactus legend, h2{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}
#contactus label2{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}
/* #contactus input[type="text2"], textarea{
font-family : Arial, Verdana, sans-serif;
font-size: 0.8em;
line-height:140%;
color : #000;
padding : 3px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#contactus input[type="text2"]{
height:26px;
width:459px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus #scaptcha{
width:80px;
height:26px;
}
#contactus input[type="submit2"]{
width:100px;
height:30px;
padding-left:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus textarea2{
height:120px;
width:469px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#contactus input[type="text2"]:focus,textarea:focus{
color : #009;
border : 1px solid #0E0D0D;
background-color : #D1E7FF;
font-weight:bold;
}
#contactus .container2{
margin-top:8px;
margin-bottom: 10px;
}
#contactus .error{
font-family: Verdana, Arial, sans-serif;
font-size: 0.7em;
color: #900;
background-color : #FF8088;
}
#contactus fieldset#antispam{
padding:2px;
border-top:1px solid #EEE;
border-left:0;
border-right:0;
border-bottom:0;
width:350px;
}
#contactus fieldset#antispam legend{
font-family : Arial, sans-serif;
font-size: 0.8em;
font-weight:bold;
color:#333;
}
#contactus .short_explanation{
font-family : Arial, sans-serif;
font-size: 0.8em;
color:#333;
}
/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip{
display:none;
width:10px;
height:3px;
}
#fg_crdiv{
font-family : Arial, sans-serif;
font-size: 0.3em;
opacity: .2;
-moz-opacity: .2;
filter: alpha(opacity=20);
}
#fg_crdiv p{
display:none;
}
I've tried everything, I can't figure out what is affecting the form to cause it to run off the screen on a mobile device. Here is the link to the form.
in main.css you have hard-coded some widths for example width of input fields, width of fieldset. Just remove them or make them in percentage and your page will become responsive
It is hard to tell from the snippet but when the following code is placed in the document inspector it seems to work
Your hard coded widths were causing the issue, you may have to also modify your other media queries and break points to get it working at every size
#media screen and (max-width: 736px){
body, input, select, textarea {
line-height: 2em;
width: 100%;
}
#contactus input[type="text2"] {
height: 26px;
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
<link rel="stylesheet prefetch" href="https://www.munroprinting.com/assets/css/main.css">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id="contactus" action="/upload/contactform.php" method="post" accept-charset="UTF-8">
<fieldset>
<legend>Contact us</legend>
<input type="hidden" name="submitted" id="submitted" value="1">
<input type="hidden" name="id3a31ca8adb123c3ea7b9" value="432ce4949a45b03c0299f37b81305012">
<input type="text2" class="spmhidip" name="sp5d7f1e2089582b5699eab58b16dad351">
<div class="short_explanation">* required fields</div>
<div><span class="error"></span></div>
<div class="container2">
<label for="name">Your Full Name*: </label><br>
<input type="text2" name="name" id="name" value="" maxlength="50" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"><br>
<span id="contactus_name_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="email">Email Address*:</label><br>
<input type="text2" name="email" id="email" value="" maxlength="50"><br>
<span id="contactus_email_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="phone">Phone Number:</label><br>
<input type="text2" name="phone" id="phone" value="" maxlength="15"><br>
<span id="contactus_phone_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="query_type">Regarding:</label><br>
<select name="query_type">
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id="contactus_email_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="message">Message:</label><br>
<span id="contactus_message_errorloc" class="error"></span>
<textarea rows="10" cols="50" name="message" id="message"></textarea>
</div>
<div class="container2">
<div><img alt="Captcha image" src="show-captcha.php?rand=1" id="scaptcha_img"></div>
<label for="scaptcha">Enter the code above here:</label>
<input type="text2" name="scaptcha" id="scaptcha" maxlength="10"><br>
<span id="contactus_scaptcha_errorloc" class="error"></span>
<div class="short_explanation">Can't read the image?
Click here to refresh.</div>
</div>
<div class="container2">
<input type="submit" name="Submit" value="Submit">
</div>
</fieldset>
</form>
</article>
</div>
</div>
I am trying to align this radio buttons on my form, but for some reason they are kinda big and the texts are way above.
Here is my html page:
<div id="sabores">
<form action="" method="post">
<input type="radio" name="txt_sabor" value="natural" class="radiobtn" /> Natural </br>
<input type="radio" name="txt_sabor" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola </br>
<input type="radio" name="txt_sabor" value="morango" class="radiobtn" /> Morango </br>
<input type="radio" name="txt_sabor" value="limao" class="radiobtn" /> Limão </br>
<input type="radio" name="txt_sabor" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná</br>
<input type="radio" name="txt_sabor" value="uva" class="radiobtn" /> Uva </br>
<input type="radio" name="txt_sabor" value="abacaxi" class="radiobtn" /> Abacaxi </br>
</form>
</div>
and here is my CSS:
#sabores{
width: 370px;
height: 215px;
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores h2{
width: 364px;
color: #333;s
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
Your have mistype your br, instead of <br />. And to correct your problem and add a good accessibility practice at same time you can wrap your radio button with text in a label. You can use paragraphs <p> instead of <br /> too. And remove your clear: left; float:left you don't need to precise display:block if your element is floating.
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
margin-top: 10px;
}
<div id="sabores">
<form action="" method="post">
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label><br />
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label><br />
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label><br />
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label><br />
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label><br />
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label><br />
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label><br />
</form>
</div>
Better solution is to use an unordered list ul with li for each couple label + input or paragraphs, and remove your fixed height from sabores div :
<div id="sabores">
<form action="" method="post">
<p>
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label></p>
<p>
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label></p>
<p>
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label></p>
<p>
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label></p>
<p>
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label></p>
<p>
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label></p>
<p>
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label></p>
</form>
</div>
With style :
/*previous style*/
#sabores{
width: 370px;
/*height: 215px; don't need*/
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
}
#sabores p {
margin-bottom: 10px;
margin-top: 0;
}
Make the following changes to this class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
margin-top: 10px;
vertical-align:bottom;
/*
Remove following css properties
display: block;
clear: left;
float: left;
*/
}
fiddle
Please pay more attention the follow class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
as you see, you use these attributes:
display:block; clear: left; float: left;
It makes your input Element out of page flow, so you can remove these attribute and everything will be ok!
I advise you can read it about Visual formatting model.(click here)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I Want some samples for step by step registrations like a wizard.
i want to use these samples and asp.net page.
Thanks.
You can easily create your own using jQuery - check out this demo
http://jsfiddle.net/nwJFs/
And here's the code
HTML
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Submit</a>
</div>
CSS
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}
jQuery
$(".next").click(function() {
//store parent
var parent = $(this).parent();
if(parent.next().length) {
parent.hide("slow").next().show("slow");
}
return false;
});
$(".prev").click(function() {
var parent = $(this).parent();
if(parent.prev().length) {
parent.hide("slow").prev().show("slow");
}
return false;
});
check out this one : http://thecodemine.org
having problems with chrome though...
Do you mean, something like this?
jQuery Form Builder
checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard