You are here: Home > Tools > eCampaigning Tool > Documentation > Off-site Actions
home contents changes options help subscribe edit
last edited 3 years ago by duane
Document Actions

How To Incorporate An Action Form Into An External Site

An action form can site on an external site and post data to the appropriate action. This has its advantages and disadvantages.

Advantages

  • Full control over look-and-feel
  • Consistent experience for users
  • More likely to be picked up and promoted by other sites if they aren't 'giving away' visitors

Disadvantages

  • There is no validation (client or server side) meaning all data will be accepted (at present)
  • Less tracking functionality (at present) [No IP, User Agent, Language or ReferrerURL]?
  • There is a loss of control over the message and opt-in statement since someone could completely change the message and still have it posting to the action.

Functionality

  1. Allows you to host the action form on your site with your own design
  2. Accepts form data from an off-site/external form and stores it (including what site each supporter came from)
  3. Send the visitor a thank-you email
  4. Return the visitor to a URL as defined in the original form data

Form How To

  1. Set-up and action as normal
  2. Create an HTML form which has the following field names & types:
    1. nexturl - the URL to redirect the browser to
    2. givenname (text)
    3. familyname (text)
    4. receive_updates ("True" | "False")
    5. country (Internet country code)
    6. messagesubject (text)
    7. message (text)
    8. Note: you can add any other fields you wish to include, they must match the name in the action schema and be updated in 'textfields' list in postRecord.py)
  3. Ensure the ValidateeAction?.js script is in the root path of your site (i.e. in portal_skins folder)
  4. Ensure your nexturl field's value is the thank-you page you want your visitor to return to after submitting the data.
  5. Make the form 'action' to post to the full URL of the action and replace the /takeaction with /postRecord and make the action method 'post'.
  6. Good practice: include JavaScript validation to ensure required fields are completed and ideally that the email address matches the proper format
  7. Integrate the design into your form
  8. Test to ensure it is working (including validation if you added it)

Instructions To Pass To Users

To add a CAMPAIGN action form to your site, following the following steps.

Required knowledge:
 HTML
Useful knowledge:
 JavaScript

This functionality

  1. Allows you to host the action form on your site with your own design.
  2. Send the action data to the <YOURWEBSITE> action
  3. Sends the visitor a thank-you email
  4. Returns the visitor to your site based on a URL you specify

Steps

Either use and customise one of the included forms, or follow the detailed instructions.

  1. Simple instructions using included forms:

    1. Make sure you have the right form for the right action
    2. Put the following between your page <head></head> tags:
    <script type="text/javascript" src="http://YourDomain/ValidateeAction.js"></script>
    1. Change the nexturl field's value to be the URL of the Thank-you page you want to return your visitors to
    2. Don't change the Opt-in (receive_updates) text or link as this needs to be exactly the same (you could copy - the exact privacy policy to your site if you wanted).
    3. Test the form to ensure it works
    4. Apply your site design to the form

  2. Detailed instructions for complete control over form integration

    1. Create an HTML form (or use one of the ones provided) which has the following field names & types:
      1. nexturl - the URL to redirect the browser to
      2. givenname (text)
      3. familyname (text)
      4. receive_updates ("True" | "False")
      5. country (Internet country code)
      6. messagesubject (text)
      7. message (text)
      8. anonymous ("True" | "False"): Note - not used right now
    2. Put the following between your page <head></head> tags
    <script type="text/javascript" src="http://YourDomain/ValidateeAction.js"></script>

    1. Ensure your nexturl field's value is the thank-you page you want your visitor to return to after submitting the data.

    2. Make the form 'action' to post to the appropriate URL below (this is just the full URL of the action, replacing the /takeaction with /postRecord and make the action method 'post'):

      Form action: http://YourDomain/YourPath/YourActionEdition/postRecord

    3. Good practice: include Javascript validation to ensure required fields are completed and ideally that the email address matches the proper format

    4. Integrate the design into your form

    5. Test to ensure it is working (including validation if you added it)

HTML Form (Table Layout)

<html>
 <head>
   <script
     type="text/javascript"
     src="http://YourDomain/ValidateeAction.js">
   </script>
 </head>
 <body>

 <table border="1">
 <form name="OffsiteActionForm"
       action="http://YourDomain/YourPath/YourActionEdition/postRecord"
       method="post" onsubmit="return validate();">
 <tr>
   <td valign="top" nobreak align="right">
     Subject:
   </td>

   <td valign="top" nobreak align="left">
    <input type="text" name="messagesubject" value="" size="30" maxlength="255" />
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right" colspan="2">
     <textarea rows="5" cols="40" name="message">Text message goes here
     </textarea>
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">
     Given Name:
   </td>

   <td valign="top" nobreak align="left">
     <input type="text" name="givenname" value="" size="30" maxlength="255" />
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">
     Family Name:
   </td>

   <td valign="top" nobreak align="left">
     <input type="text" name="familyname" value="" size="30" maxlength="255" />
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">
    Email:
   </td>

   <td valign="top" nobreak align="left">
    <input type="text" name="emailaddress" value="" size="30" maxlength="255" />
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">

   </td>

   <td valign="top" nobreak align="left">
     <input type="checkbox" value="" name="receive_updates" />
     <label for="receive_updates">Ensure you stay updated.</label>
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">

   </td>

   <td valign="top" nobreak align="left">

   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">
     Country:
   </td>

   <td valign="top" nobreak align="left">
     <select name="country">
       <option value="af">Afghanistan</option>
       <option value="al">Albania</option>
       <option value="dz">Algeria</option>
       <option value="as">American Samoa</option>
       <option value="ad">Andorra</option>
       <option value="ao">Angola</option>
       <option value="ai">Anguilla</option>
       <option value="ag">Antigua &amp; Barbuda</option>
       <option value="ar">Argentina</option>
       <option value="am">Armenia</option>
       <option value="aw">Aruba</option>
       <option value="au">Australia</option>
       <option value="at">Austria</option>
       <option value="az">Azerbaijan</option>
       <option value="bs">Bahamas</option>
       <option value="bh">Bahrain</option>
       <option value="bd">Bangladesh</option>
       <option value="bb">Barbados</option>
       <option value="by">Belarus</option>
       <option value="be">Belgium</option>
       <option value="bz">Belize</option>
       <option value="bj">Benin</option>
       <option value="bm">Bermuda</option>
       <option value="bt">Bhutan</option>
       <option value="bo">Bolivia</option>
       <option value="ba">Bosnia &amp; Herzegovina</option>
       <option value="bw">Botswana</option>
       <option value="br">Brazil</option>
       <option value="bn">Brunei</option>
       <option value="bg">Bulgaria</option>
       <option value="bf">Burkina Faso</option>
       <option value="bi">Burundi</option>
       <option value="kh">Cambodia (Kampuchea)</option>
       <option value="cm">Cameroon</option>
       <option value="ca">Canada</option>
       <option value="xq">Canada - Quebec</option>
       <option value="cv">Cape Verde</option>
       <option value="ky">Cayman Islands</option>
       <option value="cf">Central African Republic</option>
       <option value="td">Chad</option>
       <option value="cl">Chile</option>
       <option value="cn">China</option>
       <option value="co">Colombia</option>
       <option value="km">Comoros</option>
       <option value="cd">Congo, Democratic Rep.</option>
       <option value="cg">Congo, Republic of</option>
       <option value="ck">Cook Islands</option>
       <option value="cr">Costa Rica</option>
       <option value="hr">Croatia</option>
       <option value="cu">Cuba</option>
       <option value="cy">Cyprus</option>
       <option value="cz">Czech Republic</option>
       <option value="dk">Denmark</option>
       <option value="dj">Djibouti</option>
       <option value="dm">Dominica</option>
       <option value="do">Dominican Republic</option>
       <option value="ec">Ecuador</option>
       <option value="eg">Egypt</option>
       <option value="sv">El Salvador</option>
       <option value="gq">Equatorial Guinea</option>
       <option value="er">Eritrea</option>
       <option value="ee">Estonia</option>
       <option value="et">Ethiopia</option>
       <option value="fk">Falkland Islands</option>
       <option value="fo">Faroe Islands</option>
       <option value="fj">Fiji</option>
       <option value="fi">Finland</option>
       <option value="fr">France</option>
       <option value="gf">French Guiana</option>
       <option value="pf">French Polynesia</option>
       <option value="tf">French Southern Terr.</option>
       <option value="ga">Gabon</option>
       <option value="gm">Gambia</option>
       <option value="ge">Georgia</option>
       <option value="de">Germany</option>
       <option value="gh">Ghana</option>
       <option value="gi">Gibraltar</option>
       <option value="gr">Greece</option>
       <option value="gl">Greenland</option>
       <option value="gd">Grenada</option>
       <option value="gp">Guadeloupe</option>
       <option value="gu">Guam</option>
       <option value="gt">Guatemala</option>
       <option value="gn">Guinea</option>
       <option value="gw">Guinea-Bissau</option>
       <option value="gy">Guyana</option>
       <option value="ht">Haiti</option>
       <option value="hn">Honduras</option>
       <option value="hk">Hong Kong</option>
       <option value="hu">Hungary</option>
       <option value="is">Iceland</option>
       <option value="in">India</option>
       <option value="id">Indonesia</option>
       <option value="ir">Iran</option>
       <option value="iq">Iraq</option>
       <option value="ie">Ireland</option>
       <option value="il">Israel</option>
       <option value="it">Italy</option>
       <option value="ci">Ivory Coast</option>
       <option value="jm">Jamaica</option>
       <option value="jp">Japan</option>
       <option value="jo">Jordan</option>
       <option value="kz">Kazakhstan</option>
       <option value="ke">Kenya</option>
       <option value="ki">Kiribati</option>
       <option value="ko">Kosovo</option>
       <option value="kw">Kuwait</option>
       <option value="kg">Kyrgystan</option>
       <option value="la">Lao</option>
       <option value="lv">Latvia</option>
       <option value="lb">Lebanon</option>
       <option value="ls">Lesotho</option>
       <option value="lr">Liberia</option>
       <option value="ly">Libya</option>
       <option value="li">Liechtenstein</option>
       <option value="lt">Lithuania</option>
       <option value="lu">Luxembourg</option>
       <option value="mo">Macao</option>
       <option value="mk">Macedonia</option>
       <option value="mg">Madagascar</option>
       <option value="mw">Malawi</option>
       <option value="my">Malaysia</option>
       <option value="mv">Maldives</option>
       <option value="ml">Mali</option>
       <option value="mt">Malta</option>
       <option value="mh">Marshall Islands</option>
       <option value="mq">Martinique</option>
       <option value="mr">Mauritania</option>
       <option value="mu">Mauritius</option>
       <option value="yt">Mayotte</option>
       <option value="mx">Mexico</option>
       <option value="fm">Micronesia</option>
       <option value="md">Moldova</option>
       <option value="mc">Monaco</option>
       <option value="mn">Mongolia</option>
       <option value="ms">Montserrat</option>
       <option value="ma">Morocco</option>
       <option value="mz">Mozambique</option>
       <option value="mm">Myanmar</option>
       <option value="na">Namibia</option>
       <option value="nr">Nauru</option>
       <option value="np">Nepal</option>
       <option value="nl">Netherlands</option>
       <option value="an">Netherlands Antilles</option>
       <option value="nc">New Caledonia</option>
       <option value="nz">New Zealand</option>
       <option value="ni">Nicaragua</option>
       <option value="ne">Niger</option>
       <option value="ng">Nigeria</option>
       <option value="nu">Niue</option>
       <option value="nf">Norfolk Island</option>
       <option value="kp">North Korea</option>
       <option value="mp">Northern Mariana Islands</option>
       <option value="no">Norway</option>
       <option value="om">Oman</option>
       <option value="pk">Pakistan</option>
       <option value="pw">Palau</option>
       <option value="ps">Palestinian Territories</option>
       <option value="pa">Panama</option>
       <option value="pg">Papua New Guinea</option>
       <option value="py">Paraguay</option>
       <option value="pe">Peru</option>
       <option value="ph">Philippines</option>
       <option value="pn">Pitcairn</option>
       <option value="pl">Poland</option>
       <option value="pt">Portugal</option>
       <option value="pr">Puerto Rico</option>
       <option value="qa">Qatar</option>
       <option value="re">Reunion</option>
       <option value="ro">Romania</option>
       <option value="ru">Russia</option>
       <option value="rw">Rwanda</option>
       <option value="sh">Saint Helena</option>
       <option value="kn">Saint Kitts and Nevis</option>
       <option value="lc">Saint Lucia</option>
       <option value="pm">Saint Pierre &amp; Miquelon</option>
       <option value="vc">Saint Vincent &amp; Grenadines</option>
       <option value="ws">Samoa</option>
       <option value="sm">San Marino</option>
       <option value="st">Sao Tome and Principe</option>
       <option value="sa">Saudi Arabia</option>
       <option value="sn">Senegal</option>
       <option value="cs">Serbia and Montenegro</option>
       <option value="sc">Seychelles</option>
       <option value="sl">Sierra Leone</option>
       <option value="sg">Singapore</option>
       <option value="sk">Slovakia</option>
       <option value="si">Slovenia</option>
       <option value="sb">Solomon Islands</option>
       <option value="so">Somalia</option>
       <option value="za">South Africa</option>
       <option value="gs">South Georgia</option>
       <option value="kr">South Korea</option>
       <option value="es">Spain</option>
       <option value="lk">Sri Lanka</option>
       <option value="sd">Sudan</option>
       <option value="sr">Suriname</option>
       <option value="sz">Swaziland</option>
       <option value="se">Sweden</option>
       <option value="ch">Switzerland</option>
       <option value="sy">Syria</option>
       <option value="tw">Taiwan</option>
       <option value="tj">Tajikistan</option>
       <option value="tz">Tanzania</option>
       <option value="th">Thailand</option>
       <option value="tl">Timor-Leste</option>
       <option value="tg">Togo</option>
       <option value="tk">Tokelau</option>
       <option value="to">Tonga</option>
       <option value="tt">Trinidad &amp; Tobago</option>
       <option value="tn">Tunisia</option>
       <option value="tr">Turkey</option>
       <option value="tm">Turkmenistan</option>
       <option value="tc">Turks &amp; Caicos Islands</option>
       <option value="tv">Tuvalu</option>
       <option value="ug">Uganda</option>
       <option value="ua">Ukraine</option>
       <option value="ae">United Arab Emirates</option>
       <option value="uk">United Kingdom</option>
       <option value="us">United States</option>
       <option value="uy">Uruguay</option>
       <option value="uz">Uzbekistan</option>
       <option value="vu">Vanuatu</option>
       <option value="va">Vatican (Holy See)</option>
       <option value="ve">Venezuela</option>
       <option value="vn">Viet Nam</option>
       <option value="vg">Virgin Islands (British)</option>
       <option value="vi">Virgin Islands (U.S.)</option>
       <option value="wf">Wallis &amp; Futuna Islands</option>
       <option value="eh">Western Sahara</option>
       <option value="ye">Yemen</option>
       <option value="yu">Yugoslavia</option>
       <option value="zm">Zambia</option>
       <option value="zw">Zimbabwe</option>
     </select>
   </td>
 </tr>

 <tr>
   <td valign="top" nobreak align="right">

   </td>

   <td valign="top" nobreak align="right">
     <input type="hidden" name="nexturl" value="http://YourDomain/YourThankYouPage" />
     <input type="submit" name="form_submit" value="Send" />
   </td>
 </tr>
 </form>
 </table>
</html>




subject:
  ( 1 subscriber )
Sponsor the eC Tool

Can't help with development? Help pay for someone who can.

Fast checkout through Google   Sponsor:
£
  
Make payments with PayPal - it's fast, free and secure.   Sponsor:
£
  
Sponsorship details >
Go Beyond Tools...

Tools are helpful. But to be great at eCampaigning you need more: strategy, tactics, skills, experience, analysis, etc..

FairSay's Training helps you at whatever level of experience you are.