This template provides you with a front-end contact form that collects the sender’s name, email address, phone number, and message. In order for this form to work, you need a handler to manage the data collected in the form, which is included in two third-party PHP files – contact.php and class.phpmailer.php.
Setting Up the Form
You will have to configure the contact form before you are ready to receive messages from your visitors. To configure the form, follow these instructions:
- Open the contact.php file in your code editor.
- Search for the following variables:
- $mail->AddAddress(‘firstname.lastname@example.org’, ‘Your Name’)
- $mail->Subject = ‘Contact Form Submission’;
- Change the email@example.com string to your desired email address.
- Change the Your Name string to your name.
- Change the Contact Form Submission string to a different subject. The PHP script will automatically include this subject line whenever someone emails you from the contact form. You may want to change this to something more recognizable, but it is not required that you do so.
- Save the contact.php file.
- Upload the contact.php file to your server and test the changes by sending an email through the contact form to make sure you can receive emails submitted through the form.
- Note: If the contact form is not sending an email to your email address, check the file permissions for both the contact.php and class.phpmailer.php files within your server’s file manager. Both files should have permissions set to 0644. Check with your hosting company’s help documentation if you need instructions on how to do this.
The phone number is not a required field in the contact form section; however, all other fields are required before the email can be sent.
Here is the code which you need to modify to configure the contact form:
$mail->AddAddress('firstname.lastname@example.org', 'My Name'); // Your email address and name
$mail->Subject = 'My Domain: Contact Form Emails'; // Your subject
When changing your email address, name, and subject, do not delete the single quotes or the comma. If you do, the contact form will not send emails.
Customizing the Success Message
Once a visitor sends an email, a notification displays under the submit button, informing them that you have received their message. Currently, there is a generic message that we pre-configured in Genesis. This message can be customized by following these instructions:
- Open the index.html file in your code editor.
- Search for the following id: alert
- Search for the following generic confirmation text: Well, hello there! Thanks for sending us a message. We will contact you shortly.
- Change the generic message to a custom message of your choice.
- Save the index.html file.
- Upload the index.html file to your server and test the changes by sending an email through the contact form to make sure the custom success message displays appropriately.
Here is the code which you need to modify to customize the success message:
<div class="notification success"><p>My message.</p></div>
Do not add the overlay tag to the contact form div in the index.html file. This only applies if you decide to add an image rather than keep the plain color background. The overlay will cover the contact form, making it impossible for your visitors to use it.