Add more features and form
This commit is contained in:
BenjaminToby
parent
10908c151c
commit
38f00597ae
76
contact-form-process.php
Normal file
76
contact-form-process.php
Normal file
@ -0,0 +1,76 @@
|
||||
<?php
|
||||
if (isset($_POST['Email'])) {
|
||||
|
||||
// EDIT THE 2 LINES BELOW AS REQUIRED
|
||||
$email_to = "benoti.san@gmail.com";
|
||||
$email_subject = "New form submissions";
|
||||
|
||||
function problem($error)
|
||||
{
|
||||
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
|
||||
echo "These errors appear below.<br><br>";
|
||||
echo $error . "<br><br>";
|
||||
echo "Please go back and fix these errors.<br><br>";
|
||||
die();
|
||||
}
|
||||
|
||||
// validation expected data exists
|
||||
if (
|
||||
!isset($_POST['Name']) ||
|
||||
!isset($_POST['Email']) ||
|
||||
!isset($_POST['Message'])
|
||||
) {
|
||||
problem('We are sorry, but there appears to be a problem with the form you submitted.');
|
||||
}
|
||||
|
||||
$name = $_POST['Name']; // required
|
||||
$email = $_POST['Email']; // required
|
||||
$message = $_POST['Message']; // required
|
||||
|
||||
$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 .= 'The Email address you entered does not appear to be valid.<br>';
|
||||
}
|
||||
|
||||
$string_exp = "/^[A-Za-z .'-]+$/";
|
||||
|
||||
if (!preg_match($string_exp, $name)) {
|
||||
$error_message .= 'The Name you entered does not appear to be valid.<br>';
|
||||
}
|
||||
|
||||
if (strlen($message) < 2) {
|
||||
$error_message .= 'The Message you entered do not appear to be valid.<br>';
|
||||
}
|
||||
|
||||
if (strlen($error_message) > 0) {
|
||||
problem($error_message);
|
||||
}
|
||||
|
||||
$email_message = "Form details below.\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";
|
||||
|
||||
// create email headers
|
||||
$headers = 'From: ' . $email . "\r\n" .
|
||||
'Reply-To: ' . $email . "\r\n" .
|
||||
'X-Mailer: PHP/' . phpversion();
|
||||
@mail($email_to, $email_subject, $email_message, $headers);
|
||||
?>
|
||||
|
||||
<!-- include your success message below -->
|
||||
|
||||
Thank you for contacting us. We will be in touch with you very soon.
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
@ -260,9 +260,9 @@ sections.forEach(item => {
|
||||
|
||||
//############################################# -- Content intersection Observer
|
||||
|
||||
var contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
const contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
|
||||
var contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
|
||||
const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
|
||||
|
||||
function contentsObserverFn(entries) {
|
||||
|
||||
@ -283,6 +283,76 @@ contents.forEach(item => {
|
||||
|
||||
|
||||
|
||||
const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
|
||||
const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
|
||||
const myToolsParagraph = document.querySelector(".my-specialties-section p");
|
||||
|
||||
let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
|
||||
|
||||
const myToolsIconsAnimated = anime({
|
||||
targets: myToolsIcons,
|
||||
translateX: [-20, 0],
|
||||
translateY: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: anime.stagger(150, {start: 200}),
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
|
||||
});
|
||||
|
||||
function myToolsFn(entries) {
|
||||
|
||||
if(entries[0].isIntersecting) {
|
||||
myToolsIconsAnimated.play();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
myToolsIO.observe(myToolsParagraph);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Contact Form
|
||||
|
||||
//var form = document.getElementById("my-form");
|
||||
//
|
||||
// async function handleSubmit(event) {
|
||||
// event.preventDefault();
|
||||
// var status = document.getElementById("my-form-status");
|
||||
// var data = new FormData(event.target);
|
||||
// fetch(event.target.action, {
|
||||
// method: form.method,
|
||||
// body: data,
|
||||
// headers: {
|
||||
// 'Accept': 'application/json'
|
||||
// }
|
||||
// }).then(response => {
|
||||
// status.innerHTML = "Thanks for your submission!";
|
||||
// form.reset()
|
||||
// }).catch(error => {
|
||||
// status.innerHTML = "Oops! There was a problem submitting your form"
|
||||
// });
|
||||
// }
|
||||
// form.addEventListener("submit", handleSubmit)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
44
v3.css
44
v3.css
@ -507,6 +507,50 @@ input:focus {
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- About Me -- */
|
||||
|
||||
.my-specialties-section {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: var(--dark-color);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.my-specialties-section h2 {
|
||||
|
||||
}
|
||||
|
||||
.my-specialties-section p {
|
||||
color: rgba(255,255,255,0.70);
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.my-specialties-section > div {
|
||||
max-width: 1140px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.my-specialties-section > div > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--main-color);
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
88
v3.html
88
v3.html
@ -116,6 +116,94 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">About Me</h2>
|
||||
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- My Specialties -->
|
||||
|
||||
<section class="my-specialties-section">
|
||||
<h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
|
||||
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
|
||||
<div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Contact Me -->
|
||||
|
||||
<section class="my-work-section">
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">So. Let's have a chat</h2>
|
||||
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
</div>
|
||||
|
||||
<div class="scroll-into-view">
|
||||
|
||||
<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Name" class="fcf-label">Your name</label>
|
||||
<div class="fcf-input-group">
|
||||
<input type="text" id="Name" name="Name" class="fcf-form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Email" class="fcf-label">Your email address</label>
|
||||
<div class="fcf-input-group">
|
||||
<input type="email" id="Email" name="Email" class="fcf-form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Message" class="fcf-label">Your message</label>
|
||||
<div class="fcf-input-group">
|
||||
<textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
|
||||
</div>
|
||||
|
||||
<div class="fcf-credit" id="fcf-credit">
|
||||
Simple HTML email form provided by: <a href="https://www.freecontactform.com" target="_blank">FreeContactForm.com</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user