I looked at the other forms on here and I still can't seem to get anywhere for whatever reason. I've tried several different methods that I've found on here and nothing is working >.< Can someone help me align these text boxes? Any help is greatly appreciated!
<h1>Registration</h1>
<div class="containter">
<form name=registration>
Username: <input type="text" name="username" value="">
<br><br> Password: <input type="text" name="password" value="">
<br><br> First Name: <input type="text" name="firstName" value="">
<br><br> Last Name: <input type="text" name="lastName" value="">
<br><br> Date of Birth: <input type="text" name="bDay" value="">
<br><br> Email: <input type="text" name="email" value="">
<br><br> Phone Number: <input type="text" name="firstName" value="">
<br><br>
</form>
</div>
You can just put it in a table:
<body>
<h1>Registration</h1>
<div class="containter">
<form name=registration>
<table style="width:100%">
<tr>
<td>Username: </td><td><input type="text" name="username" value=""></td>
</tr>
<tr>
<td>Password: </td><td><input type="text" name="password" value=""></td>
</tr>
<tr>
<td>First Name:</td><td> <input type="text" name="firstName" value=""></td>
</tr>
<tr>
<td>Last Name: </td><td><input type="text" name="lastName" value=""></td>
</tr>
<tr>
<td>Date of Birth: </td><td><input type="text" name="bDay" value=""></td>
</tr>
<tr>
<td>Email: </td><td><input type="text" name="email" value=""></td>
</tr>
<tr>
<td>Phone Number: </td><td><input type="text" name="firstName" value=""></td>
</tr>
</form>
</div>
You may want to use bootstrap and this is what you could get. Checkout this codepen
Bootstrap is used by a lot of companies and is an easier way to create responsive forms
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h1>Registration</h1>
<form name=registration>
<div class="containter">
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Username:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="username" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Password:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="password" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">First Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="firstName" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Last Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="lastName" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Date of Birth:</label>
<div class="col-sm-10">
<input class="form-control" type="date" name="bDay" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Email:</label>
<div class="col-sm-10">
<input class="form-control" type="email" name="email" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Phone Number:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="firstName" value="" />
</div>
</div>
</div>
</form>
</body>
</html>
Related
Please check this image
I try to fetching data on every table data using modal bootstrap, but when i click every modal button it's just showing last table data in form of my popup modal. I want the data is per in the form on modal bootstrap. I am using CodeIgniter. Please help me, thanks. GBU
HERE IS MY CODE:
<table class="table table-bordered table-striped nowrap text-gray-900" id="dataTable" width="100%" style="font-size: 13px;" cellspacing="0">
<thead>
<tr class="table-success">
<th>ID</th>
<th>NOMOR</th>
<th>KODE</th>
<th>TINDAKAN</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
<?php
foreach ($prosedur_rehab as $rehab) {
?>
<tr>
<td><?= $rehab->ID; ?></td>
<td><?= $rehab->NOMOR; ?></td>
<td><?= $rehab->KODE; ?></td>
<td><?= $rehab->TINDAKAN; ?></td>
<td>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#perawat<?php echo $rehab->ID;?> ">
<i class="fas fa-user-nurse"></i>
</button>
<div class="modal fade" id="perawat<?php echo $rehab->ID;?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-header" style="background-color:#5bc0de">
<h5 class="modal-title" id="exampleModalLabel">Kelola Rawat Jalan (Diisi Oleh Perawat)</h5>
<button type="button" class="btn-danger" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="<?php echo base_url().'dokter/kunjungan/kirimlaprajal'?>">
<div class="form-group">
<!-- <label for="exampleInputEmail1">ID</label> -->
<select name="" class="form-control">
<option>-- CARI --</option>
<?php foreach ($prosedur_rehab as $rehab):?>
<option value="<?php echo $rehab->ID?>"><?php echo $rehab->ID?> || <?php echo $rehab->NORM?></option>
<?php endforeach ?>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">ID Prosedur</label>
<input type="text" name="ID" class="form-control" id="exampleInputEmail1" required readonly autocomplete="off" value="<?php echo $rehab->ID; ?>">
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">No. Pendaftaran</label>
<input type="text" name="NOMOR" class="form-control" id="exampleInputEmail1" required readonly autocomplete="off" value="<?php echo $rehab->NOMOR; ?>">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Kode</label>
<input type="text" name="KODE" class="form-control" id="exampleInputEmail1" required readonly autocomplete="off" value="<?php echo $rehab->KODE; ?>">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Tindakan</label>
<input type="text" name="TINDAKAN" class="form-control" id="exampleInputEmail1" autocomplete="off" value="<?php echo $rehab->TINDAKAN; ?>">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Tanggal</label>
<input type="datetime-local" name="TANGGAL" class="form-control" id="exampleInputEmail1" required autocomplete="off" placeholder="" value="">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Instrumen Uji Fungsi</label>
<input type="text" name="PROGRAM" class="form-control" id="exampleInputEmail1" required autocomplete="off" value="">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Hasil</label>
<input type="text" name="HASIL" class="form-control" id="exampleInputEmail1" required autocomplete="off" placeholder="" value="">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Kesimpulan</label>
<input type="text" name="KESIMPULAN" class="form-control" id="exampleInputEmail1" required autocomplete="off" value="">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Rekomendasi</label>
<input type="text" name="REKOMENDASI" class="form-control" id="exampleInputEmail1" required autocomplete="off" value="">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Oleh</label>
<input type="text" name="OLEH" class="form-control" id="exampleInputEmail1" required autocomplete="off" value="<?php echo $session_user->nip ;?>" readonly>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Status</label>
<input type="text" name="STATUS" class="form-control" id="exampleInputEmail1" required autocomplete="off" value="">
</div>
</div>
</div>
<button type="submit" name="simpen" class="btn btn-info float-right"><i class="fas fa-save"> </i> Simpan</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>NOMOR</th>
<th>KODE</th>
<th>TINDAKAN</th>
</tr>
</tfoot>
</table>
i tried your code and it works perfectly, Check your $rehave->ID value maybe it doesn't have value or have invalid value, or check your modal plugins
The problem is i was used same foreach in select option . I was forgot if i 've been using first foreach to displaying table data and i used it again in form.
Don't using same foreach in form, delete or change this:
<select name="" class="form-control">
<option>-- CARI --</option>
<?php foreach ($prosedur_rehab as $rehab):?>
<option value="<?php echo $rehab->ID?>"><?php echo $rehab->ID?> || <?php echo $rehab->NORM?></option>
<?php endforeach ?>
</select>
I have a dynamic data table with a button that launches a Bootstrap Modal. In the modal is a form. I need the softwareID to pass from the page to the modal to a hidden field in the form. My modal opens and the form displays fine but, the softwareID field is empty. I have searched the Internet trying all types of code and nothing seems to work. Any help would be appreciated. Thank you.
Here is my code so far:
<div class="col">
<!-- Button trigger modal -->
<script type="text/javascript">
$('#upload').on('show.bs.modal', function (event) {
var myVal = $(event.relatedTarget).data('softwareID');
$(this).find(".modal-body").text(myVal);
});
</script>
<?php
if (("".($district_results_private->getColumnVal("paid") ."" == "Y") and "".($logged_user->getColumnVal("tec_member") ."" == "Y")) or ("".$_GET['state'] ."" != "MA" and ("".($logged_user->getColumnVal("tec_member") ."" == NULL) or "".($logged_user->getColumnVal("tec_member") ."" == "N")) and "".$_GET['state'] ."" != "NH" and "".$_GET['state'] ."" != "RI")) { // WebAssist Show If
?> <button data-softwareID="<?php echo($district_results_private->getColumnVal("softwareID")); ?>" type="button" class="btn-sm btn-primary" data-toggle="modal" data-target="#upload">Create New Request</button><?php
} // ("".($district_results_private->getColumnVal("paid") ."" == "Y") and "".($logged_user->getColumnVal("tec_member") ."" == "Y")) or ("".$_GET['state'] ."" != "MA" and ("".($logged_user->getColumnVal("tec_member") ."" == NULL) or "".($logged_user->getColumnVal("tec_member") ."" == "N")) and "".$_GET['state'] ."" != "NH" and "".$_GET['state'] ."" != "RI")
?>
<!-- Modal -->
<form enctype="multipart/form-data" method="post">
<div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="uploadlLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="uploadLabel">Create New Request</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cancel"> <span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<label for="supporting_files">Please fill out the following optional information:</label>
<br><br>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon12">Principal/Dean</font></span></div>
<input name="principal_dean" type="text" class="form-control col-md-8" id="principal_dean" value="" date_approved="principal_dean" title="Principal/Dean">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon10">Paid By</span></div>
<input name="paid_by" type="text" class="form-control col-md-8" id="paid_by" value="" title="Paid By">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon11">Cost</span></div>
<input name="cost" type="text" class="form-control col-md-4" id="cost" value="" title="Cost">
</div>
<p> </p>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon7"><font color="#339933">Grades</font></span></div>
<label for="grade_level3"><i><font size="-1">Check all that apply</font></i></label>
<table width="60%" class="table table-striped">
<tr>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="K" id="grade_level_0" />
K</label></td>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="1" id="grade_level_1" />
1</label></td>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="2" id="grade_level_2" />
2</label></td>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="3" id="grade_level_3" />
3</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="grade_level[]" value="4" id="grade_level_4" />
4</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="5" id="grade_level_5" />
5</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="6" id="grade_level_8" />
6</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="7" id="grade_level_7" />
7</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="grade_level[]" value="8" id="grade_level_8" />
8</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="9" id="grade_level_9" />
9</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="10" id="grade_level_10" />
10</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="11" id="grade_level_11" />
11</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="grade_level[]" value="12" id="grade_level_12" />
12</label></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon8"><font color="#339933">Content Area</font></span></div>
<label for="grade_level4"><i><font size="-1">Check all that apply</font></i></label>
<table width="80%" class="table table-striped">
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="English Language Arts" id="content_area_0" />
English Language Arts</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Health" id="content_area_1" />
Health</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Instructional Technology" id="content_area_2" />
Instructional Technology</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Library Media" id="content_area_3" />
Library Media</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Math" id="content_area_4" />
Math</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Science" id="content_area_6" />
Science</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Physical Education" id="content_area_5" />
Physical Education</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Visual Performing Arts" id="content_area_8" />
Visual Performing Arts</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Social Science" id="content_area_7" />
Social Science</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Other" id="content_area_10" />
Other</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="World Language" id="content_area_9" />
World Language</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Computer Science" id="content_area_10" />
Computer Science</label></td>
</tr>
</table>
</div>
<div class="input-group mb-2 col-sm">
<div class="input-group-prepend"></div>
<input title="Requires Media Release" type="text" class="form-control" value="Requires Media Release?" aria-label="Requires Media Release?">
<div class="input-group-text"> Yes
<input name="media_release" type="checkbox" value="Y" aria-label="Requires Media Release">
</div>
</div><br>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon12">Purpose</font></span></div>
<textarea class="form-control col-md-5" aria-label="With textarea" name="purpose"></textarea>
</div><br>
<p><strong>VENDOR CONTACT'S INFORMATION</strong> (optional)</p>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">Contact Name</span></div>
<input title="Contact" name="contact" type="text" class="form-control col-md-8" id="contact" value="" aria-describedby="basic-addon3" placeholder="">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon4">Contact Email</span></div>
<input title="Email" name="contact_email" type="email" class="form-control col-md-8" id="contact_email" value="" aria-describedby="basic-addon3" placeholder="Enter a valid email address.">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon5">Contact Phone</span></div>
<input name="phone" type="text" class="form-control col-md-8" id="phone" value="" aria-describedby="basic-addon3" placeholder="" title="phone">
</div>
<div class="modal-footer">
<input name="statusID" type="hidden" value="6">
<input name="request_submitted_date" type="hidden" id="request_submitted_date" value="<?php echo date('Y-m-d'); ?>" />
<input type="hidden" name="districtID" id="districtID" value="<?php echo($logged_user->getColumnVal("districtID")); ?>">
<input type="text" name="softwareID" id="softwareID" value="">
<button class="btn btn-info" type="submit" name="submit" id="submit">Save New Request</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div></div>
</form>
</div>
I'm setting up a contact form and I want this form to be centered on my page. But I don't want the full width (col-md-12) of the page. I only want the width of a col-md-6 at the center of the page. Problem is that because I select col-md-6, the form display on the left hand side of the page. How can I center it?
HTML:
<div class="container">
<div class="row">
<div class="col-md">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
</div>
The easiest way I see is adding two more divisions with col-md-3 on either side of your form div like this:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
<div class="cold-md-3">
</div>
</div>
Try adding "m-auto" class in your col-md-6 div. Like this:
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input t`enter code here`ype="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
I am trying to design a form but it is not being well formed. I need to make it responsive. But checkbox is not aligned well in horizontal.
<form class="ng-pristine ng-scope ng-pending">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input_force"><i class="ti-pin"></i></span>
<input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address"
name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span>
<input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false">
</div>
</div>
<div class="row">
<div class="form-group" style="display: block; width: 100%;">
<div class="col-sm-8">
<div class="input-group" style="width: 100%;">
<span class="input-group-addon"><i class="ti-mobile"></i></span>
<input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" style=" width: 100%;">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label >
<input type="checkbox" style="" id="is_ok_to_leave_at_the_door" class="form-control ng-pristine ng-untouched ng-valid ng-empty" checked="checked" ng-model="order.is_ok_to_leave_at_the_door"> Ok to leave at the door
</label>
</div>
</div>
</div>
</div>
</form>
you can checkout my code over this URL.
https://jsfiddle.net/ahmeric/Lrgdk6uh/
here is the solution. You can see the related part in this URL.
https://jsfiddle.net/ahmeric/Lrgdk6uh/5/
<form class="ng-pristine ng-scope ng-pending">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input_force"><i class="ti-pin"></i></span>
<input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address"
name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span>
<input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false">
</div>
</div>
<div class="row mb-5">
<div class="form-group">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="ti-mobile"></i></span>
<input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" >
</div>
</div>
</div>
<div class="form-group ml-20">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 pull-right pt-5">
<div>
<label class="checkbox-inline">
<input type="checkbox" style="" id="is_ok_leave_at_the_door" checked="checked" ng-model="order.is_ok_leave_at_the_door"> Ok to leave at the door
</label>
</div>
</div>
</div>
</div>
</form>
I'm trying to get the 'contact' form on my page in the middle of the webpage.
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Uw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Uw e-mail:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Uw vraag:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Verstuur bericht" />
</ul>
</form>
use css:
#contact_form {width:400px;display:block;margin:0 auto;}
contact_form {position:absolute; top:50px;left:10px;width:500px;display:block;margin:0 auto;}