OSEmail: Difference between revisions

From Open Source Ecology
Jump to navigation Jump to search
(deprecated google form with phplist ajax form instead)
Line 2: Line 2:


<html>
<html>
<div style="float:right;">
 
<iframe src="https://player.vimeo.com/video/51246555" width="600" height="380" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script type="text/javascript" src="https://phplist.opensourceecology.org/lists/admin/ui/phplist-ui-bootlist/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://phplist.opensourceecology.org/lists/admin/ui/phplist-ui-bootlist/js/dist/phpList_ui_bootlist.min.js"></script>
 
<noscript>
Please subscribe to our newsletter on our phplist site at <a href="https://phplist.opensourceecology.org/lists/index.php">https://phplist.opensourceecology.org/lists/</a>
</noscript>
 
<script type="text/javascript">
function checkform() {
 
// first, clear the response div from the previous attempts results
jQuery("#result").empty();
 
for (i=0;i<fieldstocheck.length;i++) {
if (eval("document.phplistSubscribeForm.elements['"+fieldstocheck[i]+"'].type") == "checkbox") {
if (document.phplistSubscribeForm.elements[fieldstocheck[i]].checked) {
} else {
jQuery("#result").empty();
alert("The following field is required:  "+fieldnames[i]);
eval("document.phplistSubscribeForm.elements['"+fieldstocheck[i]+"'].focus()");
return false;
}
} else {
if (eval("document.phplistSubscribeForm.elements['"+fieldstocheck[i]+"'].value") == "") {
alert("Please enter your "+fieldnames[i]);
eval("document.phplistSubscribeForm.elements['"+fieldstocheck[i]+"'].focus()");
 
return false;
}
}
}
 
for (i=0;i<groupstocheck.length;i++) {
if (!checkGroup(groupstocheck[i],groupnames[i])) {
return false;
}
}
 
if (! checkEmail()) {
alert("Email address is not valid");
return false;
}
 
return true;
}
 
var fieldstocheck = new Array();
var fieldnames = new Array();
function addFieldToCheck(value,name) {
fieldstocheck[fieldstocheck.length] = value;
fieldnames[fieldnames.length] = name;
}
 
var groupstocheck = new Array();
var groupnames = new Array();
function addGroupToCheck(value,name) {
groupstocheck[groupstocheck.length] = value;
groupnames[groupnames.length] = name;
}
 
function compareEmail() {
return (document.phplistSubscribeForm.elements["email"].value == document.phplistSubscribeForm.elements["emailconfirm"].value);
}
 
function checkEmail() {
var re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(document.phplistSubscribeForm.elements["email"].value);
}
 
function checkGroup(name,value) {
option = -1;
for (i=0;i<document.phplistSubscribeForm.elements[name].length;i++) {
if (document.phplistSubscribeForm.elements[name][i].checked) {
option = i;
}
}
 
if (option == -1) {
alert ("Please enter your "+value);
return false;
}
 
return true;
}
 
function submitForm() {
 
// first, clear the response div from the previous attempts results
jQuery("#result").empty();
 
successMessage = 'Thank you for your registration. Please check your email to confirm.';
data = jQuery('#phplistSubscribeForm').serialize();
jQuery.ajax( {
 
type: 'POST',
data: data,
dataType: 'html',
 
<!-- set the id in the url below (&id=X) to the Subscribe List ID, per
    the "Config" -> "Subscribe pages" page in the phplist wui
      * https://phplist.opensourceecology.org/lists/admin/?page=spage
 
    Note that the Subscribe Page should use
      * "Don't display email address confirmation field" or it will fail
      * "Select the lists to offer" tab should check exactly one list
 
    For more information, see
      * https://discuss.phplist.org/t/solved-ajax-subscribe-api/974
-->
url: 'https://phplist.opensourceecology.org/lists/index.php?p=asubscribe&id=3',
 
// defines a function that's called when our ajax call suceeds (ie: gets a
// 200 response back)
success: function (data, status, request) {
 
jQuery("#result").empty().append(data != '' ? data : successMessage);
jQuery('#attribute1').val('');
jQuery('#email').val('');
 
},
 
// defines a function that's called when our ajax call fails (ie: gets a 500
// response back)
error: function (request, status, error) {
 
jQuery("#result").empty();
alert('Sorry, we were unable to process your subscription.');
 
}
 
});
 
}
 
</script>
 
<div id="phplistAjaxSubscribeFormWrapper" style="display:none;">
 
<p>Signup for our newsletter!</p>
 
<!-- this simple form intentionally only requires the bare necessities:
  [1] email address
  [2] accept Privacy Policy
-->
<form method="post" action="" name="phplistSubscribeForm" id="phplistSubscribeForm">
 
<!-- [1] email address -->
<input type=text name=email required="required" placeholder="Email" size="30" id="email" />
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email address");</script>
<br/>
 
<!-- [2] accept Privacy Policy -->
<input type="checkbox" name="attribute4" value="on"  class="attributeinput" id="attribute4" />
<label for="attribute4">I agree to the OSE <a href='https://wiki.opensourceecology.org/wiki/Open_Source_Ecology:Privacy_policy'>Privacy Policy</a></label>
<script language="Javascript" type="text/javascript">addFieldToCheck("attribute4","I agree to the OSE Privacy Policy");</script>
<br/>
 
<!-- other strange hidden inputs per phplist's ajax example thread
  * https://discuss.phplist.org/t/solved-ajax-subscribe-api/974
-->
<input type="hidden" name="list[2]" value="signup" />
<input type="hidden" name="listname[2]" value="newsletter"/>
<input type="hidden" name="htmlemail" value="1" />
<div style="display:none"><input type="text" name="VerificationCodeX" value="" size="20"></div>
 
</form>
 
<!-- do some input sanity checking with js, then ajax() submit using jquery -->
<button class='button' onclick="if (checkform()) {submitForm();} return false;">Subscribe</button>
 
</div>
</div>
<iframe src="https://docs.google.com/forms/d/1XXJjAa6be9uiuviMo7kqdwZNGTNtU8DjeVvve-aMieY/viewform?embedded=true" width="560" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
 
<!-- this input will fill-in with results from the phplist server after the ajax
submission via jquery -->
<div id="result"></div>
 
 
<script type="text/javascript">
 
// display the ajax subscription form iff js is enabled
document.getElementById( 'phplistAjaxSubscribeFormWrapper' ).style.display = 'block';
 
</script>
 
</html>
</html>


[https://docs.google.com/a/opensourceecology.org/forms/d/1XXJjAa6be9uiuviMo7kqdwZNGTNtU8DjeVvve-aMieY/edit edit]
[https://docs.google.com/a/opensourceecology.org/spreadsheets/d/1oL2wRVaKf7oY07vR6FvWReIiYR8R_Y0eVOrtROiGTv8/edit#gid=335758478 results]


=OSEmail Archives=
=OSEmail Archives=

Revision as of 14:48, 3 December 2018

If you would like to receive monthly updates: Subscribe or Unsubscribe with this form:


OSEmail Archives

OSemail image.png

Template

This section will describe the template of the emails as it evolves over time.

2018-09

In 2018-09, we switched to phplist. Because phplist doesn't (without installing outdated plugins, that is) OOTB support content from multiple fields, using the 2-column layout would be non-trivial, at best increasing the complexity for the person responsible for sending email campaigns. For this reason, we modified the existing template to be a single column.

The existing template used html tables for structuring the layout, which is horrible. But, it works.

File:OSEmail phplist.tar.gz

pre-2018

In 2018, OSEmail was revisited as a self-hosted solution using phplist. Prior to this, we had used Campaign Monitor for the template sent with Mailchimp.

File:OSEmail 5.0.tar.gz

OSEmail Protocol

edit

See Also

Retrieved from "https://wiki.opensourceecology.org/index.php?title=OSEmail&oldid=182557"