Skip to content

Instantly share code, notes, and snippets.

@clarade

clarade/form.html

Last active March 12, 2021 19:42
Show Gist options
  • Save clarade/eb7193c7734ce064b6aaef39e61c39e5 to your computer and use it in GitHub Desktop.
Save clarade/eb7193c7734ce064b6aaef39e61c39e5 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise about advanced PHP with forms
Raw
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>Form</title>
</head>
<body>
<div class="card">
<form action="validationText.php" method="post">
<div>
<label for="surName">Surname :</label>
<input type="text" id="surName" name="surName">
</div>
<div>
<label for="firstName">First name :</label>
<input type="text" id="firstName" name="firstName">
</div>
<div>
<label for="email">E-mail :</label>
<input type="email" id="email" name="userEmail">
</div>
<div>
<label for="phone">Phone :</label>
<input type="tel" id="phone" name="userPhone">
</div>
<div>
<label for="reason-select">Subject :</label>
<select id="reason-select" name="selectOption">
<option value="">--Please choose an option--</option>
<option value="voucher">Your voucher</option>
<option value="flight_infos">About my flight</option>
<option value="refund">Your refund</option>
<option value="anotherReason">Another reason</option>
</select>
</div>
<div>
<label for="message">Message :</label>
<textarea id="message" name="userMessage"></textarea>
</div>
<div class="button">
<button type="submit">Send it!</button>
</div>
</form>
</div>
</body>
</html>
Raw
style.css
/* Added optionnal CSS file to make it a little bit prettier */
/* global style that can be use in both files (form.php & validationText.php) */
body {
font-family: Helvetica;
background-color: #3b3740;
margin: none;
}
/* for form part */
.card {
display: flex;
flex-direction: row;
justify-content: center;
background: linear-gradient(#e66465, #9198e5);
opacity: 70%;
margin: auto;
border-radius: 3px;
width: 40%;
padding: 25px;
}
form {
display: flex;
flex-direction: column;
align-content: space-around;
}
div {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
color: white;
}
/* for validation part */
.card-validation {
background: linear-gradient(#f7f1e3, #f9fafa);
opacity: 70%;
margin: auto;
border-radius: 3px;
width: 50%;
height: 40%;
padding: 25px;
}
p {
color: black;
margin: none;
text-align: center;
}
Raw
validationText.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>Form has been send!</title>
</head>
<?php
$surName=$_POST["surName"];
$firstName=$_POST["firstName"];
$selectOption=$_POST["selectOption"];
$userEmail=$_POST["userEmail"];
$userPhone=$_POST["userPhone"];
$userMessage=$_POST["userMessage"];
?>
<body>
<div class="card-validation">
<p>
Thank you <?php echo $surName ?> <?php echo $firstName ?>,
for contacting us about <?php echo $selectOption ?>;
</p>
<p>
One of our members crew will answer you at <?php echo $userEmail ?> or by phone at
</br>
<?php echo $userPhone ?> as soon as possible to handle
your
<i>
"<?php echo $userMessage ?>"
</i>
request.
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment