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">
        <h4>Get ready now!</h4>
        <p>Don't miss any new opportunity, Hurry up! register now</p>
    </div>
    <div class="form-input">
        <div class="form-group">
        <label for="username">Name</label>
        <input id="reg-name" class="form-control-line form-control-white" type="text" id="username"
        />
        </div>
        <div class="form-group">
        <label for="email">Email</label>
        <input id="reg-email" class="form-control-line form-control-white" type="email" required
        placeholder="[email protected]" data-validation-type="email"
        />
        </div>
        <div class="form-group mb-0">
        <div>
            <p class="message-ok invisible form-text-feedback form-success-visible">Your message has been sent, thank you.</p>
        </div>
        <button id="submit-email" class="btn btn-white btn-round btn-full" name="submit_email">Subscribe</button>
        </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">
    <label for="mes-name">Name :</label>
    <input id="mes-name" name="name" type="text" placeholder="" class="form-control-line"
    required>
    </div>
    <div class="form-group email">
    <label for="mes-email">Email :</label>
    <input id="mes-email" type="email" placeholder="" name="email" class="form-control-line"
    required>
    </div>
    <div class="form-group no-border">
    <label for="mes-text">Message</label>
    <textarea id="mes-text" placeholder="..." name="message" class="form-control form-control-outline thick"
    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">
    <button id="submit-message" class="btn btn-normal btn-white btn-round btn-full email_b"
    name="submit_message">
        <span class="txt">Send</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 = "[email protected]"; 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 [email protected]) 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/
    • Create also a Mailchimp mailing list here http://admin.mailchimp.com/lists/ , 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 $api = new MCAPI('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 : '[email protected]',
    form : 'submit_message',
    success : 'Feedback message if success',
    error : 'A feedback message if an error happened, or a JSON'
}