If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to activate newsletter (subscription) addon

Our support team is glad to present our new tutorial on activating Subscription form on your HTML website.

JS Animated. How to activate newsletter (subscription) addon

If you want to stay in touch with your site visitors, it is good to have not only a contact form on your site, but give customers opportunity to subscribe to your newsletter.

Description

JS Animated.How_to_activate_subscription_form_1

In order to make subscription form appear on the site, this HTML code should be included into page content:

       	<form id="subscribe-form">
              <div class="success">Your subscription request<br> has been sent!</div>
                <fieldset>
                <label class="name">
                    <input type="text" value="Enter Name:">
                    <span class="error">*This is not a valid name.</span></label>
                <label class="email">
                    <input type="email" value="Enter Email:">
                    <span class="error">*This is not a valid email address.</span></label>
                <div class="btns"><a href="#" class="button" data-type="submit">Submit</a></div> </fieldset>
        </form>                       
	

JS Animated.How_to_activate_subscription_form_2

The HTML structure inside the form is flexible, the only condition is that inputs should be placed inside the label tags that have class corresponding to their type. There are the following classes/types by default:

  • name – the User’s Name. Validation: digits are disallowed, not less than 2 symbols;
  • email – the User’s Email;

Also, label tag mentioned above can contain nested span elements with class error, which include the error message in case the data in the field is specified incorrectly.

In order to activate subscription form, follow these steps:

  1. Include subscribe form script (the one from example below) in the <head> section of HTML file:

                	<script type="text/javascript" src="js/jquery.min.js"></script>
                    <script type="text/javascript" src="js/sForm.js"></script>
    		

    JS Animated.How_to_activate_subscription_form_3

  2. Copy “bat” folder to your website root folder. The “bat” folder should contain 1 file: MailHandler-sub.php .

  3. Initialize your subscription form on the $(window).load() : event at the end of sForm.js file:

                	$(window).load(function(){
                      $('#subscribe-form').sForm({
                        ownerEmail:'#',
                        sitename:'sitename.link'
                      })
                    })	
            

    JS Animated.How_to_activate_subscription_form_4

  4. Use the following parameters for initialization:

    • ownerEmail – the Email address the data will be sent to;
    • sitename – website address which maintains subscription form:

    JS Animated.How_to_activate_subscription_form_5

In case of successful subscription, the website owner and the website visitor get two separate successful subscription confirmation emails. The website owner target email is grabbed from sForm.js file and the website visitor email is an email specified during subscription:

JS Animated.How_to_activate_subscription_form_6

Feel free to check the detailed video tutorial below:

JS Animated. How to activate newsletter (subscription) addon