ConvertFlow developed custom codes (Advanced)

All these codes will be added to the CTA's script manager unless otherwise advised. To get details on how to find the script manager, please refer to the "Adding conversion pixels & scripts" section of this article.

Some of these codes also have parts that need to be edited to be used for a specific CTA, for example, if you see: 

  • #ctaID_GOES_HERE, CTA_ID_HERE
  • YOUR_GLOBAL_VARIABLE
  • REPLACE_WITH_FIELD_DATA_NAME
  • #cta_REPLACEWITHCTAID
  • http://yourwebsite.com/favicon.ico
  • ?Id=INFUSIONSOFT_ID_GOES_HERE
  • #navigation-id

  • REPLACE_WITH_FIELD_DATANAME

Keep in mind that we don’t provide support for custom code use unless you’re on an Advanced Plan. We’re only providing this information for our more tech-savvy clients that wish to explore beyond the confines of ConvertFlow features at their own risk. 

If a code doesn’t work or you have any questions we suggest looping in your developer.

Add a favicon to your landing page

<script>
var callback = function(){
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
	link.type = 'image/x-icon';
	link.rel = 'shortcut icon';
	link.href = 'http://yourwebsite.com/favicon.ico';
	document.getElementsByTagName('head')[0].appendChild(link);
};
if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}
</script>

Close hook/overlay with backdrop click

<script>
jQuery('.cf-overlay, .cf-hook').css('cursor', 'pointer'); 
jQuery(document).on('click', '.cf-overlay, .cf-hook', function(event) {
	if (jQuery(event.target).hasClass('cf-overlay') || jQuery(event.target).hasClass('cf-hook')) { 
		jQuery(event.target).find('.cf-close').trigger('click'); 
	}; 
});
</script>

Custom font

<style>
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

.convertflow-cta body, .convertflow-cta h1, .convertflow-cta h2, .convertflow-cta h3, .convertflow-cta h4, .convertflow-cta h5, .convertflow-cta p, .convertflow-cta input, .convertflow-cta select, .convertflow-cta span, .convertflow-cta textarea {
	font-family: 'Raleway', sans-serif !important;
}
</style>

Sticky bar push down header

<script>
$cf('#navigation-id').css('top', $cf('#cta' + 'CTA_ID_HERE').outerHeight() + 'px')

$cf('.cf-close[data-cta-id="' + 'CTA_ID_HERE' + '"]').on('click', function() {
	$cf('#navigation-id').css('top', '0')
})
</script>

Display 2 sticky bars (place this on the first sticky bar's script manager)

<script>
setTimeout(function() {
	window.convertflow.barTriggered = undefined; 
}, 10);
</script>

Same page reload (for single-page apps)

<script>
var currentUrl = window.location.href;
// Redirect User with Access
window.location.href = currentUrl + '?access=true';
</script>

Auto-close after 5 seconds

<script>
setTimeout(function() {
	$cf('#ctaID_GOES_HERE .cf-close').click();
}, 5000);
</script>

Add a border-radius shadow

<style>
#cta_REPLACEWITHCTAID {
	border-radius: 5px !important;
	box-shadow: 0 0 30px rgba(33,33,33,.2) !important;
}
</style>

Clear pre-filled values

<script>
$cf('.cf-form-field, .cf-custom-field').find('input, select, textarea').each(function() {
	$cf(this).val('')
	$cf(this).prop('checked', false);
  	$cf(this).attr('checkstate', 'false');
})
</script>

Pre-fill hidden field with global variable

<script>
var global_variable = window.YOUR_GLOBAL_VARIABLE;
var field = $cf('input[name="contact[extra][REPLACE_WITH_FIELD_DATANAME]')
if (global_variable) {
	$cf(field).val(global_variable)
}
</script>

Pre-fill hidden field with submission URL

<script>
var current_url = window.location.href;
var field = $cf('input[name="contact[extra][REPLACE_WITH_FIELD_DATANAME]');
$cf(field).val(current_url);
</script>

Hide hook when sticky bar is visible

<script>
if ($cf('.cf-bar[style*="bottom: 0"]').is(':visible')) {
	$cf('.cf-hook').hide()
}
</script>

Anchor link code

<script>
var anchor = '#sectionID';
$cf("html, body").animate({
  'scrollTop': $cf(anchor).offset().top
}, 500);
</script>

Click to call button

<script>
window.location.href = 'tel:5555555555';
</script>

Add space to overlay top margin (set to 8%)

<style>
@media (min-width: 1024px) {
    .cf-overlay .cf-overlay-boxed {
        margin: 8% auto !important;
    }
}
</style>

Google maps address autocomplete for form fields

Swap API_KEY with your Google maps API key.

<script>
  let autocomplete;
  let addressField;
  let addressCityField;
  let addressStateField;
  let addressZipCodeField;
  let addressCountryField;

  function initAutocomplete() {
    addressField = document.querySelector(
      '.cf-form input[name="contact[address]"]'
    );
    console.log("addressField", addressField);
    addressCityField = document.querySelector(
      '.cf-form input[name="contact[city]"]'
    );
    addressStateField = document.querySelector(
      '.cf-form input[name="contact[state]"]'
    );
    addressZipCodeField = document.querySelector(
      '.cf-form input[name="contact[zip_code]"]'
    );
    addressCountryField = document.querySelector(
      '.cf-form select[name="contact[country]"]'
    );

    autocompleteAddress = new google.maps.places.Autocomplete(addressField);
    autocompleteCity = new google.maps.places.Autocomplete(addressCityField, {
      fields: ["address_components", "geometry"],
      types: ["locality", "administrative_area_level_3"],
    });
    autocompleteState = new google.maps.places.Autocomplete(addressStateField, {
      fields: ["address_components", "geometry"],
    });
    autocompleteZipCode = new google.maps.places.Autocomplete(
      addressZipCodeField,
      {
        fields: ["address_components", "geometry"],
        types: ["postal_code"],
      }
    );

    google.maps.event.addListener(
      autocompleteAddress,
      "place_changed",
      function () {
        var place = autocompleteAddress.getPlace();
        fillInAddress(place);
      }
    );

    google.maps.event.addListener(
      autocompleteCity,
      "place_changed",
      function () {
        var place = autocompleteCity.getPlace();
        fillInAddress(place);
      }
    );

    google.maps.event.addListener(
      autocompleteState,
      "place_changed",
      function () {
        var place = autocompleteState.getPlace();
        fillInAddress(place);
      }
    );

    google.maps.event.addListener(
      autocompleteZipCode,
      "place_changed",
      function () {
        var place = autocompleteZipCode.getPlace();
        fillInAddress(place);
      }
    );
  }

  function fillInAddress(place) {
    let address = "";
    let postcode = "";
    let city = "";
    let state = "";
    let country = "";

    if (place) {
      for (const component of place.address_components) {
        const componentType = component.types[0];

        switch (componentType) {
          case "street_number":
            address = `${component.long_name} ${address}`;
            break;
          case "route":
            address += component.short_name;
            break;
          case "postal_code":
            postcode = `${component.long_name}${postcode}`;
            break;
          case "postal_code_suffix":
            postcode = `${postcode}-${component.long_name}`;
            break;
          case "locality":
            city = component.long_name;
            break;
          case "administrative_area_level_1":
            state = component.short_name;
            break;
          case "country":
            country = component.long_name;
            break;
        }
      }
      addressField.value = address;
      addressCityField.value = city;
      addressStateField.value = state;
      addressZipCodeField.value = postcode;
      addressCountryField.value = country;
    }
  }
  window.initAutocomplete = initAutocomplete;
</script>

<script
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
  defer
></script>

Related Articles