Script to change the labels and add placeholders to the address and zip fields on the first page of an Advocacy 4 action. Also does some decoration. See

advocacy_4_address_zip_prompts.html

<!-- BEGIN: Change the appearance of the first page of an Advocacy 4 action. -->
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    if (RegExp('action4/common/public/\\?action_KEY=\\d+').test(window.location.href)) {
      var tempAddress = document.querySelector('#tempAddress');
      if (tempAddress != null) {
        var tempAddressLabel = tempAddress.parentNode.querySelector('label');
        if (tempAddressLabel != null) {
          tempAddressLabel.innerHTML = document.getElementById('address-label').innerHTML;
        }
        tempAddress.setAttribute('placeholder', document.getElementById('address-placeholder').innerHTML);
      }
      var tempZip = document.querySelector('#tempZip2');
      if (tempZip != null) {
        var tempZipLabel = tempZip.parentNode.querySelector('label');
        if (tempZipLabel != null) {
          tempZipLabel.innerHTML = document.getElementById('zip-label').innerHTML;
        }
        tempZip.setAttribute('placeholder', document.getElementById('zip-placeholder').innerHTML);
      }
    }
  })
</script>
<style type="text/css">
  /* CSS to
      1. Line up the input fields.
      2. Change the font size to be a bit larger.
      3. Make the address field longer.
      4. Fancy-up the submit button.
      5. Put a thin grey line between the action copy and the input form.
    Optional.  Change or remove as needed.  */
  #addressform {
      margin-bottom: 20px;
  }
  #addressform label{
      font-size: 1.0em;
      min-width: 160px;
      display: inline-block;
  }
  #addressform input {
  font-size: 1.0em;
  }
  #tempAddress {
  min-width: 200px;
  }
  #tempZip2 {
      min-width: 100px;
  }
  #addressform input[type="button"] {
      background-color: #449d44;
      border-color: #398439;
      border-radius: 10px;
      color: #fff;
      font-size: 1.2em;
      margin-left: 175px;
      margin-top: 15px;
      padding: 7px 15px 7px 15px;
  }
  #postalCodeForm {
      border-top: 1pt solid lightgray;
      margin-top: 20px;
      padding-top: 20px;
  }
</style>
<div style="display: none;">
  <!-- Configure prompts here. -->
  <div id="address-label">Your street address<span class="required">*</span></div>
  <div id="address-placeholder">12345 Honey Hammock Hill</div>
  <div id="zip-label">ZIP code (5 digits)<span class="required">*</span></div>
  <div id="zip-placeholder">NNNNN</div>
</div>
<!-- END: Change the appearance of the first page of an Advocacy 4 action. -->