pinceladasdaweb / ajax-contact-form

A simple Ajax Contact Form developed in PHP with HTML5 Form validation and pure JavaScript

Ajax Contact Form

A Simple Ajax Contact Form developed in PHP with HTML5 Form validation and pure JavaScript.

Download

You can download the latest version or checkout all the releases here.

Requirements

• PHP >=5.3

How to use?

Open the config.php config.php file and fill with your informations.

<?php

return [
    'subject' => [
        'prefix' => '[Contact Form]'
    ],
    'emails' => [
        'to'   => '', // Email to receive emails via the form.
        'from' => ''  // A valid email where the domain should be the same when the form is hosted.
    ],
    'messages' => [
        'error'   => 'There was an error sending, please try again later.',
        'success' => 'Your message has been sent successfully.',
        'validation' => [
            'emptyname'    => 'Name is required.',
            'emptyemail'   => 'Email is invalid.',
            'emptysubject' => 'Subject is required.',
            'emptymessage' => 'Message is required.'
        ]
    ],
    'fields' => [
        'name'     => 'Name',
        'email'    => 'Email',
        'phone'    => 'Phone',
        'subject'  => 'Subject',
        'message'  => 'Message',
        'btn-send' => 'Send'
    ]
];

Browser Support

IE 9+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Contributing

Check CONTRIBUTING.md for more information.

History

Check Releases for detailed changelog.

License

MIT

ajax-contact-form's Issues

Option for Phone Does not Proccess

I added a field for phone and it did not work so I tried adding the right(hopefully) code so it could be processed and sent did not work.

index.php
<div class="form-group" id="phone-field"> <label for="form-phone" class="col-lg-2 control-label"><?php echo $config->get('fields.phone'); ?></label> <div class="col-lg-10"> <input type="phone" class="form-control" id="form-phone" name="form-phone" placeholder="<?php echo $config->get('fields.phone'); ?>" required> </div> </div>

contactform.js(sorry for some reason this code is being escaped by github but is showing up correctly)

if (data.errors.phone) {
var email = document.querySelector('input[name="form-phone"]').parentNode,
error;

                this.addClass(phone, 'has-error');
                error = this.template(
                    '<span class="help-block">{report}</span>', {
                    report: data.errors.phone
                });

                phone.insertAdjacentHTML('beforeend', error);
            }

config.php

'phone' => 'Phone is required',

proccess.php

errors on the line below added just below email. Throws error Undefined index: phone in /path/to/process.php on line 22
$phone = stripslashes(trim($_POST['phone']));

if (empty($phone)) { $errors['phone'] = $config->get('messages.validation.emptyphone'); }

<p><strong>{$config->get('fields.phone')}:</strong> {$phone}</p>

Any help adding a phone field and maybe in the future some type of recapatcha validation would be awesome. Thanks in advance!

Nothing happen after submit

Hi,

I tried to adapt your script on a free html5 template. However nothing happen, i don't have any error or success message, neither receiving email.

Here the code :

`<?php
require_once './vendor/autoload.php';

$helperLoader = new SplClassLoader('Helpers', './vendor');
$helperLoader->register();

use Helpers\Config;

$config = new Config;
$config->load('./config/config.php');

?>

<title>Morgan Jerabek - Digital Strategist | SEO, Analytics, Customer Experience</title>

	<!-- Header -->
		<section id="header">
			<header class="major">
				<h1>Morgan Jerabek</h1>
				<p>Développe votre Business<br> Protège votre Réputation<br> Améliore votre Conversion</p>
			</header>
			<div class="container">
				<ul class="actions">
					<li><a href="#one" class="button special scrolly">Bienvenue</a></li>
				</ul>
			</div>
		</section>

	<!-- One -->
		<section id="one" class="main special">
			<div class="container">
				<span class="image fit primary"><img src="images/pic01.jpg" alt="" /></span>
				<div class="content">
					<header class="major">
						<h2>Qui suis-je?</h2>
					</header>
					<p>
					Diplomé du CELSA et Paris Sorbonne, j'ai évolué dans différents secteurs, types de structures et périmètres géographiques.<br>
					Le luxe et la haute couture avec la maison On Aura Tout Vu, l'immobilier tertiaire international avec le groupe BNP Paribas Real Estate, l'hotellerie pour le groupe Hipark Résidences, et une multitude de clients en tant que consultant seo et web analytics (Macif, CFDT, MMA...)<br>
					J'ai également fondé une startup fintech dans le domaine de l'investissement immobilier, dont j'ai cédé mes parts en février 2017.
					</p>
					</div>
				<a href="#two" class="goto-next scrolly">Suite</a>
			</div>
		</section>

	<!-- Two -->
		<section id="two" class="main special">
			<div class="container">
				<span class="image fit primary"><img src="images/pic02.jpg" alt="" /></span>
				<div class="content">
					<header class="major">
						<h2>Compétences</h2>
					</header>
					<p>Au gré de mes rencontres, expériences et challenges, j'ai développé une connaissance pluridisciplinaire et transverse des enjeux digitaux. Du référencement naturel, mon expertise première, au web analytics, en passant par la relation client et la mise en place de stratégie social media, <br> je suis devenu un solutionneur hybride entre les métiers de la communication et du marketing et la technique qui est maintenant nécessairement associée à ces besoins.</p>
					<ul class="icons-grid">
						<li>
							<span class="icon major fa-camera-retro"></span>
							<h3>SEO/E-Reputation</h3>
						</li>
						<li>
							<span class="icon major fa-pencil"></span>
							<h3>Analytics/Conversion</h3>
						</li>
						<li>
							<span class="icon major fa-code"></span>
							<h3>Social Media</h3>
						</li>
						<li>
							<span class="icon major fa-coffee"></span>
							<h3>Expérience Client</h3>
						</li>
					</ul>
				</div>
				<a href="#three" class="goto-next scrolly">Suivant</a>
			</div>
		</section>

	<!-- Three -->
		<section id="three" class="main special">
			<div class="container">
				<span class="image fit primary"><img src="images/pic07.jpg" alt="" /></span>
				<div class="content">
					<header class="major">
						<h2>Pré-Requis</h2>
					</header>
					<p>Commençons par discuter de votre activité et de votre besoin. Ensuite réfléchissons à la meilleure stratégie à mettre en place dont découlera les solutions et dispositifs adéquats.</p>
				</div>
				<a href="#footer" class="goto-next scrolly">Enfin</a>
			</div>
		</section>

<!-- Footer -->
		<section id="footer">
			<div class="container">
				<header class="major">
					<h2>Contactez Moi</h2>
				</header>					    
				<form enctype="application/x-www-form-urlencoded;" id="contact-form" class="form-horizontal" role="form" method="post">
					<div class="row uniform">
						<div class="12u$"><input type="text" name="name" id="form-name" placeholder="Prénom Nom" /></div>
						<div class="6u 12u$(xsmall)"><input type="email" name="email" id="form-email" placeholder="Email" /></div>
						<div class="6u 12u$(xsmall)"><input type="tel" pattern="^(?:0|\(?\+33\)?\s?|0033\s?)[1-79](?:[\.\-\s]?\d\d){4}$" name="phone" id="form-phone" placeholder="Téléphone" /></div>							
						<div class="12u$"><input type="text" name="subject" id="form-subject" placeholder="Sujet / Besoin" /></div>
						<div class="12u$"><textarea name="message" id="form-message" placeholder="Message" rows="4"></textarea></div>
						<div class="12u$">
							<ul class="actions">
								<li><input type="submit" value="Envoyer" class="special" /></li>
							</ul>
						</div>
					</div>
				</form>
			</div>
			<footer>
				<ul class="icons">
					<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
					<li><a href="#" class="icon alt fa-linkedin"><span class="label">Linkedin</span></a></li>
					<li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
					<li><a href="#" class="icon alt fa-phone"><span class="label">Telephone</span></a></li>
				</ul>
				<ul class="copyright">
					<li>&copy; Morgan JERABEK</li><li>Design: HTML5 UP</li>
				</ul>
			</footer>
		</section>

	<!-- Scripts -->
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/jquery.scrollex.min.js"></script>
		<script src="assets/js/jquery.scrolly.min.js"></script>
		<script src="assets/js/skel.min.js"></script>
		<script src="assets/js/util.js"></script>
		<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
		<script src="assets/js/main.js"></script>
		<script src="public/js/contact-form.js"></script>
		<script type="text/javascript">
			new ContactForm('#contact-form', {
				endpoint: './process.php'
			});
		</script>

`

Bcc Header Not Working

Hi,

I'm trying to add a checkbox, which allows users to send a copy of their message to themselves. However, I cannot seem to get it working.

Assuming the name field of my checkbox is "blind-copy", I included another header in your code:

$headers .= "From: $name <$email>" . PHP_EOL;
if (isset($_POST['blind-copy'])) {
    $headers .= "Bcc: $email" . PHP_EOL;
}
$headers .= "Return-Path: $emailTo" . PHP_EOL;

try to leave one text-area as not required - than nothing happend

Hi, thanks for nice and simple contact form.
I need one text-are form as not required.
I need this in a new form - number
How I can do that? Thanks.

Allow for Reply To

Replyto headers should use email address of contactee not the "from address" set in config.php.

I just tested using a random "from address" in the config file and at least from my server allows any address but the reply to should be used.

Is there away to have multiple forms on one page?

I'm trying to add more than one form on a single page. The form at the top of the page works. The one in the footer fires the errors on the form at the top and doesn't send an email. I'm using the same class for each form.

                   new ContactForm('.contact-form', {
	            endpoint: './process.php'
	        });