AJAX Email

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

AJAX Email allows you to submit contact form without reloading of the page.

This add-on has been designed to be fully compatible
with AJAX Captcha  and AJAX Form Validator.

I. Parameters of the exp:ajax_email tag

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

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

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

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

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

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

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

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

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

10) 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”.

11) 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.

12) 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.

13) 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.

14) 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 Email demo</title>

<style>

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}images/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 Email demo</h1>

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

{exp:ajax_email form_id="contact_form" submit_button_id="contact_form_submit_button" 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" parse="inward"}

{exp:email:contact_form user_recipients="false" recipients="myemail@mysite.com" charset="utf-8" redirect="0" return="{homepage}/site/contact_form/"}

<h3>Send a message</h3>

<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 message…</h3>
</div>


<p{if logged_in} data-style="display: none;"{/if}>Name:<br />
<input type="text" name="name" value="{if logged_in}{screen_name}{/if}" class="emailinput" id="name_field" />
</p>
<p{if logged_in} data-style="display: none;"{/if}>Email:<br />
<input type="text" name="from" value="{if logged_in}{email}{/if}" class="emailinput" id="from_field" />
</p>

<p>Subject:<br />
<input type="text" name="subject" value="" class="emailinput" id="subject_field" />
</p>

<textarea name="message" rows="18" cols="40" id="commenttextarea" class="commenttextarea"></textarea>

<p class="commentp"><input name="submit" type='submit' value='Submit' id="contact_form_submit_button" /></p>

{/exp:email:contact_form}

{/exp:ajax_email}

</body>
</html>

AJAX Email Links

This entry was created December 8, 2011, 12:15 pm.
This entry was last updated December 25, 2013, 5:34 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!