After more than a month of coding I though I'm already finish it that's why I put it on hosting already, but after I check it on my mobile phone it shock me of the result :(
This is the result in mobile
Form image
Form image with table
anyone can give me an idea on what should I do? i dont want to make from scratch again this is my css, this is two column in 1 page with form in the left and table in the right
body {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
position:relative;
text-align: center;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
.column {
float: left;
padding: 10px;
}
.left {
padding: 25px;
margin: 25px;
width: 40%;
border-radius: 5px;
box-shadow: 1 2px 5px #f5f5f5;
background: white;
border: solid 1px #ccc;
border: 2px solid dodgerblue;
}
.right {
padding: 25px;
margin: 25px;
width: 50%;
border-radius: 5px;
box-shadow: 1 2px 5px #f5f5f5;
background: white;
border: 2px solid dodgerblue;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type="text"]
{
display: inline-block;
float: left;
padding: 12px; line-height: 5px;
margin: 5px;
height: 40px;
}
label {
display: inline-block;
width: 150px;
padding-left: 5px
}
.main-block {
display: flex;
justify-content: center;
min-height: 100vh;
background-color: #85C1E9;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
outline: none;
font-family: Roboto, Arial, sans-serif;
border: none;
border-radius: 5px;
background: #00BFFF;
font-size: 50px;
color: #fff;
cursor: pointer;
}
button:hover {
background: cyan;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}
.mix3 {
margin: 0px;
width: 100%;
border-width: strong;
padding: 10px 10px;;
}
This is the form
<div class="main-block">
<div class="column left">
<i class="fa fa-window-restore"></i>
<div class="mix3">
<h5 style="text-align: center; margin-bottom:-10px"><b style="color:red"> STATUS:<a style="color:blue"> <?php echo $status; ?></a></b></h5>
</div>
<form name="frmUser" method="post">
<div><?php if(isset($message)) { echo $message; } ?>
</div>
<div >
<h3><b>Payment Voucher Form </b></h3>
</div>
<div style="margin-bottom:10px; margin-top:20px; " class="bootstrap-demo">
<label style="margin-left: 20px; font-weight: bold;" class="checkbox-inline"> <!-- class checkbox-inline to display checkbox inline -->
<!-- input type checkbox -->
<input type="checkbox" id="cashbox" value="Cash"> Cash
</label>
<label style="margin-left: -50px; font-weight: bold;" class="checkbox-inline">
<input type="checkbox" id="chequebox" value="Cheque"> Cheque
</label>
<label style="margin-left: -50px; margin-right: -30px; font-weight: bold;" class="checkbox-inline">
<input type="checkbox" id="banktransferbox" value="BankTransfer"> Bank Transfer
</label>
</div>
<input type="hidden" name="userid" class="txtField" value="<?php echo $row['ID']; ?>">
<div class="form-row">
<input type="hidden" name="id" class="txtField" value="<?php echo $row['ID']; ?>">
<div class="col-md-7 mb-2">
<label>Payment Voucher ID</label>
<input placeholder="Payment Voucher ID" id ="pv_no" type="text" name="pvid" class="form-control" value="<?php echo $row['PViD']; ?>">
</div>
<div class="col-md-5 mb-2">
<label>Date</label>
<input placeholder="Date" type="text" id="pvdate" name="pvdate" class="form-control" value="<?php echo $row['PVDate']; ?>">
</div>
<div class="col-md-7 mb-2">
<label>Paid to</label>
<input placeholder="Paid to" type="text" name="pvname" class="form-control" value="<?php echo $row['Name']; ?>">
</div>
<div class="col-md-5 mb-2">
<label>Contact No.</label>
<input placeholder="Contact #" type="text" name="contactnumber" class="form-control" value="<?php echo $row['ContactNumber']; ?>">
</div>
<div class="mb-2" style="padding-left: 20px">
<label>The Sum of</label>
<textarea placeholder="The Sum of" name="suminwords" class="form-control"><?php echo $row['SumInWords']; ?></textarea>
</div>
<div class="mb-2" style="padding-left: 20px">
<label>In Respect of</label>
<textarea placeholder="Respectof" name="respectof" class="form-control"><?php echo $row['RespectOf']; ?></textarea>
</div>
<div class="col-md-6 mb-2">
<label>Price</label>
<input placeholder="Total" type="text" name="price" class="form-control" value="<?php echo $row['Price']; ?>">
</div>
<div class="col-md-6 mb-2" >
<label>Cash</label>
<input placeholder="Cash" type="text" name="cash" class="form-control" value="<?php echo $row['Cash']; ?>">
</div>
<div class="col-md-6 mb-2" style="float:right">
<label>Bank Name</label>
<input placeholder="Bank Name" type="text" name="bankname" class="form-control" value="<?php echo $row['BankName']; ?>">
</div>
<div class="col-md-6 mb-2">
<label>VAT 5%</label>
<input placeholder="VAT" type="text" name="vat" class="form-control" value="<?php echo $row['VAT']; ?>">
</div>
<div class="col-md-6 mb-2">
<label>Total</label>
<input placeholder="Total" type="text" name="total" class="form-control" value="<?php echo $row['Total']; ?>">
</div>
<div class="col-md-6 mb-2">
<label>Cheque No</label>
<input placeholder="Cheque No" type="text" name="chequenumber" class="form-control" value="<?php echo $row['ChequeNumber']; ?>">
</div>
<div class="col-md-6 mb-2" style="float:right">
<label>Cheque Date</label>
<input placeholder="Cheque Date" type="text" id="cheque_date" name="chequedate" class="form-control" value="<?php echo $row['ChequeDate']; ?>">
</div>
<div style="margin-bottom: 150px"> </div>
<label class="col-md-8"> Remarks</label>
<div class="mb-2" style="padding-left: 20px">
<textarea placeholder="Remarks" name="remarks" class="form-control"><?php echo $row['Remarks']; ?></textarea>
</div>
<br>
<div class="col-md-6 mb-2" style="float:right">
<label>Prepared By </label>
<input placeholder="Cheque No." type="text" name="preparedby" class="form-control" value="<?php echo $row['PreparedBy']; ?>">
</div>
<div class="col-md-6 mb-2" style="float:right">
<label>Approved By </label>
<input placeholder="Cheque No." type="text" name="approvedby" class="form-control" value="<?php echo $row['ApprovedBy']; ?>">
</div>
<br><br><br><br><br>
<div class="col-md-6 mb-2" style="float:right">
<label>Received By </label>
<input placeholder="Received By" type="text" name="receivedby" class="form-control" value="<?php echo $row['ReceivedBy']; ?>">
</div>
</div>
<div class="col-md-10 mb-1">
<div class="btn-block">
<button style="width:40%; padding: 10px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); color:black; margin-left: 20px" type="submit" name="submit" value="Submit"><b>Update / Add Record</b></button>
</div>
</div>
</form>
<button onclick="location.href='/payment-voucher'" type="button" style="width:30%; color:white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:red; font-size: 15px; float:right; padding: 15px;"><b>Clear</b></button>
</div>
<div class="column right">
<i class="fa fa-window-restore"></i>
<div>
<h3><b>Payment Voucher List </b></h3>
</div>
<div class="col-md-6">
<input size="50" type="text" name="search" id="search" class="form-control" placeholder="Search name.." />
</div>
<br><br><br>
<div class="col-md-4">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
</div>
<div class="col-md-4">
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
</div>
<div class="col-md-5">
<input type="button" name="filter" id="filter" value="Search" class="btn btn-info" />
</div>
<div style="clear:both"></div>
<br>
<div id="pvoucher">
<table class="table table-bordered">
<tr style="background-color: #85C1E9; color:white; ">
<th>ID</th>
<th>PVID</th>
<th>PVDate</th>
<th>Name</th>
<th>Update</th>
<th>Delete</th>
<th>Print</th>
</tr>
</table>
<?php if (isset($_SESSION['message'])):
$e = $_SESSION['message'];
?>
<div class="msg">
<?php
$e = $_SESSION['message'];
echo '<tr>';
echo '<td colspan="5">'. $e . '</td>';
echo '</tr>';
unset($_SESSION['message']);
?>
</div>
<?php endif
?>
</div>
</div>
</div>
You should use #media and for example when width of window is smaller than 700px set one column. You should also add meta tag to your html to give browser tips how should scal your website on mobile phones.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Please have a look at the image and the code below. I am making simple signup html form. I am trying to keep in middle of the screen. also I just want to make div background opacity 50% but somehow, text input's and button's opacity is also changed to 50%.
Please help me to find a solution.
Here's a code of a simple signup form.
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgb(255,255,255); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
See Output of the code above
Please explain or answer deeply. Thanks in advance
just use this color code for the div if you want to make its opacity 50% only<div style="background-color: rgb(255,255,255,.5); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">and then you dont have to use the opacity for the div.
first give some width to your formform{width:600px;margin:auto; display:block; }it will makes your form in center.
to give margin from top and bottom give style like thisform{margin:150px auto;} so it will also give margin from top-bottom.
Try this your code will be run
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgba(255,255,255, .5); display: table; padding: 20px; border-radius: 25px; margin: 0px auto; text-align: center; top: 50%; left:50%; position: absolute; transform: translate(-50%, -50%)">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none; background: #fff;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
show code bellow:
body {
text-align: center;
}
form {
display: inline-block;
}
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgb(255,255,255,0.5);display: inline-table; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
I have prepared a snippet for you, using the display: table(-X) properties:
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<div style="display:table; height:calc(100vh - 50px); width:100%;"><!-- Change the "-50px" part to whatever size your navbar is -->
<div style="display:table-row;">
<div style="display: table-cell; vertical-align:middle; text-align:center;">
<form style="margin:auto;">
<div style="background-color: rgb(255,255,255); opacity: 0.5; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Hope this helps!
I created the contact form in html and css now comes the hard part.
Since it is my first experience with the php code sapede tell me how to create the code so that you can send the mail with all the information on the form?
Sorry for my bad English, Let me know if you didn't understand my Question
The HTML code
<form id="contactform">
<div class="formcolumn">
<label for="name">Nome e Cognome</label>
<input type="text" id="name" />
<label for="indirizzo">Indirizzo</label>
<input type="text" id="indirizzo" />
<ul>
<li>Consegna a Domicilio<input type="checkbox" id="domicilio" /></li>
</ul>
</div>
<div class="formcolumn">
<label for="telefono">Telefono</label>
<input type="text" id="telefono" />
<label for="email">E-mail</label>
<input type="email" id="email" />
<ul>
<li>Ritiro presso la macelleria<input type="checkbox" id="macelleria" /></li>
</ul>
</div>
<div class="formcolumn_2">
<label for="consegna">Indirizzo di consegna</label>
<input type="text" id="consegna" />
<label for="note">Note</label>
<input type="text" id="note" />
<label for="feedback">Ordine</label>
<textarea id="feedback"></textarea>
</div>
<div class="buttons">
<input class="button" value="INVIA" type="INVIA">
</div>
</form>
The CSS code
#contactform{
font-family:"Eras Medium ITC";
width: 585px;
border: 1px solid blue;
}
.formcolumn input, #contactform textarea{
width:95%;
border: 2px solid orange;
padding: 4px;
}
.formcolumn_2 input, #contactform textarea{
width:571px;
border: 2px solid orange;
padding: 4px;
}
#contactform textarea{
resize:vertical;
height: 200px;
}
#contactform input[type="checkbox"]{
width: auto;
float:right;
height: auto;
margin-left: 15px;
margin-bottom: 25px;
}
#contactform .formcolumn{
width:280px;
float: left;
}
#contactform .formcolumn:first-of-type{
margin-right: 25px;
}
#contactform label {
padding-top:10px;
padding-bottom:5px;
display: block;
}
#contactform ul{
list-style:none;
list-type: none;
margin: 0;
padding: 0;
float: left;
}
#contactform ul li{
float: left;
width: auto;
margin-top:20px;
}
#contactform div.buttons{
clear: both;
text-align: center;
}
#contactform input.button{
margin-top: 1.5EM;
width: 50%;
box-shadow: 0 0 10px gray;
text-transform: uppercase;
cursor: pointer;
min-width: 100px;
max-width: 600px;color: white;
font-weight: bold;
letter-spacing: 7px;
text-shadow: 0 -2px 1px #8a8a8a;
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%,
rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)),
color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom, rgba(169,3,41,1)
0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
#contactform input.button:active{
text-shadow: 0 0 1px #8a8a8a;
background: rgb(109,0,25);
background: -moz-linear-gradient(top, rgba(109,0,25,1) 0%,
rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)),
color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom, rgba(109,0,25,1)
0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 );
}
Also can you tell me because even though I gave text-align: center INVIO button on the message remains on the left?
you need something like this
<html><body>
<form action= "post.php" method= "POST">
<p>Имя: </p><p> <input type= "text" name= "name"> </p>
<p>E-mail: </p><p> <input type= "text" name= "email"></p>
<p>Сообщение: </p><p> <textarea rows= "10" cols= "45" name= "message"></textarea></p>
<input type= "submit" value= "Отправить">
</body></html>
where action= "post.php" php file is a connection, so you need to explicitly write this file to send letters and then connect it as in Example
just copy and paste..hope this will help you!
<?php
if(isset($_POST['subm']))
{
$name=$_POST['name'];
$Indirizzo=$_POST['Indirizzo'];
$telefono=$_POST['telefono'];
$email=$_POST['email'];
$consegna=$_POST['consegna'];
$note=$_POST['note'];
$feedback=$_POST['feedback'];
$to = "somebody#example.com";
$subject = "Details";
$message = "
<html>
<head>
<title>Contact details</title>
</head>
<body>
<p>Your Details</p>
<table>
<tr>
<th>Name</th>
<th>Indirizzo</th>
<th>telefono</th>
<th>email</th>
<th>consegna</th>
<th>note</th>
<th>feedback</th>
</tr>
<tr>
<td>$name</td>
<td>$Indirizzo</td>
<td>$telefono</td>
<td>$email</td>
<td>$consegna</td>
<td>$note</td>
<td>$feedback</td>
</tr>
</table>
</body>
</html>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From: somebody#example.com>' . "\r\n";
$headers .= 'Cc: somebody#example.com' . "\r\n";
mail($to,$subject,$message,$headers);
echo "Thank you for sending us feedback";
}
?>
<html>
<head>
</head>
<title>feedback form</title>
<style>
<---your css code -->
</style>
</head>
<body>
<form id="contactform" method="post">
<div class="formcolumn">
<label for="name">Nome e Cognome</label>
<input type="text" id="name" name="name" />
<label for="indirizzo">Indirizzo</label>
<input type="text" id="indirizzo" name="Indirizzo" />
<ul>
<li>Consegna a Domicilio<input type="checkbox" id="domicilio" /></li>
</ul>
</div>
<div class="formcolumn">
<label for="telefono">Telefono</label>
<input type="text" id="telefono" name="telefono" />
<label for="email">E-mail</label>
<input type="email" id="email" name="email" />
<ul>
<li>Ritiro presso la macelleria<input type="checkbox" id="macelleria" /></li>
</ul>
</div>
<div class="formcolumn_2">
<label for="consegna">Indirizzo di consegna</label>
<input type="text" id="consegna" name="consegna"/>
<label for="note">Note</label>
<input type="text" id="note" name="note"/>
<label for="feedback">Ordine</label>
<textarea id="feedback" name="feedback"></textarea>
</div>
<div class="buttons">
<input class="button" value="INVIA" name="subm" type="submit">
</div>
</form>
</body>
</html>