AJAX Mailinglist

Developer

Laisvunas

3rd Party (Commercial)


EE Version Support

  • ExpressionEngine 1.x
  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

This plugin allows you to display mailinglist form in ExpressionEngine's templates and submit it without reloading of the page. This add-on has been designed to be fully compatible with AJAX Form Validator http://devot-ee.com/add-ons/ajax-form-validator.

THE TAG exp:ajax_mailinglist:form

I. Parameters

1) form_id - optional. Allows you to specify HTML id attribute of the form. Default value is “ajax_mailinglist_form”.

2) name - optional. Allows you to specify HTML name attribute of the form. Default value is “ajax_mailinglist_form”.

3) list - optional. Allows you to specify which Mailing List the email address will be subscribed to. This parameter
takes the “short name” of the List as set in the Mailing List control panel. If no list is specified with the parameter then the “default” list is assumed.

4) submit_button_id - required. Allows you to specify HTML id attribute
of the submit button of the form.

5) error_message_container_id - optional. Allows you to specify HTML id attribute of the element inside which
error messages will be be displayed.

6) error_message_container_class - optional. Allows you to specify HTML class attribute of the element inside which
error messages will be be displayed.

7) success_message_container_id - optional. Allows you to specify HTML id attribute of the element inside which
success messages will be be displayed.

8) success_message_container_class - optional. Allows you to specify HTML class attribute of the element
inside which success messages will be be displayed.

9) process_indicator_id - optional. Allows you to specify HTML id attribute of the element which
will act as the indicator of the mailinglist form submission being processed.

10) process_indicator_class - optional. Allows you to specify HTML class attribute of the element which
will act as the indicator of the mailinglist form submission being processed.

11) process_indicator_scroll - optional. Allows you to specify if HTML element
which acts as the indicator of mailinglist being processed by AJAX should be scrolled into
view (value “yes”) or not (value “no”). Default is “no”.

12) message_scroll - optional. Allows you to specify if error and success messages should be scrolled into
view (value “yes”) or not (value “no”). Default is “no”.

13) clean_form_after_success - optional. Allows you to specify if after successful submission the values of
the form fields should be cleaned. Possible values are “yes” and “no”. Default is “yes”.

14) add_callback_success - optional. Allows you to specify name of javascript function
which will be executed after successful submission of the form. This parameter supports pipe
operator, i.e. you can specify several names of javascript functions.

15) add_callback_success_args - optional. Allows you to specify argument of javascript function
which will be executed after successful submission of the form. This parameter supports pipe
operator, i.e. you can specify arguments of several javascript functions. The order of arguments
should follow the order of functions in “add_callback_success” parameter. If some functions should
have arguments and other functions don’t, specify “null” or “0” (without quotation marks) as arguments
for te latter.

16) add_callback_failure - optional. Allows you to specify name of javascript function
which will be executed after unsuccessful submission of the form. This parameter supports pipe
operator, i.e. you can specify several names of javascript functions.

17) add_callback_failure_args - optional. Allows you to specify argument of javascript function
which will be executed after unsuccessful submission of the form. This parameter supports pipe
operator, i.e. you can specify arguments of several javascript functions. The order of arguments
should follow the order of functions in “add_callback_failure” parameter. If some functions should
have arguments and other functions don’t, specify “null” or “0” (without quotation marks) as arguments
for te latter.

II. Usage example


<html>
<head>

<title>AJAX Mailinglist demo</title>

<style type="text/css">

div.indicator  {
display: none;
}

.ajax_error {
border: solid 1px red;
min-height: 7em;
width: 35em;
display: block!important;
}

.ajax_success {
border: solid 1px green;
min-height: 7em;
width: 35em;
display: block!important;
}

.ajax_process {
border: solid 1px green;
background-image: url({site_url}{globalvar_interface_images_uri}ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
min-height: 7em;
width: 35em;
text-align: center;
display: block!important;
}

input.emailinput, textarea {
width: 30em;
}
</style>

</head>

<body>

<h1>AJAX Mailinglist demo</h1>

<p>This add-on allows to submit mailing list form without reloading of the page.</p>

<div id="ajax_error" class="indicator">
<h3>Error occurred:</h3>
</div>

<div id="ajax_success" class="indicator">
<h3>Success!</h3>
</div>

<div id="progress_indicator" class="indicator">
<h3>Sending request…</h3>
</div>

{exp:ajax_mailinglist:form list="default" submit_button_id="ajax_mailinglist_submit" error_message_container_id="ajax_error" error_message_container_class="ajax_error" success_message_container_id="ajax_success" success_message_container_class="ajax_success" process_indicator_id="progress_indicator" process_indicator_class="ajax_process" process_indicator_scroll="yes" message_scroll="yes"}

<p>Join our Mailing List</p>

<p><input type="text" name="email" value="" /></p>

<p><input type="submit" id="ajax_mailinglist_submit" value="Submit" /></p>

{/exp:ajax_mailinglist:form}

</body>
</html>

III. Using AJAX Mailinglist together with AJAX Form Validator

Create two templates: my_template_group/ajax_form_validator_async and my_template_group/ajax_mailinglist.

Contents of the template �ajax_form_validator_async� should consist of single tag:

{exp:ajax_form_validator:async}

Contents of the template �ajax_mailinglist�:


<html>
<head>

<title>AJAX Mailinglist with AJAX Form Validator demo</title>

<style type="text/css">

div.indicator  {
display: none;
}

.ajax_error {
border: solid 1px red;
min-height: 7em;
width: 35em;
display: block!important;
}

.ajax_success {
border: solid 1px green;
min-height: 7em;
width: 35em;
display: block!important;
}

.ajax_process {
border: solid 1px green;
background-image: url({site_url}{globalvar_interface_images_uri}ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
min-height: 7em;
width: 35em;
text-align: center;
display: block!important;
}

input.emailinput, textarea {
width: 30em;
}

.invalidated { 
background: #ffbcbc; 
}
</style>

</head>

<body>

<h1>AJAX Mailinglist with AJAX Form Validator demo</h1>

<p>AJAX Mailinglist add-on allows to submit mailing list form without reloading of the page.</p>

<p>
AJAX Form Validator add-on enables you to validate fields of the form client-side.
</p>

<p>
In this example field values are being validated onkeyup and validation results are being displayed after Submit button is clicked.
</p>

<p>
Try to submit form by entering something which is forbidden by the code of AJAX Form Validator add-on:<br>

1) invalid email, such as name@google.<br>

2) leaving email field empty<br>

3) email having more than 50 characters<br>

4) email name@my_domain.com which is used by registered member<br>
</p>

<div id="ajax_error" class="indicator">
<h3>Error occurred:</h3>
</div>

<div id="ajax_success" class="indicator">
<h3>Success!</h3>
</div>

<div id="progress_indicator" class="indicator">
<h3>Sending request…</h3>
</div>

{exp:ajax_form_validator:script entry_id="none" form_id="ajax_mailinglist_form" submit_button_id="ajax_mailinglist_submit" async_url="{homepage}/my_template_group/ajax_form_validator_async" parse="inward"}

{ajax_form_validator field="email" required="yes" field_required_alert_text="ERROR!\\\\nEmail field cannot be empty!" invalid_indicator_id="email_field" invalid_class="invalidated" javascript_alert="yes" max_length="50" max_length_alert_text="ERROR!\\\\nThe email address cannot be longer than 50 characters." regex_alert_text="ERROR!\\\\nInvalid email address." regex="/^([a-z0-9\\\\+_\\\\-]+)(\\\\.[a-z0-9\\\\+_\\\\-]+)*@([a-z0-9\\\\-]+\\\\.)+[a-z]:LD:2,6:RD:$/i" deny_duplicate_data_field="exp_members.email" duplicate_data_alert_text="ERROR!\\\\nThe email you entered is already in use by a registered member."}

{/exp:ajax_form_validator:script}

{exp:ajax_mailinglist:form list="default" form_id="ajax_mailinglist_form" submit_button_id="ajax_mailinglist_submit" error_message_container_id="ajax_error" error_message_container_class="ajax_error" success_message_container_id="ajax_success" success_message_container_class="ajax_success" process_indicator_id="progress_indicator" process_indicator_class="ajax_process" process_indicator_scroll="yes" message_scroll="yes"}

<p>Join our Mailing List</p>

<p><input type="text" name="email" value="" id="email_field" /></p>

<p><input type="submit" id="ajax_mailinglist_submit" value="Submit" /></p>

{/exp:ajax_mailinglist:form}

</body>
</html>

AJAX Mailinglist Links

This entry was created January 26, 2012, 11:33 am.
This entry was last updated May 29, 2013, 4:46 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

There are no reviews for this add-on yet.

What are you waiting for? Rate it and review it!