Add contact form to Ghost

By default Ghost does not come with a contact form.

Step 1

Create a post in Ghost (haha 🙂 containing the contact form:

<div id="successDiv" class="alert alert-success" style="display: none">Thank you for your submission - we'll be in touch shortly!</div>
<form id="contactForm">
<div class="form-group">
<label class="registrationLabel" for="contactName">Name</label>
<input type="text" class="registrationInput form-control" name="contactName" id="contactName" placeholder="Enter your name">
</div>
<div class="form-group">
          <label class="registrationLabel" for="contactEmail">Email address</label>
          <input type="text" class="registrationInput form-control" name="contactEmail" id="contactEmail" placeholder="Enter your email address">
</div>
<div class="form-group">
<label class="registrationLabel" for="contactMessage">Message</label>
<textarea class="form-control" id="contactMessage" style="max-width: 100% !important;" name="contactMessage" rows="3" placeholder="Enter your message"></textarea>
</div>

<button id="submitContactButton" type="button" class="btn"><i class="glyphicon glyphicon-star"></i> Get in touch</button>
</form>

The important things to note are:

<form id="contactForm">

The contactForm id is used later to serialize the form for submission to the contact.php file which actually sends the mail.

The name of each input is important as it is submitted in the AJAX POST to the PHP file. E.g name="contactName"

<button id="submitContactButton" type="button" class="btn"><i class="glyphicon glyphicon-star"></i> Get in touch</button>

The submitContactButton id is used to detect a button click in jQuery and perform the submission of the form.

Step 2

Add an AJAX POST to assets/js/index.js to serialize the form input fields and POST to the contact.php file. Inside the $document.ready(function() { } paste the following at the end:

$( "#submitContactButton" ).click(function(event) {
	$('#submitContactButton').prop('disabled', true);
	var theForm = $('#contactForm');

	$.ajax( {
  	type: "POST",
  	url: 'https://YOUR-DOMAIN-HERE/contact.php',
  	data: theForm.serialize(),
   	success: function( data ) {
  	 $( "#successDiv" ).fadeIn( 1500, function()  {$('#successDiv').fadeOut(5000);});
  	}
	});

	return false;
});

Replace YOUR-DOMAIN-HERE with your domain.

Step 3

Create a contact.php file in the www directory or in any directory of your choice within the web root.

<?php

$emailTo = 'YOU@YOUR-DOMAIN.COM';
$emailFrom = 'INFO@YOUR-DOMAIN.COM';

$name = $_POST['contactName'];
$email = $_POST['contactEmail'];
$message = $_POST['contactMessage'];

$subject = "SOME USEFUL SUBJECT";

$body = "Name: $name nnEmail: $email nnMessage: $message";
$headers = 'From: ' .' <'.$emailFrom.'>' . "rn" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);

?>

Take note that the following three lines match the name field of each of the input fields on your contact page in Ghost (Step 1):

$name = $_POST['contactName'];
$email = $_POST['contactEmail'];
$message = $_POST['contactMessage'];