PHP-AJAX Form

These modular elements can be readily used and customized in every layout across pages.

PHP-AJAX Form

Reign has a built-in universal php-ajax form that can grab dynamic amounts of inputs and send it to any given email address. To make the form work, simply add the class .zform like <form class="zform">.

You can also specify where to send the data via an hidden input:

<input type="hidden" name="to" value="username@domain.extension">
 Other reserved name fields are: subject, email, name
              

See the sample code under the form bellow for better understanding.

<form class="zform" method="post">
  <div class="form-group"><input class="form-control" type="hidden" name="to" value="username@domain.extension"></div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Name :</label>
    <div class="col-10"><input class="form-control" type="text" name="name" required=""></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Subject :</label>
    <div class="col-10"><input class="form-control" type="text" name="subject" required=""></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Email :</label>
    <div class="col-10"><input class="form-control" type="email" name="from" required=""></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Field One :</label>
    <div class="col-10"><input class="form-control" type="text" name="field-1" placeholder="Optional"></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Field Two :</label>
    <div class="col-10"><input class="form-control" type="text" name="field-2" placeholder="Optional"></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Message :</label>
    <div class="col-10"><textarea class="form-control" rows="8" name="message" placeholder="Write your message here..."></textarea></div>
  </div>
  <div class="form-group row">
    <div class="col-10 offset-2"><input class="btn btn-primary" type="submit" name="submit" value="Send!"></div>
  </div>
  <div class="zform-feedback"></div>
</form>

Integrating reCaptcha

Get your secret and site key here ⟶

<form class="zform" method="post">
  <div class="form-group"><input class="form-control" type="hidden" name="to" value="username@domain.extension"></div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Name :</label>
    <div class="col-10"><input class="form-control" type="text" name="name" required=""></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Email :</label>
    <div class="col-10"><input class="form-control" type="email" name="from" required=""></div>
  </div>
  <div class="form-group row"><label class="col-2 col-form-label text-right">Message :</label>
    <div class="col-10"><textarea class="form-control" rows="8" name="message" placeholder="Write your message here..."></textarea></div>
  </div>
  <div class="form-group row">
    <div class="col-10 offset-2">
      <div class="g-recaptcha mb-3" data-sitekey="6Lcd9-0UAAAAAJtwpsZYIsZmqQn6x1itje328Q2g"></div><input class="btn btn-primary" type="submit" name="submit" value="Send!">
    </div>
  </div>
  <div class="zform-feedback"></div>
</form>
HTML
<form class="zform" method="post">
  ...
  ...
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
  <input type="submit" value="Submit">
</form>
JavaScript
<script src="https://www.google.com/recaptcha/api.js"></script>
PHP

Open assets/php/form-processor.php and change the secret key with yours at line: 13

$reCaptchaSecret = "YOUR_SECRET_KEY";

Thank you for creating with Reign © 2019| v4.0.2

Made withby Themewagon