Categories

Featured templates

JS Animated. How to activate newsletter (subscription) addon

Erica Saunders January 15, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

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;
    • sitenamewebsite 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
This entry was posted in JS Animated tutorials and tagged activate, addon, newsletter, subscription. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket