Questions/Problems
X

Make A Simple Contact Form and Email Response in ModX

1) Create a chunk for the form and add form code.


[[!FormIt? 
&hooks=`spam,FormItSaveForm,email,redirect`
&emailTpl=`emailTpl`       [[- 'This is the name of your email template chunk' ]]
&emailTo=`[email protected]`
&emailFrom=`[email protected]`
&emailFromName=`Website Name`
&emailReplyTo=`[email protected]`
&formName=`Website-Name-Contact-Form`
&emailSubject=`[[++site_name]] Contact Form` 
&redirectTo=`24`           [[- 'This is the id of the thankyou page' ]]
&validate=`firstname:required, lastname:required, email:email:required` ]]
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]



<form action="[[~[[*id]]]]" method="post">
<div class="container">
  <div class="row">
    <div class="form-group col-md-6">
      <label class="sr-only" for="firstname">First Name</label>
      <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" value="[[+fi.firstname]]">[[!+fi.error.firstname]]
    </div>
    <div class="form-group col-md-6">
      <label class="sr-only" for="lastname">Last Name</label>
      <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name" value="[[+fi.lastname]]">[[!+fi.error.lastname]]
    </div>
    <div class="form-group col-md-6">
      <label class="sr-only" for="email">Email address</label>
      <input type="email" class="form-control" id="email" name="email" placeholder="Email address" value="[[+fi.email]]">[[!+fi.error.email]]
    </div>
    <div class="form-group col-md-6">
      <label class="sr-only" for="phone">Phone Number</label>
      <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" value="[[+fi.phone]]">
    </div>
</div>
<div class="row">
    <div class="form-group col-md-12">
      <label class="sr-only" for="comment">Your Enquiry</label>
      <textarea class="form-control" id="comment" name="comment" placeholder="Your Enquiry">[[+fi.comment]]</textarea>
    </div>
</div>
<div class="row">
    <div class="form-group col-md-4">
      <button type="submit" id="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>
</form>

2) Create a chunk for the form email response:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
    body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
    h1{font-size:18px;}
    h2{font-size:16px;color:#666;}
    .form-row{background-color:#eee;}
</style>
</head>
<body>
  <h1>[[++site_name]] Contact Form</h1>
  <table border="0" cellspacing="0" cellpadding="5" width="620">  
    <tr>
      <td width="30%"><strong>First Name</strong></td>
      <td width="70%">[[+firstname]]</td>
    </tr>
    <tr>
      <td class="form-row"><strong>Last Name</strong></td>
      <td class="form-row">[[+lastname]]</td>
    </tr>
    <tr>
      <td><strong>Email</strong></td>
      <td>[[+email]]</td>
    </tr>
    <tr>
      <td class="form-row"><strong>Phone Number</strong></td>
      <td class="form-row">[[+phone]]</td>
    </tr>
    <tr>
      <td><strong>Enquiry</strong></td>
      <td>[[+comment]]</td>
    </tr>
  </table>
</body>
</html>

3) Create your contact page (resource) and add the modx call for the contact form chunk in the content area 


[[$contact_form]]

Get In Touch

Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!