We've been using that newsletter form for
a long time now but haven't yet mentioned how we are going to send out
the newsletters. One way to do this is to use a hosted newsletter
service. There are many of these available each with slightly different
offerings. Some familiar names include Aweber, MailChimp, Constant
Contact, iContact, and half a dozen or so others.
This article is from Chapter 7 “Adding features to your form” of The ChronoForms Book and is included here with permission from Packt Publishing.
Each of these services will have an API that can be accessed to update records. Some of these can be very rich and complex, others almost non-existent. However, all of them have suggestions for a form that you can include on your website for newsletter signups. This form code will give us enough to sign up our user automatically to the service.
We will work with iContact here but the same principals will apply to any of the other services.
Getting ready
We first need to find the "sign-up" form code for our newsletter service provider. iContact has a little wizard that generates a form in two versions—the Manual Sign-up Form is the one we want as it shows all of the form information.
How to do it…
- Here's the HTML code the iContact sign-up wizard produces, with some styling and validation code removed:
<form method=post
action="https://app.icontact.com/icp/signup.php"
name="icpsignup" id="icpsignup636" accept-charset="UTF-8" >
<input type=hidden name=redirect
value="http://www.icontact.com/www/signup/thanks.html" />
<input type=hidden name=errorredirect
value="http://www.icontact.com/www/signup/error.html" />
<div id="SignUp">
<table width="260" class="signupframe" border="0"
cellspacing="0" cellpadding="5">
<tr>
<td valign=top align=right>Email</td>
<td align=left>
<input type=text name="fields_email">
</td>
</tr>
<tr>
<td valign=top align=right>Last Name</td>
<td align=left>
<input type=text name="fields_lname">
</td>
</tr>
<input type=hidden name="listid" value="9999">
<input type=hidden name="specialid:9999" value="XAPD ">
<input type=hidden name=clientid value="123456">
<input type=hidden name=formid value="777">
<input type=hidden name=reallistid value="1">
<input type=hidden name=doubleopt value="0">
<tr>
<td> </td>
<td>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
The parts that interests us are—the form Action URL https://app.icontact.com/icp/signup.php, and then the list of input names and values which we can extract from the surrounding HTML:
The first two match up to the two fields in our form, the remainder have the same values whatever values are entered into the form.
The redirect and errorredirect inputs will not have any effect working with cURL so we can leave those out.
- So we can use the cURL plug-in just as we did in the last recipe, but this time we will link the first two input names here to the corresponding form fields.
Remember to add the Target URL on the second tab, then save the plug-in configuration. Open the form in the Form Editor, enable the plug-in on the Plugins tab and Apply or Save the form.
- View the form in your browser and test it.
Note that the IDs shown here are not valid so this exact data will not work. However, with the correct IDs this form successfully adds a new record to the iContact database, except that here iContact is setup to use First Name and Last Name fields and we've put both parts into the Last Name field. It would be simple to add an extra input to our form to handle this.
How it works…
We are pulling out the critical information from the form that the iContact wizard created and using the cURL plug-in to submit that as though it was coming from a form on our site.
See also
- The previous recipe in this article shows another way of using the cURL plug-in.
Adding a conversion tracking script
If you are running a commercial site then you may want to use one of the conversion tracking services to record the customer action after submission. Here we'll use the Google tracking code as an example; others will be very similar.
Google Conversion Tracking is not the same as Analytics which track every page on your site. Google Analytics (and other similar services) need the code on every page and the best way to do this is either with a custom module (for example, the gh Google Analytics module), or by adding the code to your template.
Getting ready
You can use this with any form but you will need to have the ID codes for your own Google AdWords account to use it.
How to do it…
- The conversion tracking code has one slightly different requirement to other form scripts. We only want to show it after conversion so we don't want the code in the Form HTML, but in one of the OnSubmit After boxes instead. The OnSubmit After box is preferred but the OnSubmit Before will work as well, as long as you have Send Emails set to Yes on the Form General tab.
- Here's one of the example scripts from the Google AdWords™ Conversion Tracking Setup Guide:
<!-- Google Code for Purchase Conversion Page -->
<script language="JavaScript" type="text/javascript">
<!--
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
if (5.0) {
var google_conversion_value = 5.0;
}
var google_conversion_label = "Purchase";
//-->
</script>
<script language="JavaScript"
src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="http://www.googleadservices.com/pagead/conversion/1234567890/
?value=5.0&label=Purchase&script=0">
</noscript>
You'll see that there are three parts to this script:
- A JavaScript that sets some parameter values
- A link to download a script from Google
- A "noscript" script to allow conversion tracking for users without JavaScript enabled
You could just put this code as it is into the OnSubmit box and it will work fine most of the time.
If you want to be a little more elegant then you can use a little PHP to load the first two parts from the page head rather than the body. Note that you can't use the ChronoForms JavaScript box as that only works when the form is displayed and that's not what we want here.
<?php
$script = "
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
if (5.0) {
var google_conversion_value = 5.0;
}
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);[/code]
$doc->addScript( "http://www.googleadservices.com/pagead/
conversion.js" );
?>
<noscript>
<div style="display:inline;">
<img height=1 width=1 border=0 src="http://www.googleadservices.
com/pagead/conversion/1234567890/?value=5.0&label=Purchase&scri
pt=0">
</div>
</noscript>
- That really is all that is required except to note that you must make sure that the ChronoForms "Thank you" page is displayed in order for the script to be delivered.
There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.
