Skip to content

Commit

Permalink
contact form edits
Browse files Browse the repository at this point in the history
  • Loading branch information
@charlestephen
charlestephen committed Feb 22, 2024
1 parent d079092 commit 62a8228
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 30 deletions.
42 changes: 42 additions & 0 deletions assets/vendor/php-email-form/php-email-form.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?php

// Email address verification
function isEmail($email) {
return filter_var($email, FILTER_VALIDATE_EMAIL);
}

if($_POST) {

// Enter the email where you want to receive the message
$emailTo = '[email protected]';

$clientEmail = addslashes(trim($_POST['email']));
$subject = addslashes(trim($_POST['subject']));
$message = addslashes(trim($_POST['message']));
$antispam = addslashes(trim($_POST['antispam']));

$array = array('emailMessage' => '', 'subjectMessage' => '', 'messageMessage' => '', 'antispamMessage' => '');

if(!isEmail($clientEmail)) {
$array['emailMessage'] = 'Invalid email!';
}
if($subject == '') {
$array['subjectMessage'] = 'Empty subject!';
}
if($message == '') {
$array['messageMessage'] = 'Empty message!';
}
if($antispam != '12') {
$array['antispamMessage'] = 'Wrong antispam answer!';
}
if(isEmail($clientEmail) && $subject != '' && $message != '' && $antispam == '12') {
// Send email
$headers = "From: " . $clientEmail . " <" . $clientEmail . ">" . "\r\n" . "Reply-To: " . $clientEmail;
mail($emailTo, $subject . " (bootstrap contact form tutorial)", $message, $headers);
}

echo json_encode($array);

}

?>
85 changes: 85 additions & 0 deletions assets/vendor/php-email-form/validate.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/**
* PHP Email Form Validation - v3.7
* URL: https://bootstrapmade.com/php-email-form/
* Author: BootstrapMade.com
*/
(function () {
"use strict";

let forms = document.querySelectorAll('.php-email-form');

forms.forEach( function(e) {
e.addEventListener('submit', function(event) {
event.preventDefault();

let thisForm = this;

let action = thisForm.getAttribute('action');
let recaptcha = thisForm.getAttribute('data-recaptcha-site-key');

if( ! action ) {
displayError(thisForm, 'The form action property is not set!');
return;
}
thisForm.querySelector('.loading').classList.add('d-block');
thisForm.querySelector('.error-message').classList.remove('d-block');
thisForm.querySelector('.sent-message').classList.remove('d-block');

let formData = new FormData( thisForm );

if ( recaptcha ) {
if(typeof grecaptcha !== "undefined" ) {
grecaptcha.ready(function() {
try {
grecaptcha.execute(recaptcha, {action: 'php_email_form_submit'})
.then(token => {
formData.set('recaptcha-response', token);
php_email_form_submit(thisForm, action, formData);
})
} catch(error) {
displayError(thisForm, error);
}
});
} else {
displayError(thisForm, 'The reCaptcha javascript API url is not loaded!')
}
} else {
php_email_form_submit(thisForm, action, formData);
}
});
});

function php_email_form_submit(thisForm, action, formData) {
fetch(action, {
method: 'POST',
body: formData,
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(response => {
if( response.ok ) {
return response.text();
} else {
throw new Error(`${response.status} ${response.statusText} ${response.url}`);
}
})
.then(data => {
thisForm.querySelector('.loading').classList.remove('d-block');
if (data.trim() == 'OK') {
thisForm.querySelector('.sent-message').classList.add('d-block');
thisForm.reset();
} else {
throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action);
}
})
.catch((error) => {
displayError(thisForm, error);
});
}

function displayError(thisForm, error) {
thisForm.querySelector('.loading').classList.remove('d-block');
thisForm.querySelector('.error-message').innerHTML = error;
thisForm.querySelector('.error-message').classList.add('d-block');
}

})();
2 changes: 2 additions & 0 deletions forms/Readme.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
Fully working PHP/AJAX contact form script is available in the pro version of the template.
You can buy it from: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
41 changes: 41 additions & 0 deletions forms/contact.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<?php
/**
* Requires the "PHP Email Form" library
* The "PHP Email Form" library is available only in the pro version of the template
* The library should be uploaded to: vendor/php-email-form/php-email-form.php
* For more info and help: https://bootstrapmade.com/php-email-form/
*/

// Replace [email protected] with your real receiving email address
$receiving_email_address = '[email protected]';

if( file_exists($php_email_form = '../assets/vendor/php-email-form/php-email-form.php' )) {
include( $php_email_form );
} else {
die( 'Unable to load the "PHP Email Form" Library!');
}

$contact = new PHP_Email_Form;
$contact->ajax = true;

$contact->to = $receiving_email_address;
$contact->from_name = $_POST['name'];
$contact->from_email = $_POST['email'];
$contact->subject = $_POST['subject'];

// Uncomment below code if you want to use SMTP to send emails. You need to enter your correct SMTP credentials
/*
$contact->smtp = array(
'host' => 'example.com',
'username' => 'example',
'password' => 'pass',
'port' => '587'
);
*/

$contact->add_message( $_POST['name'], 'From');
$contact->add_message( $_POST['email'], 'Email');
$contact->add_message( $_POST['message'], 'Message', 10);

echo $contact->send();
?>
92 changes: 62 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,43 +537,75 @@ <h5>Jan 2012 - Jan 2013</h5>
</section>
<!-- End Resume Section -->

<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>
If you feel the need to reach out, my contact information is below
and I do freelance work often. Hit me up.
</p>
</div>
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">

<div class="row" data-aos="fade-in">
<div class="col-lg-5 d-flex align-items-stretch">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>Brooklyn, NY 11238</p>
</div>
<div class="section-title">
<h2>Contact</h2>
<p>Feel free to hit me up as I do freelance work often.</p>
</div>

<div class="row" data-aos="fade-in">

<div class="col-lg-5 d-flex align-items-stretch">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>565 Prospect Place, Brooklyn, NY 11238</p>
</div>

<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>[email protected]</p>
</div>

<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>+1.646.902.1485</p>
</div>

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sDowntown+Conference+Center!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen></iframe>
</div>

<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>[email protected]</p>
</div>

<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>+1.646.902.1485</p>
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">Your Name</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">Your Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="name">Subject</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">Message</label>
<textarea class="form-control" name="message" rows="10" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>

</div>

</div>
</div>
</div>
</section>
<!-- End Contact Section -->
</section><!-- End Contact Section -->
</main>
<!-- End #main -->

Expand Down

0 comments on commit 62a8228

Please sign in to comment.