English | Español | Català

KNEWS PLUGIN FOR WORDPRESS:

FINALLY NEWSLETTERS ARE MULTILINGUAL, QUICK AND PROFESSIONAL

AJAX Subscription form in a Popup with JavaScript validation

20 September 2013, By Carles Reverter

Knews can be embeded in a standard way (through widget) or inside any post or page (through shortcode) or theme (through PHP funcion).
This third option gives you so many ways to customize the Knews subscription form.

In this post, we will show you how to do a subscription form inside a layered popup, with JavaScript validation and Ajax communication.

First of all, we will add some code to our functions.php theme for Thickbox library inclusion (comes with WordPress):

function knews_enqueue_scripts() {
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
}
add_action( 'wp_enqueue_scripts', 'knews_enqueue_scripts' );

Now, we need to add a Knews PHP call into the footer.php theme file, to draw a hidden subscription form ready to be launched, find wp_footer() and add below:

<div id="subscribirmenews" style="display:none;">
    <?php global $Knews_plugin; echo $Knews_plugin->getForm(0, '', array('name'=>'required', 'surname'=>'required', 'terms'=>1, 'script'=>0), 'knews_popup'); ?>
</div>

We also need to add some JavaScript code, insert into your theme’s JavaScript main file (if you can’t, you can also add this code into your footer, inside SCRIPT tags):

//Javascript validation fields functions
var filters = {
    js_email: function(el) {return /^[A-Za-z][A-Za-z0-9_\.-]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/.test(jQuery(el).val());},
    js_text_3: function(el) {var val=jQuery(el).val(); return (val != '' && val != -1 && val.length > 2);},
    js_check: function(el){ return jQuery(el).is(':checked'); }
}
//Javascript fields validation error message
function print_err(txt) {
    jQuery('div.knews_popup div.response').remove();
    if (txt!='') {
        jQuery('div.knews_popup fieldset.knewsterms').css('paddingBottom','10px');
        jQuery('<div style="margin-bottom:10px"><p>' + txt + '</p></div>').insertBefore('fieldset.knewsbutton');
    }
}
jQuery(document).ready( function() {

    knewsfunc = function() {
        if (jQuery(this).attr('submitted') !== "true") {

            //Let's check the fields before form submission
            print_err('');            

            if (!filters.js_text_3(jQuery('[name="name"]', this))) {
                print_err('Name is required');
                return false;
            }
            if (!filters.js_text_3(jQuery('[name="surname"]', this))) {
                print_err('Surname is required');
                return false;
            }
            if (!filters.js_email(jQuery('[name="knewsemail"]', this))) {
                print_err('Please, check your email');
                return false;
            }
            if (!filters.js_check(jQuery('[name="knewsterms"]', this))) {
                print_err('Please, confirm the legal note');
                return false;
            }
            
            save_knews_form = jQuery('#TB_ajaxContent fieldset.knewsbutton').html();
            jQuery(this).attr('submitted', "true");
            //Let's send the data
            jQuery.post(jQuery(this).attr('action'), jQuery(this).serialize(), function (data) { 
                //Let's show the AJAX reply
                jQuery('#TB_ajaxContent fieldset.knewsbutton').html(data);
                jQuery('#TB_ajaxContent form a.knews_back').click( function () {
                    jQuery('#TB_ajaxContent fieldset.knewsbutton').html(save_knews_form)
                    jQuery('#TB_ajaxContent div.knews_popup form').removeAttr('submitted');
                    return false;                                
                });
            });
        }
        return false;
    }
    //Backward compatibility older jQuery
    if (parseInt(jQuery.fn.jquery.split('.').join(''), 10) >= 170) {
        jQuery(document).on('submit', '#TB_ajaxContent div.knews_popup form', knewsfunc);
    } else {
        jQuery('#TB_ajaxContent div.knews_popup form').live('submit', knewsfunc);                        
    }
});

Finally, we just need to add a link for popup opening, put this HTML code in any place of your theme:

<a href="#TB_inline?height=300&amp;width=340&amp;inlineId=subscribirmenews"  class="thickbox" title="Subscribe to the Newsletter">Subscribe me</a>

You can also add this link to the sidebar using the HTML/free text widget (out of the box with WordPress) or creating a customised link in any menu.

Now you can add some styles in style.css theme file, in order to customize the form. Here a little example, feel free to customize it, simply keep the div.knews_popup first part in any class and will not modify nothing outside the popup:

div.knews_popup {
    padding:10px 0 0 0;
}
div.knews_popup label {
    display:inline-block;
    width:90px;
    color:#900;
}
div.knews_popup input {
}
div.knews_popup fieldset.knewsterms label {
    width:auto;
}

You can also download all the codes in a ZIP file.

COMMENTS:

7 October 2013, By Eduard

I did all of those things and nothing happens when I click the link!

8 October 2013, By Carles Reverter

Can do you give us your url?

8 October 2013, By Eduard

http://bamgaga.com/wpCoreFiles/ this is still in developments, the link for that is in lower right corner of the website. where the social link are.

I’m using child theme, and I did make sure that everythings is loading. I have no jquery errors in the chorme dev tools, the scripts where I put the custom code is called scripts.js inside the custom_js folder.

here is the direct link to that file: http://bamgaga.com/wpCoreFiles/wp-content/themes/bamgaga/custom_js/scripts.js

Also the thickbox.js and thickbox.css are loading
Thank you.

9 October 2013, By Jose Alcántara

Hi,

thanks for the clear explanation. I’ve got a question though, as the case of customization I’m trying to achieve is not considered here.

I’ve already tried printing the form wherever I want in my template using the function that the plugin provides. Now I want to customize the output html. I’m not meaning that I want to style the form itself, instead I would like to be able to change the html code of the form, so that my form has a different html. In example, I would like to add some javascript to the inputs (mainly, trackevents for analytics).

Is this possible at all?

10 October 2013, By Carles Reverter

Hello Eduard!

I found two issues:

1) Inside the tag

<div id="subscribirmenews" style="display:none;"></div>

should be all the form, and in your source is empty

2) I can’t find the link to open the popup:

<a href="#TB_inline?height=300&amp;width=340&amp;inlineId=subscribirmenews" title="Subscribe me to the Newsletter">Subscribe me</a>

10 October 2013, By Carles Reverter

Hello Jose, yes, you can… take a look at the function get_form() inside main knews.php file, copy it in your functions.php, make $Knews_plugin global, change all $this for $Knews_plugin, and remove all the things you don’t need…

23 October 2013, By Carles Reverter

Hello!

I forgetted the class=”thickbox” in the open link!

Now is added into the tutorial.

24 October 2013, By Josef Rebbe

How can I embed Knews through widget. It doesn’t appear in the widget menu.

25 October 2013, By Carles Reverter

Hello Josef. Please, check Knews is active and your theme supports widgets. Write us through the contact form, this post isn’t related to this issue.

DO YOUR COMMENT:

(Required)

(Required, but will not shown)

Cart

Subscribe me

Subscribe to our newsletter we will keep you up-to-date:

* This field is required
Satisfaction Guaranteed. 15 Money Back

WE ACCEPT


We accept credit cards.