Here’s a javascript solution to modify the design of a constant contact form any other asynchronously-loaded external script,  Constant Contact used to provide the full code, so that you could add in element attributes like placeholder. Unfortunately, as of October 2017, they’ve taken away the full embed codes in favor of a few lines in order to make the process more error-free for the majority of their users. For instances like site footers where we don’t have the luxury of space to use field labels, and I want to use placeholder text to indicate to the user the purpose of a field, we have to use javascript to insert that placeholder attribute. IE:

I want to achieve this neat and tidy visual result:

to do so, the rendered form code needs to look like this:

<input class=”ctct-form-element” data-qe-id=”form-input-email” id=”email_address_1″ type=”email” name=”email_address” value=”” maxlength=”80″ placeholder=”Email Address”>

If this form was loaded immediately upon load, then we’d use a simple script like this to insert that:

document.getElementById("email_address_1").placeholder = "Email Address";

Let’s break this down for javascript beginners.

  • document.getElementById – this is a method by which we get access to an element that is in the global document object. We could also use Document.querySelector() but in that case we’d write document.getElementById(“#email_address_1”)
  • .placeholder – The placeholder property sets or returns the value of the placeholder attribute of a field. The placeholder attribute specifies a short hint that describes the expected value of a form field (e.g. a sample value or a short description of the expected format, such as a phone number or email address).
  • with = “Email Address” we then set what value we’d like to see in that field

I originally thought I could just insert that single line into the Constant Contact provided universal javascript, but since the CC code loads asynchronously, it ended up firing before there was anything loaded to actual modify. This form content is not included directly in your server’s response to each visitor’s request. It is called after the page has initially loaded, with a slight delay, or after the visitor completes a certain action. The solution then is to only fire your modifications script when the target element has already been loaded. I found a great solution for this provided by the makers of A/B Tasty. Note: this method relies on jQuery, which works here since Constant Contact’s Universal Code script also loads that.

setInterval()

The method setInterval executes a JavaScript function at regular intervals. The idea is to check regularly to see if the given element exists in the DOM. For this, you can use the following JavaScript code.

/* ------------------ Do not edit --------------- */
 function applyWhenElementExists(selector, myFunction, intervalTime) {
   var interval = setInterval(function() {
     if (jQuery(selector).length > 0) {
        myFunction();
        clearInterval(interval);
     }
   }, intervalTime);
 }
 /* --------------------------------------------- */

where:

selector (compulsory) is the selector of the AJAX element, expressed as a string of characters in quotes, e.g. “.elementID” or “#elementClass“.

myFunction (compulsory) is a function containing the code of the modifications to be applied. It is defined anonymously when the function is called.

intervalTime (compulsory) is the frequency with which your page will check to see if the element has loaded.

Next, call this function as follows:

/* ---------------- To be edited ---------------- */
  applyWhenElementExists("selector", function(){
   // Here, enter the code corresponding to the modification you wish to implement.
  }, 50);
 /* --------------------------------------------- */

Note that you must replace “selector” with the correct selector, add your custom code, and potentially change the value of the interval, 50 being a good default option

Thus, for my clients Primal Vinyasa website, I through this into a script element:

 function applyWhenElementExists(selector, myFunction, intervalTime) {
   var interval = setInterval(function() {
     if (jQuery(selector).length > 0) {
        myFunction();
        clearInterval(interval);
     }
   }, intervalTime);
 }

  applyWhenElementExists("#email_address_2", function(){
   // Here, enter the code corresponding to the modification you wish to implement.
	document.getElementById("email_address_2").placeholder = "Email Address";
  }, 50);

I hope that helps someone else deal with the limitations of the Constant Contact system. Since this was a Wix.com site I was modifying, all of that script, plus the Universal Constant Contact js code, and the individual inline code all went into a custom HTML element, since these are loaded as an iFrame and thus, all modifying code (including the css that hides the labels) must be included in the same iframe.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.