PHP AJAX Email/Message Server

The AJAX Email/Message form is divided in two parts: the client side (handled by the browser) and the server side.

Client side

The HTML file and the JavaScript file form_script.js handle the client side.

Subscription form

The email subscription form is represented by the form tag with send_email_form class. Edit its action attribute to point to your ajax server :
ajaxserver/serverfile.php to save to a file,
ajaxserver/server.php to send emails as message (Email message), and
ajaxserver/servermailchimp.php to send emails to a mailchimp list (see server side section below for details).

HTML Email subscription form
<!-- Registration form container-->
<form class="send_email_form form-container form-container-transparent form-container-white" method="post" action="ajaxserver/serverfile.php">
    <div class="form-desc">
        <h2 class="display-4 display-title display-decor anim-2">Subscribe to
            <br>Newsletter</h2>
        <p class="invite  anim-3">Don't miss any new opportunity, Hurry up! register now :</p>
    </div>
    <div class="form-input  anim-4">
        <div class="form-group form-success-gone">
            <label for="reg-email">Email</label>
            <input id="reg-email" name="email" class="form-control-line form-control-white" type="email" required placeholder="your@email.address"
                data-validation-type="email" />
        </div>
        <div class="form-group mb-0">
            <div>
                <p class="email-ok invisible form-text-feedback form-success-visible">Your email has been registred, thank you.</p>
            </div>

            <div class="btns-action anim-3">
                <button id="submit-email" name="submit_email" class="btn btn-outline btn-primary form-success-gone">
                    <span class="text">Subscribe</span>
                    <span class="icon">
                        <i class="ion ion-checkmark"></i>
                    </span>
                </button>
            </div>
        </div>
    </div>
</form>
Contact form

The contact form is represented by the form tag with class send_message_form.
Edit its action attribute to point to your ajax server :
ajaxserver/serverfile.php to save to a file,
ajaxserver/server.php to send the message form as an email message to your email.

HTML Send Message form
<!-- Message form container -->
<form class="send_message_form message form" method="post" action="ajaxserver/serverfile.php" id="message_form">
    <div class="form-group name">
        <input id="mes-name" name="name" type="text" placeholder="Name" class="form-control form-control-outline thick form-success-clean"
            required>
    </div>
    <div class="form-group email">
        <input id="mes-email" type="email" placeholder="Email" name="email" class="form-control form-control-outline thick form-success-clean"
            required>
    </div>
    <div class="form-group no-border">
        <textarea id="mes-text" placeholder="Message ..." name="message" class="form-control form-control-outline thick form-success-clean"
            required></textarea>

        <div>
            <p class="message-ok invisible form-text-feedback form-success-visible">Your message has been sent, thank you.</p>
        </div>
    </div>

    <div class="btns text-right">
        <button id="submit-message" class="btn btn-outline email_b" name="submit_message">
            <span class="txt">Send Now</span>
            <span class="arrow-icon"></span>
        </button>
    </div>
</form>

The JavaScript file "form_script.js" manages the sending of the data to the server and notify the user when it is done. There is no need to change its content.

Server side

You have to point you registration form and contact form in to an AJAX server as precised in the "Client side" section above.
The AJAX server used by this theme is PHP based. Three samples php-based AJAX server is provided under ajaxserver folder :

  1. serverfile.php : Writes emails and messages in files called "email.txt" and "message.txt" respectively. You do not need to edit this file.
  2. server.php : Sends email and messages to your desired email addresses. Edit this file and replace all the $recipient = "your@email.com"; by yours (there are two of it since message recipient and email subscription recipient could be different). You can also change the message content and subject by changing the $subject and $email_content variable.

    IMPORTANT : Most of Web Hosting provider allow you to use only your domain based email (such as contact@yourdomain.com) for this feature.
  3. servermailchimp.php : Uses mailchimp API to add user email to a mailchimp registration list.

    IMPORTANT : You need a mailchimp API Key and a mailchimp List to make it working. To do so :
    • First, create a Mailchimp account if you do not have one.
    • Then create an API key here http://admin.mailchimp.com/account/api/ (this url may change, please refer directly to Mailchimp support)
    • Create also a Mailchimp mailing list here http://admin.mailchimp.com/lists/ (this url may change, please refer directly to Mailchimp support), select the new list and click the "settings" menu - the Unique Id is at the bottom of that page.
    • Now, edit the "servermailchimp.php" file and change $MailChimp = new MailChimp('YOUR_APIKEY_HERE') to match to your api key. Change also $list_id = "YOUR_LISTID_HERE" to your mailchimp list Unique Id.
    • Do not forget to change the action attribute of the email registration form within the HTML file to point to the mailchimp server : 
      <form class="send_email_form message ..." method="post" 
action="/ajaxserver/servermailchimp.php">
   ...
</form>

These server handles messages and email subscription requests made by users.

Alternative server implementation

If you want to implement your own contact/emaillist server API (by using Node JS, Rails, .net ... server), it should send the following response, so that the default provided AJAX client can handle it:

JSON http response of server.php, serverfile.php
// JSON Application response, with a response code 200 if success or 400, 500 if error
{
    email : 'user@email.com',
    form : 'submit_message',
    success : 'Feedback message if success',
    error : 'A feedback message if an error happened, or a JSON'
}