I am having a hard time trying to figure out how to preview a form before the customer submits. I have one fieldset that shows form, then the user can preview there entries on another fieldset before they submit there form.
Thanks for all and any help.
I tried this:
var fname = $('input#fname').val();
$(field2.show_fname).html(fname).show();
But didnt work at all.
Code is below. Here is my Fiddle: http://jsfiddle.net/xdmp8zz4/3/
HTML:
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field1 current">
<h2>(Placeholder) Title of Form heading level 2</h2>
<p><label class="form-label first-name" for="fname">First Name:</label>
<input type="text" name="fname" id="fname" placeholder="First Name"/>
</p>
<p><label class="form-label last-name" for="lname">Last Name:</label>
<input type="text" name="lname" id="lname" placeholder="Last Name"/>
</p>
<p><label class="form-label" for="phone-field">Phone:</label>
<input type="text" name="phone" id="phone-field" placeholder="Phone Number"/>
</p>
<p><label class="form-label" for="email-field">E-mail:</label>
<input type="text" name="email" id="email-field" placeholder="E-mail"/>
</p>
<hr>
<p><label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="select">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
</select>
</p>
<p><label for="subject">Short Description: <span class="counter-field"><span id="counter"></span> characters left.</span></label>
<input type="text" name="subject" id="subject" placeholder="Subject"/>
</p>
<p><label for="desc">Additional Comments:</label>
<textarea style="font-family: Arial, Veranda, Sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="Short Description"></textarea>
</p>
<p><label for="review">
<input type="button" name="review" class="review action-button" value="Review"/>
</label></p>
</fieldset>
<fieldset class="field2">
<!-- #TODO PREVIEW ALL FORM INPUTS -->
<p>First Name: <input type="hidden" class="show_fname" readonly="readonly" /></p>
<p>Last Name: <input type="hidden" class="show_lname" readonly="readonly" /></p>
<p>Phone: <input type="hidden" class="show_phone" readonly="readonly" /></p>
<p>E-mail: <input type="hidden" class="show_email" readonly="readonly" /></p>
<p>Type of Request: <input type="hidden" class="show_type_of_request" readonly="readonly" /></p>
<p>Short Description: <input type="hidden" class="show_subject" readonly="readonly" /></p>
<p>Additional Comments: <input type="hidden" class="show_comments" readonly="readonly" /></p>
<p style="float:left;"><label for="previous">
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</label></p>
<p style="float:left; padding-left: 10px;"><label for="Submit">
<input type="submit" value="Submit" name="submit" class="action-button"/>
</label></p>
</fieldset>
</form>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$('.review').click(function () {
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function () {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
$('#subject').simplyCountable({
counter: '#counter',
countType: 'characters',
maxCount: 80,
strictMax: true,
countDirection: 'down',
});
});
CSS:
/*Hide all except first fieldset*/
#helpdeskform .field2 {
display: none;
}
/*inputs*/
#helpdeskform input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 80%;
color: #2C3E50;
font-size: 13px;
}
#helpdeskform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#helpdeskform .action-button {
width: 100px;
font-weight: bold;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#helpdeskform .action-button:hover,
#helpdeskform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #900;
}
/*Form labels*/
label.form-label {
text-align: left;
}
/*Phone Label Align*/
input#phone-field {
margin-left: 26px;
}
/*E-mail Label Align*/
input#email-field {
margin-left: 24px;
}
.counter-field {
font-size: 10px;
}
/*Divider*/
hr {
margin-bottom: 20px;
padding: 0px;
border-width: 2px;
border-style: solid;
border-color: #ccc;
}
Setting the text inputs in the second fieldset to hidden won't allow you to set the value and also won't display. I've changed these to type="text"and set things up to loop through the form values in the first to set all the form values in the review section here, http://jsfiddle.net/xdmp8zz4/23/
This is what I did for the first name one to show up in the review.
$('.show_fname').after($('#fname').val());
You can't put the value in the hidden input because it is hidden, and you can't change the type of the input from hidden to text because jQuery forbids it. Either you can change the input from hidden to text/disabled or you can simply place it in html as I have done with the simple code above.
Related
my goal is to create something like this :enter image description here
So an area where I can put a form for authentification or create an account. I already created a form in php which is linked to my database like this
<form action="connection.php" method="post">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
function inscription($db,$nom,$prenom,$mail,$tel,$mdp){
try{
$request_client = "INSERT INTO client (nom, prenom, mail, tel, mdp) VALUES (:nom, :prename, :email, :phone,:pass);";
$statement_client = $db->prepare($request_client);
$statement_client->bindParam(':nom', $nom);
$statement_client->bindParam(':prename', $prenom);
$statement_client->bindParam(':email', $mail);
$statement_client->bindParam(':phone', $tel);
$statement_client->bindParam(':pass', $mdp);
$statement_client->execute();
}
catch (PDOException $exception)
{
error_log('Request error: '.$exception->getMessage());
return false;
}
}
Is there something in boostrap or css or even js which can make me creat this blue area ?
You can do this with CSS, something like:
.blue-box {
max-width: 450px;
margin: 1rem auto;
padding: 1rem;
background: #3b52a5;
border-radius: 8px;
color: #fff;
}
.blue-box .form-group {
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0.5rem 0;
}
.blue-box .form-group input {
padding: 0.75rem 1rem;
margin-top: 0.25rem;
border: 1px solid #060537;
border-radius: 8px;
background: none;
outline: none;
color: #fff;
}
.blue-box button {
padding: 0.75rem 1rem;
margin: 0.5rem auto;
background: #060537;
border-radius: 8px;
width: 100%;
outline: none;
border: none;
color: #fff;
}
body {
background: #7db9ff;
font-family: sans-serif;
}
<form action="connection.php" method="post" class="blue-box">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
</form>
Perhaps it might be enough to make the background color of <form> into the blue that you want and also add a little padding to it so that the form fields aren't right at the edge of the box.
HTML p-3 will be your padding but only on sites that use Bootstrap.
<form class="blueBox p-3" action="connection.php" method="post">
CSS
.blueBox{
background: blue;
}
When "same as shipping address" is checked, the form below that section is supposed to disappear. I put {display:none} but it doesn't work. It worked when I got rid of {div class="checkboxalign} but then it is no longer aligned in the center. I was wondering how to get this function to work, but still keep it center aligned? Thank you.
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.checkbox-custom:checked ~.input-box {
display: none;
}
.checkboxalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
margin-bottom: 10px;
}
.radioalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
}
<form class="form2">
<div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>
<div class="checkboxalign">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form3">
<div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
<div class="radioalign">
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong> $0.00</strong></label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
</div>
</div>
</form>
Because .input-box Elements are not siblings of the checkbox. And your selector is
.checkbox-custom:checked ~.input-box {
display: none;
}
There must be wrapper div to form elements which you want to hide then your css will work.
i have written a password form in HTML and it has some good functionality however, i have just made a change and the css is effecting the elements. basically when i click on the different input boxes it effects the labels of my form by shifting them slightly up to down.
here is a jsfiddle so people can see the change visibly.
https://jsfiddle.net/b6hv8wLh/
here is some code:
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>
</div>
i have tried wrapping my form in various divs and trying to hit indivdual elements but it is still making changes. just to make clear, i am trying to get it to a stage where the user clicks the input and the labels do not change at all.
many thanks
This is caused by you assigning the border:4px solid red; styling to your input on focus. This causes the input's overall size to become larger which moves down the elements below it.
One way to prevent this is to give the input 4px border the same colour as the background. The border will then change to red on focus and become visible but the size will not have actually changed:
input {
background-color: #fff;
margin-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-radius: 15px;
border:4px solid #D8D8D8;
}
It's the additional border:4px solid #D8D8D8; declaration which makes the difference.
It is because of border of input field when focus. Hence add border property for input field with same background color of the form.
input {
border:4px solid #D8D8D8;
}
Immediate solution
In your case, the fix is really simple. The border size of the input boxes should not change when they are in focus.
So, for example the inputs on focus have this style:
border: 4px solid red;
But when they are out of focus, they do not have a border. So you should set a 4px border with the same color as the background when it is not in focus.
Bootstrap-like solution
Alternatively, you should consider using a single pixel border, with a box shadow instead. Just like Bootstrap does it, which you use as I see. IMHO this does look great, especially in contrast with these huge borders.
Use box-shadow no need for any extra CSS with this.
/* CHANGE BORDER TO BOX SHADOW ON THE FOCUS */
.f1input:focus{
outline: none !important;
box-shadow: 0 0 0 4px red;
border-radius: 15px;
}
body {
background-color: #080808;
}
/*
.navbar-brand {
background-color: red;
}
*/
.container-fluid{
background-color: #006600;
border: 0;
}
#websiteName a{
color: black;
font-size: 20px;
}
#websiteName a:hover{
color: red;
}
#theLinks ul li a{
color: black;
font-size: 20px;
}
#theLinks ul li a:hover{
color: red;
}
#firstform{
background-color: #D8D8D8;
}
#firstform span{
position: absolute;
}
.glyphicon-search
{
position:relative !important;
}
#firstform .themessage{
position: absolute;
}
#firstform {
width: 60%;
margin: auto;
text-align: center;
}
#firstform h1{
text-align: center;
}
#firstform label{
text-align: left;
}
#myform {
width: 100%;
}
input {
background-color: #fff;
margin-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-radius: 15px;
border: none;
}
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>
</div>
Try this:
#myform{
width: 450px;
margin: 0 auto;
}
.sep{
padding: 10px;
}
body {
background-color: #080808;
}
/*
.navbar-brand {
background-color: red;
}
*/
.container-fluid{
background-color: #006600;
border: 0;
}
#websiteName a{
color: black;
font-size: 20px;
}
#websiteName a:hover{
color: red;
}
#theLinks ul li a{
color: black;
font-size: 20px;
}
#theLinks ul li a:hover{
color: red;
}
#firstform{
background-color: #D8D8D8;
}
#firstform span{
position: absolute;
}
.glyphicon-search
{
position:relative !important;
}
#firstform .themessage{
position: absolute;
}
#firstform h1{
text-align: center;
}
.sep label{
padding: 10px;
}
input {
background-color: #fff;
margin-left: 10px;
padding-right: 50px;
border-radius: 15px;
border: none;
}
.f1input:focus{
outline: none !important;
border:4px solid red;
border-radius: 15px;
}
input#occupation{
background-color: #999;
}
.mytooltip + .tooltip > .tooltip-inner {
background-color: #f00;
}
label{
display:inline-block;
width:150px;
}
/*
#-webkit-keyframes example{
25% {color: black;}
50% {color: yellow;}
75% {color: green;}
100% {color: red;}
}
#firstform h1{
color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}*/
.dropdown:hover .dropdown-menu {
display: block;
}#myCarousel {
width:50%;
margin: auto;
background-color: red;
text-align: center;
}
#myCarousel item {
text-align: center;
}
enter code here
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<div class="sep">
<label>Username </label>
<input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip">
</div>
<div class="pwordCheck sep">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<div class="sep">
<label>Email </label> <input type="email" class="f1input" id="e-mail"/>
</div>
<div class="dropdown sep">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<div class="sep">
<label>Job Role</label> <input type="text" class="f1input"/>
</div>
<div class="sep">
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/>
</div>
<div class="sep">
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/>
</div>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form> `enter code here`
</div>
I have this huge form I'm making and there's an also huge problem with it.
In some "areas". only the last input works.
For example here:
[...]
<div class="main_data">
<span class="info">main data</span><br>
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="website" placeholder="Website" required>
<input type="text" name="telephone" placeholder="Telephone" required>
<input type="text" name="address" placeholder="Address" required>
<input type="text" name="city" placeholder="City" required>
<input type="text" name="country" placeholder="Country" required>
</div>
[...]
Every input appears to be disabled(?) and I can only write on Country.
This also happens on some other areas of the form, for example here:
[...]
<div class="detailed_info">
<span class="info">detailed info</span>
<input type="text" name="activity_areas" placeholder="Activity Areas" required>
<input type="text" name="company_valences" placeholder="Description of Company Valences" required>
<input type="text" name="where_operates" placeholder="Markets / Countries where it operates" required>
<input type="text" name="where_operates" placeholder="Annual Turnover (Value EUR)" required>
[...]
I can only write on Annual Turnover.
I tried switching z-index's to check out if it was something over it but I didn't find anything wrong.
I'll paste the css of only the first part, I belive if I find what's happening on the first one I'll be able to correct the second.
.main_data{
width: 100%;
padding: 30px 0;
background: rgba(238, 238, 238, 0.9);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
text-align: center;
}
.main_data .info{
display: block;
width: 100%;
margin: 0 0 10px 0;
font-size: 20px;
font-family: 'Futura-Light-Italic', sans-serif;
}
.main_data input{
border: 0;
padding: 5px 0;
margin: 0;
width: 80%;
background: #FFF;
color: #000;
text-align: center;
font-family: 'Futura', sans-serif;
}
.main_data input:focus{
border: 0;
}
I'm still afraid that it might not have nothing to do with the form so I'll leave you guys a link to the page so can try inspecting some elements if you want.
To bring up the form you click Join the City as One of Us: link
I'm really needing help as this form must be ready today.
Please ask questions if you don't understand something! I will obviously try to help you helping me.
EDIT: I'm using Google Chrome
Change the line-height on .oneofus.
.oneofus {
width: 88%;
position: absolute;
z-index: 12;
top: 0;
line-height: 1px; /* this is the problem remove it or make it bigger (74px or more) */
}
Set the position of the inputs to relative..
.main_data input {
position: relative;
}
how to make the container inside the div to centre align....
i gave margin left and right auto but its not working....
where as in iphone lay out it becomes centre aligned
providing my code below....
http://jsfiddle.net/2a5mW/1/embedded/result/
<div class="hide fade in" id="signup-modal" conduit_fixed_handled="true" conduit_orig_mtop_val="-306" style=" display: block;" aria-hidden="false">
<div class="page-title">Add New Vendor</div>
<div>
<span>Vendor no</span>
100012 <span style="">Starting no:</span><span style="color: red;">100000</span>
</div>
<h4 class="billingAddress">Billing Address</h4>
<form method="POST" autocomplete="off" id="auth-form">
<input type="hidden" name="usertype" value="3" readonly="">
<fieldset>
<input type="text" placeholder="Company Name " name="fullname" maxlength="30" required="required" id="id_username">
<input type="text" placeholder="Contact Name" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Address1" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Address2" name="password" maxlength="16" required="required" id="id_password">
<input type="password" placeholder="Address3" name="repassword" required="required" id="id_repassword">
<input type="text" placeholder="City " name="fullname" maxlength="30" required="required" id="id_username">
<div class="controls"
#signup-modal, #login-modal {
width: 300px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
overflow: hidden;
margin-bottom: 40px;
box-shadow: 0px 1px 0px white inset;
padding: 0px 40px;
margin-left: auto;
margin-right: auto;
}
This worked in Firefox and Chrome.