Skip to content

Commit

Permalink
updated contact form
Browse files Browse the repository at this point in the history
mobile support is not here tho :(
  • Loading branch information
IamChristianS committed Aug 13, 2023
1 parent 275300b commit d6a0bea
Show file tree
Hide file tree
Showing 3 changed files with 226 additions and 7 deletions.
151 changes: 151 additions & 0 deletions contact.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,104 @@

gtag('config', 'G-M9KJ1XPKLF');
</script>
<!--Styling-->
<style>
/* Google Form */
.form-container {
margin: 2vw 6vw;
display: flex;
}
.form-box {
background-color: #708CA8;
border-radius: 1vw;
width: 100vw;
margin: 0 1vw;
}
.form-title {
font-family: 'Montserrat', Courier, monospace;
font-size: large;
font-weight: bold;
color: #ffffff;
}
.form {
background-color: white;
max-height: 25vw;
}
@media screen and (max-width: 1200px) {

}

/* Email Form */
.contact-container * {
box-sizing: border-box;
font-family: 'Montserrat', Courier, monospace;
}
.contact-container {
width: 75%;
}
.contact-form label {
display: block;
padding: 12px 0 6px 0;
letter-spacing: -0.2px;
cursor: text;
font-size: 16px;
font-weight: 700;
}
.contact-form input, .contact-form textarea {
font-size: 16px;
display: block;
width: 100%;
padding: 10px;
background-color: #e5e7eb;
border: none;
border: 4px solid #e5e7eb;
outline: none;
border-radius: 8px;
color: #9da3ae;
}
.contact-form input:focus, .contact-form textarea:focus {
background-color: #ffffff;
color: #9da3ae;
}
.contact-form input:focus:required:invalid {
border-color: #708CA8;
background-color: #ffffff;
}
.contact-form button {
display: block;
margin-top: 12px;
width: 100%;
padding: 12px 20px;
border-radius: 8px;
border-color: transparent;
background-color: #708CA8;
color: #ffffff;
font-weight: 700;
font-size: 18px;
transition: 300ms all;
}
.contact-form button:hover {
background-color: #5d7994;
}
.contact-alert {
padding: 12px;
border-radius: 10px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
margin-top: 12px;
display: none;
}
.contact-alert.visible {
display: block;
}
.contact-alert.success {
background: #69cf9d;
}
.contact-alert.error {
background: #de524c;
}
</style>
</head>
<body>
<!--Navbar-->
Expand Down Expand Up @@ -91,6 +189,58 @@
<img src="img/header.png" alt="Image couldn't load." class="img-header" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

<!--Content-->
<center class="form-container">
<!--Ad Segment-->
<script>
var afg={};afg.u=6328;afg.s=5;
document.write("<sc"+"ript src='//js.adforgames.com/cd.js'></sc"+"ript>");
</script>

<div class="form-box">
<p class="form-title">Game Request</p>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScuv3_LcWKJ-8SJRzdFT48ml4S29DI9up24Bp5CA8FLJA-mnw/viewform?embedded=true"
class="form"
width="100%"
height="800"
frameborder="0"
marginheight="0"
marginwidth="0">Loading…
</iframe>
</div>
<div class="form-box" id="incomplete">
<p class="form-title">Contact Form</p>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSebf0X_0bCTnUMxfTsbX5lUtl00Aspj_ktVKO3C5qN-tjqBsQ/viewform?embedded=true"
class="form"
width="100%"
height="800"
frameborder="0"
marginheight="0"
marginwidth="0">Loading…
</iframe>
</div>
<div class="contact-container">
<form action="form_process.php" method="POST" class="contact-form">
<label for="name">Your Name</label>
<input type="text" id="name" name="fullName" required>

<label for="email">Your Email Address</label>
<input type="email" id="email" name="email" required>

<label for="message">Your Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>

<button type="submit">Send</button>
</form>
</div>

<!--Ad Segment-->
<script>
var afg={};afg.u=6328;afg.s=5;
document.write("<sc"+"ript src='//js.adforgames.com/cd.js'></sc"+"ript>");
</script>
</center>

<!--
<center style="margin-bottom: 2vw; margin-top: 2vw;">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSebf0X_0bCTnUMxfTsbX5lUtl00Aspj_ktVKO3C5qN-tjqBsQ/viewform?embedded=true"
width="100%"
Expand All @@ -100,6 +250,7 @@
marginwidth="0">Loading…
</iframe>
</center>
-->

<!--Footer--->
<footer class="footer">
Expand Down
70 changes: 70 additions & 0 deletions form_process.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<?php
if (isset($_POST['email'])) {

$email_to = "[email protected]";
$email_subject = "You've got a new submission";

function problem($error)
{
echo "Oh looks like there is some problem with your form data: <br><br>";
echo $error . "<br><br>";
echo "Please fix those to proceed.<br><br>";
die();
}

if (
!isset($_POST['fullName']) ||
!isset($_POST['email']) ||
!isset($_POST['message'])
) {
problem('Oh looks like there is some problem with your form data.');
}

$name = $_POST['fullName'];
$email = $_POST['email'];
$message = $_POST['message'];

$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

if (!preg_match($email_exp, $email)) {
$error_message .= 'Email address does not seem valid.<br>';
}

$string_exp = "/^[A-Za-z .'-]+$/";

if (!preg_match($string_exp, $name)) {
$error_message .= 'Name does not seem valid.<br>';
}

if (strlen($message) < 6) {
$error_message .= 'Message should not be less than 6 characters<br>';
}

if (strlen($error_message) > 0) {
problem($error_message);
}

$email_message = "Form details following:\n\n";

function clean_string($string)
{
$bad = array("content-type", "bcc:", "to:", "cc:", "href");
return str_replace($bad, "", $string);
}

$email_message .= "Name: " . clean_string($name) . "\n";
$email_message .= "Email: " . clean_string($email) . "\n";
$email_message .= "Message: " . clean_string($message) . "\n";

$headers = 'From: ' . $email . "\r\n" .
'Reply-To: ' . $email . "\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>

Thank you for your response, we will get back to you shortly. Keep an eye out for our email: [email protected]

<?php
}
?>
12 changes: 5 additions & 7 deletions stylesheet.css
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,6 @@ body {
padding: 1vh 10vw;
padding-bottom: 2vh;
}
@media screen and (max-width: 768px) {
.footer-about {
padding: 1vh 0;
font-size: 12px;
}
}
.footer-link a {
text-decoration: none;
padding: 5px 10px;
Expand All @@ -152,8 +146,12 @@ body {
}
@media screen and (max-width: 768px) {
.footer {
padding: 20px 20px;
padding: 20px 10px;
padding-bottom: 40px;
font-size: 12px;
}
.footer-about {
padding: 1vh 0;
font-size: 10px;
}
}

0 comments on commit d6a0bea

Please sign in to comment.