Skip to main content
Contact Support

Live Forms API Examples for Our Most Recent Builder Version(V4)

Ryan J.
Updated

Without getting too technical, the infrastructure of our most recent Form builder (V4) has significantly changed. Due to these changes, some of the more custom solutions that involve modifying the DOM (especially form input elements) may not work as intended. Instead, we recommend utilizing the form’s API to make such changes to the form. Please refer to the API resource below to help get you started with customizing your forms. 



Note: While we provide access to our API on all paid accounts, our support team is unable to assist with troubleshooting custom API setups. 

The code provided in these examples are just examples. While some might be able to be plug and played into a real use case, others will need to be customized and tailored to meet your needs. These examples are designed to be used by those who are comfortable and confident with scripts. These examples are not maintained by our product and engineering teams. Each is treated as a custom code and as such, the support provided is limited. 

If you're looking for help with building out some of these solutions, Formstack offers a Partner Consulting program where you can team up with third party Certified Formstack experts to bring your custom projects to life.

For more information on pricing and to book your consultation, please click here!

 

Link to API Spec

https://live-form-api.formstack.com/index.html
 

Below are some common examples that our customers have used in the past:

Note: In these examples and in general, you will need to use the "FIELD_ID" to manipulate the field you are looking for. To make this easy, please use the field ID for the field you are working with. This can be found in the URL while in the form builder.



Example: Source Field= 154195740, so we would apply it to the script as, "154195740"

This will be the same process when referencing the "FORM_ID" in the script. The Form ID can also be found in the URL while working in the form builder.




 

Quick Links

Mirroring a field (Passing a value from one field on the form to another)

Updating a description field with another field’s content

Honey Pot (Spam bot mitigation)

Get Checkbox Values

Repeating Sections

Google Address Autocomplete

Formatting a Field for EIN (Employer Identification Number)

Formatting a Field for SSN (Social Security Number)

ValidateSpecific Domain for an Email

Get User's Current Page

Check if the User is Accessing the Form via Mobile Device

Google Translate Widget

 

“Mirroring” a field:

 

  1. <script>
var form = window.fsApi().getForm(FORM_ID);
form.registerFormEventListener({
    type: 'change',
    onFormEvent: function (event) {
      if (event.data.fieldId === 'SOURCE_FIELD_ID') {
        const source = form.getField('SOURCE_FIELD_ID');
        const destination = form.getField('DESTINATION_FIELD_ID');
        destination.setValue(source.getValue());
      }
      return Promise.resolve(event);
    }
  });
</script>
  2. In the example above, we start by grabbing the form from the DOM by using the fsApi().getForm() method.
  3. Once we have the form, we register a form event listener that takes in a JSON object with the following data:
    1. type: This is the type of event that will trigger the event. Currently, we have the following events available:
      • change - this event is triggered after a field has been blurred out.
    2. onFormEvent: This is the function that will execute when an event is triggered.
      • In this example, we are using conditional logic to see if the change event was triggered on a specific field (event.data.fieldId).
      • Assuming the condition evaluates as true, we then identify the source and destination fields using the getField method from the form.
      • Lastly, we use the setValue method from the destination field to set the destination field's value to the source field's value (which is derived from the getValue method of the source field).
  4. In order to use the example above, you will need to replace the following with your own data:
    1. FORM_ID: the ID of the form (as seen in the form's URL)
    2. SOURCE_FIELD_ID: the numerical value (wrapped in single or double quotes) of the field that the data will be copied from.
    3. DESTINATION_FIELD_ID: the numerical value (wrapped in single or double quotes) of the field that the date will be copied to.

  5. Both the SOURCE_FIELD_ID and DESTINATION_FIELD_ID values can be found by inspecting the input field and copying the numbers at the end of the id attribute:



     

Updating a description field with another field’s content

 

  1. <script>
var form = window.fsApi().getForm(FORM_ID);
form.registerFormEventListener({
    type: 'change',
    onFormEvent: function (event) {
      if (event.data.fieldId === 'SOURCE_FIELD_ID') {
        const source = form.getField('SOURCE_FIELD_ID');
        const destination = form.getField('DESCRIPTION_FIELD_ID');
        destination.setTypeAttribute('content', '<div style="background-color: hotpink;">' + source.getValue().value + '</div>');
      }
      return Promise.resolve(event);
    }
  });
</script>
  2. Similar to the previous example, you will need to replace FORM_ID, SOURCE_FIELD_ID, and DESCRIPTION_FIELD_IDwith the IDs from your form.
  3. Additionally, we are using the setTypeAttribute method instead of the setValue method as we did in the previous example. This is due to the field type being a description field and not actually having a value. With this method, we can identify a specific attribute in the first argument (in this case, 'content') and the value that the attribute should contain (in this case, a div element with the value from the source field wrapped inside).


     

Honey Pot

 

  1. <script>
var form = window.fsApi().getForm(FORM_ID);
form.registerFormEventListener({
    type: 'submit',
    onFormEvent: function (event) {
      const honeyPotField = form.getField('HONEY_POT_FIELD_ID');
      if (honeyPotField.getValue().value) {
        alert('Honeypot Triggered'); // Replace this with whatever text you want to display in the alert
        event.preventDefault();
        return;
      }
      return Promise.resolve(event);
    }
  });
</script>
  2. This code is designed to add a security feature to a form using a technique known as a "honeypot". A honeypot in web forms is a hidden field that is invisible to regular users but can be filled out by automated bots. The presence of data in the honeypot field is used to identify and prevent bot submissions. Overall, the primary purpose of this script is to add a simple spam prevention mechanism to a web form. By using a honeypot field, it aims to distinguish between submissions made by humans and automated bots, blocking the latter. Here's how this code works:
    1. Form Retrieval:
      • The script retrieves a form object using window.fsApi().getForm(FORM_ID). It assumes that FORM_IDis defined elsewhere in your code as the ID of the form you're working with. The fsApi is a part of a form handling library or API.
    2. Event Listener Registration:
      • The script registers an event listener on the form for the 'submit' event. This event triggers when the form is about to be submitted.
    3. Event Listener Function:
      • Inside the event listener, the function first retrieves a field identified by 'HONEY_POT_FIELD_ID'. This ID should correspond to the hidden honeypot field in your form. Again, it's assumed that 'HONEY_POT_FIELD_ID' is defined elsewhere in your code.
      • It then checks if the honeypot field has any value (honeyPotField.getValue().value).
        • If the honeypot field contains any data, it means that a bot (which can see the field) has filled it out. In such a case:
          • An alert box is triggered with the message 'Honeypot Triggered' (or any other text you choose to replace it with). This serves as a notification that a bot submission has been detected.
          • event.preventDefault() is called to stop the form from being submitted.
        • If the honeypot field is empty (as it should be for real users), the function allows the form submission to proceed normally.
    4. Returning Promise:
      • The function returns Promise.resolve(event), which is a standard practice in asynchronous JavaScript to ensure that any chained operations are resolved properly. In the context of this script, it's used to handle the form submission event in an asynchronous manner, though its necessity and effectiveness would depend on the broader context of the form submission process.


 

Get CheckBox Values

 

  1. <script>
// Replace with appropriate values
const FORM_ID = 84;
const CHECKBOX_FIELD_ID = '548';

const form = window.fsApi().getForm(FORM_ID);

  function getCheckboxValues(checkboxField) { 
    const valueObject = checkboxField.getValue();
    // will look something like: 
    // {"0": null, "1": "value of option1", "2": null, "useOtherValue": true,"otherValue": "test" }
  
    // if options are required
    const options = checkboxField.getGeneralAttribute('options');
    const selectedOptions = Object.keys(valueObject).reduce(function(key, collected) {
      // capture other value if set
      if (key === 'useOtherValue' && valueObject[key]) {
        collected.push({ label: 'Other', value: valueObject['otherValue'] });
        return collected;
      }
      // already captured above 
      if (key === 'otherValue') {
        return collected;
      }
      const value = valueObject[key];
      const possibleOption = options[key]
      if (value && possibleOption) {
        // make a copy so we don't mess up the actual options
        collected.push({ label: possibleOption.label, value: possibleOptions.value });
      }
    }, []);
    
    // to get an array of values only
    return Object.values(valueObject).filter(key => !!key);
}

form.registerFormEventListener({
  type: 'change',
    onFormEvent: function (event) {
        if (event.data.fieldId === CHECKBOX_FIELD_ID) {
            const checkboxField = form.getField(CHECKBOX_FIELD_ID);
      getCheckboxValues(checkboxField);
        }
        return Promise.resolve(event);
    }
  });
</script>
  2. This script is designed to monitor a specific checkbox field in a form for any changes, extract the selected values from it, and possibly use those values for further processing. Let's break down what the code is doing
     
    1. Form and Field Initialization:
      • The constants FORM_ID and CHECKBOX_FIELD_ID are placeholders for the form's ID and the specific checkbox field's ID, respectively.
      • The form variable is initialized using a function window.fsApi().getForm(FORM_ID), which  retrieves a form object from our Formstack form service API.
    2. getCheckboxValues Function:
      • This function takes a checkboxField object and processes its values.
      • It first retrieves the current values of the checkbox field, which are expected to be in a specific object format (including useOtherValue and otherValue for custom inputs).
      • The function also handles the extraction of selected options from the checkbox field. It loops through the valueObject keys and filters out selected options based on the predefined options attribute of the checkbox field.
      • It returns an array of selected option values.
    3. Event Listener Registration:
      • The code then registers an event listener on the form for any changes.
      • When a change event occurs, it checks if the change is related to the specific checkbox field (using CHECKBOX_FIELD_ID).
      • If the event is relevant, it retrieves the checkbox field object and calls getCheckboxValues with this object.
      • The event handling function ends with a promise resolution.

 

 Repeating Sections

 
  1. // Example produced

    "use strict";
    
const form = window.fsApi().getForm('5568003');
var counter = 0;
//const compileCell = 'fsCell150516915';
//const dataField = document.getElementById('field156674190');
const dataField = form.getField('156674190');

// Runs on the load of the page.
function initializeForm() {
    cloneRow(); // run to add the first field set
    //document.getElementById(compileCell).addEventListener("change", compileData);
}

// clones a row
function cloneRow() {
    console.log('clonedRow ran');
    counter++;
    let clonedRow = document.getElementById('clone_container').cloneNode(true);
    
    clonedRow.id = '';
    clonedRow.style.display = 'inline-block';
    var newRow = clonedRow.querySelectorAll('input, select');
	for (var i = 0; i < newRow.length; i++) {
		var theName = newRow[i].name
		if (theName)
			newRow[i].name = theName + counter;
		var theID = newRow[i].id
		if (theID)
			newRow[i].id = theID + counter;
	}
    document.querySelector('.master-container').appendChild(clonedRow); //add as last child of '.master-container'
}

// Pulls and combines the options from multiple select lists.
function compileData() {
    
    var dataArray = []; // clear the array
    dataField.value = ""; // clear the field
    
    //query for all containers(rows)
    let allRows = document.querySelectorAll('.exposure-container:not(#clone_container)');
    
    //loop over the containers(rows)
    for (var i = 0; i < allRows.length; i++) {
        //build an object from the fields in each container
        var currentFields = allRows[i].querySelectorAll('input, select');
        
            //build an object
            var dataBuild = {
                description: currentFields[0].value, 
                make: currentFields[1].value, 
                model: currentFields[2].value,
                serial: currentFields[3].value,
                value: currentFields[4].value,
                pick: currentFields[5].value
            };
        
            //add it to the data array
            dataArray.push(dataBuild);
        
    }//end loop
  2.  This script is designed to allow the use for repeating sections by allowing a user to use a checkbox to dictate if they need to add an additional entry for a section. (Emulates additional record creation). Let's break down the code.
    1. Variable Declarations:
      • FORM_ID and CHECKBOX_FIELD_ID are constants that store the ID of the form and the checkbox field, respectively.
    2. Form Retrieval:
      • The script retrieves the form object using window.fsApi().getForm(FORM_ID) and stores it in the form variable.
    3. Function getCheckboxValues:
      • This function takes a checkboxField object as an argument.
      • It retrieves the current values of the checkbox field using checkboxField.getValue(). The values are in the format of an object where each key corresponds to an option in the checkbox field. The value of each key is the value of the checkbox option if selected, or null if not selected.
      • The function checks if the checkbox field has an 'other' value, which allows the user to input a custom value.
      • It then iterates over the checkbox options, extracting the label and value of each selected option.
      • Lastly, it returns an array of selected values (excluding null values).
    4. Event Listener Registration:
      • The script registers an event listener for the form. It listens for 'change' events, which occur when the value of any field in the form changes.
      • Inside the event listener, the script checks if the changed field is the checkbox field of interest (CHECKBOX_FIELD_ID).
      • If so, it retrieves the checkbox field object and calls getCheckboxValues with this object, effectively extracting and processing the selected options whenever the user changes their selection in the checkbox field.



 

 Google Address Auto Complete
 

  1.  'use strict';
  const FORM_ID = 'YOUR FORM';
  const FIELD_ID = 'ADDRESS FIELD';
  const ADDRESS_1_ID = 'field' + FIELD_ID + '-address';

  const API_KEY = 'YOUR_API_KEY';

  const form = window.fsApi().getForm(FORM_ID);
  const field = form.getField(FIELD_ID);

  function embedAPI() {
    var scriptTag = document.createElement('script');
    //Change the API key in this URL
    scriptTag.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key= ' + API_KEY + '&libraries=places&callback=initMap&solution_channel=GMP_QB_addressselection_v1_cA');

    document.head.appendChild(scriptTag);
  }

  function initMap() {
    //CHange the field ID to point to the address block
    const autocompleteInput = document.getElementById(ADDRESS_1_ID);
    const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
      fields: ['address_components', 'geometry', 'name'],
      types: ['address'],
    });
    autocomplete.addListener('place_changed', function() {
      const place = autocomplete.getPlace();
      console.log(place);
      if (!place.geometry) {
        // User entered the name of a Place that was not suggested and
        // pressed the Enter key, or the Place Details request failed.
        window.alert('No details available for input: \'' + place.name + '\'');
        return;
      }
      fillInAddress(place);
    });

    function fillInAddress(place) {  // optional parameter
      const addressNameFormat = {
        'street_number': 'short_name',
        'route': 'long_name',
        'locality': 'long_name',
        'administrative_area_level_1': 'short_name',
        'country': 'long_name',
        'postal_code': 'short_name',
      };

      const getAddressComp = function(type) {
        for (const component of place.address_components) {
          if (component.types[0] === type) {
            return component[addressNameFormat[type]];
          }
        }
        return '';
      };
      const addressValue = {
        address: getAddressComp('street_number') + ' ' + getAddressComp('route'),
        address2: '',
        city: getAddressComp('locality'),
        state: getAddressComp('administrative_area_level_1'),
        country: getAddressComp('country'),
        zip: getAddressComp('postal_code'),
      };

      field.setValue(addressValue);
    }
  }

  embedAPI();
  2. This code is designed to enhance a form by integrating Google Maps Places Autocomplete functionality. It is structured to work within a specific form and address field, using the Google Maps API. In essence, this script enhances a form's address field by adding an autocomplete feature that suggests addresses to the user as they type, using Google Maps Places API. Once an address is selected, the script automatically fills in the relevant parts of the form with the components of that address. Here's a breakdown of its functionality:
    1. 'use strict':
      • This directive ensures that the script operates in a "strict mode," which is a more secure and error-resistant variant of JavaScript. It helps catch common coding mistakes and "unsafe" actions (like accessing global objects).
    2. Variable Declarations:
      • FORM_ID, FIELD_ID, ADDRESS_1_ID, and API_KEY are constants that store IDs for the form, address field, a specific address field element, and the Google Maps API key, respectively.
    3. Form and Field Retrieval:
      • The script retrieves the form and the specific field from the form using window.fsApi().getForm(FORM_ID) and form.getField(FIELD_ID).
    4. Function embedAPI:
      • This function creates a new <script> tag in the document, setting its src attribute to the URL of the Google Maps JavaScript API, incorporating the API key.
      • The script is then appended to the document's <head>, which loads the Google Maps API onto the page.
    5. Function initMap:
      • This function initializes the Google Maps Places Autocomplete functionality.
      • It retrieves the address input field from the document by its ID (ADDRESS_1_ID).
      • Sets up the Autocomplete functionality on this input field, specifying that it should only provide suggestions for addresses.
      • Adds an event listener that triggers when a place is selected from the autocomplete suggestions.
      • If a valid place is selected, it triggers the fillInAddress function to populate the form fields with the address components.
    6. Function fillInAddress:
      • This function extracts and formats various components of the selected address (like street number, route, city, state, country, postal code) using the data provided by Google Maps.
      • It then sets these values in the form's address field.
    7. Calling embedAPI:
      • Finally, the script calls embedAPI() to start the process by loading the Google Maps API.




Formatting a Field for EIN (Employer Identification Number)
 

  1. // PAP - this is a proposal to generically apply a masking function to any text field


type TMaskFunction = (value: IFieldValue) => string;
type TSetTextMask = (mask: string|TMaskFunction) => void;

field.setTextMask('EN-[0-9]{6}'); // from some expression
// from function
field.setTextMask((value) => {
  return `${value.last}, ${value.first}`; 
});
  2. Text masking is a technique used to format input in a text field, often for consistency and data validation purposes. Overall, this code is about enhancing input fields with formatting rules (masks) to ensure the input is in a specific, predefined format. This can be particularly useful in forms where data consistency and validation are important. The actual implementation details (like the field object and IFieldValue type) depend on the larger context of the application in which this code is used. Here's an explanation of the different parts of this code:
    1. Type Definitions:
      • TMaskFunction: This is a TypeScript type alias for a function. The function takes an argument valueof type IFieldValue (which is not defined in the snippet but is presumably a custom type representing the value of a field) and returns a string. The purpose of this function is to transform or format the field value.
      • TSetTextMask: This is another type alias for a function. The function takes a single argument mask, which can either be a string or a function of type TMaskFunction, and it returns void (i.e., it doesn't return anything).
    2. Setting Text Mask:
      • The code demonstrates two ways to set a text mask on a field (presumably a form field or similar UI element).
      • field.setTextMask('EN-[0-9]{6}');: This line sets a text mask using a string pattern. In this case, the pattern 'EN-[0-9]{6}' suggests that the field should accept text starting with "EN-" followed by six digits. This is a typical usage scenario where a specific input format is required (e.g., for a serial number or code).
      • field.setTextMask((value) => { return ${value.last}, ${value.first}; });: This line sets a text mask using a function. Here, the function takes an IFieldValue object (which presumably contains properties like last and first) and returns a formatted string combining these properties. This approach is more flexible and can be used when the masking logic is too complex to be represented by a simple string pattern.




Formatting a Field for SSN (Social Security Number)
 

  1. <script>
//Replace with appropriate values
const FORM_ID = 84;
const SSN_FIELD_ID = '544';

const form = window.fsApi().getForm(FORM_ID);

function formatSSN(ssn) {
  ssn = ssn.replace(/\D/g, "");

  ssn = ssn.substring(0, 9);

  return ssn.replace(/(\d{3})(\d{2})(\d{4})/, "$1-$2-$3");
}

let newValue;

form.registerFormEventListener({
    type: 'change',
    onFormEvent: function (event) {
        if (event.data.fieldId === SSN_FIELD_ID) {
            const ssnField = form.getField(SSN_FIELD_ID);
            const ssnFieldValue = ssnField.getValue().value;
            if (ssnFieldValue && ssnFieldValue !== newValue) {
                newValue = formatSSN(ssnFieldValue);
                ssnField.setValue(newValue);
            }
        }
        return Promise.resolve(event);
    }
  });
</script>
  2. This snippet is designed to specifically target a field intended for a Social Security Number (SSN). The script automatically formats the SSN input by the user into a standard SSN format. Overall, the purpose of this script is to enhance user experience and data consistency by automatically formatting SSN inputs into a standardized form, which is useful for data validation and storage. Here's a breakdown of its functionality:
    1. Variable Declarations:
      • FORM_ID and SSN_FIELD_ID are constants that store the ID of the form and the SSN field, respectively.
    2. Form Retrieval:
      • The script retrieves the form object using window.fsApi().getForm(FORM_ID) and stores it in the form variable.
    3. Function formatSSN:
      • This function takes an SSN string as an argument.
      • It first removes all non-digit characters from the SSN using ssn.replace(/\D/g, "").
      • Then, it truncates the string to the first nine digits (the standard length of an SSN).
      • Finally, it formats the SSN into the pattern "XXX-XX-XXXX" (where X represents a digit) and returns this formatted string.
    4. Event Listener Registration:
      • The script registers an event listener for the form. It listens for 'change' events, which occur when the value of any field in the form changes.
      • Inside the event listener, the script checks if the changed field is the SSN field (SSN_FIELD_ID).
      • If so, it retrieves the current value of the SSN field and checks if the value has changed from the previously stored newValue.
      • If the value has changed and is not empty, it formats the new SSN value using the formatSSN function and updates the SSN field with this new formatted value.
    5. Change Handling:
      • Each time the user modifies the SSN field, the event listener triggers and reformats the input to the standard SSN format. This ensures that regardless of how the user enters their SSN (with or without dashes, spaces, or other characters), the field value is standardized upon change.



ValidateSpecific Domain for an Email
 

  1. <script>
// Replace with appropriate values
const FORM_ID = 84;
const EMAIL_FIELD_ID = '548';
const DOMAIN_NAME = 'formstack.com';

const form = window.fsApi().getForm(FORM_ID);

function validateEmailDomain(email) { 
  var emailDomain = email.split("@")[1]; 

  return emailDomain !== DOMAIN_NAME ? alert("Please enter a valid email using an @".concat(DOMAIN_NAME, " address.")) : null; 
}

form.registerFormEventListener({
  type: 'change',
    onFormEvent: function (event) {
        if (event.data.fieldId === EMAIL_FIELD_ID) {
            const emailField = form.getField(EMAIL_FIELD_ID);
            const emailFieldValue = emailField.getValue().value;
            if (emailFieldValue) {
                 validateEmailDomain(emailFieldValue);
            }
        }
        return Promise.resolve(event);
    }
  });
</script>
  2. This code is designed to add validation to an email field within a web form. Specifically, it checks if the email entered by a user has a domain matching a specified domain. Overall, this code enhances user input validation by ensuring that email addresses entered in a specific field adhere to a required domain format. Here's a detailed explanation of what each part of the code does:
    1. Variable Declarations:
      • FORM_ID and EMAIL_FIELD_ID are constants storing the ID of the form and the email field within the form.
      • DOMAIN_NAME is a constant that holds the domain name (formstack.com) against which the email's domain will be validated.
    2. Form Retrieval:
      • The script retrieves the form object using window.fsApi().getForm(FORM_ID) and stores it in the form variable.
    3. Function validateEmailDomain:
      • This function takes an email address as an argument.
      • It splits the email address at the "@" symbol to separate the local part from the domain part of the email.
      • Then, it checks if the domain part of the email is not equal to the specified DOMAIN_NAME.
      • If the domains do not match, an alert is displayed to the user asking them to enter a valid email address using the specified domain (@formstack.com).
      • If the email domain matches, the function does nothing (returns null).
    4. Event Listener Registration:
      • The script registers an event listener for the form. It listens for 'change' events, which occur when the value of any field in the form changes.
      • Inside the event listener, the script checks if the changed field is the email field (EMAIL_FIELD_ID).
      • If so, it retrieves the current value of the email field.
      • If the email field has a value, it calls validateEmailDomain with this value, triggering the validation process.
    5. Purpose of the Script:
      • The primary purpose of this script is to ensure that users enter an email address with a specific domain (formstack.com) in the email field of the form.
      • This could be particularly useful for forms that are intended for internal use within an organization or for specific purposes where email addresses from a particular domain are required.



Get User's Current Page 

  1. <script>
const FORM_ID = 185;
const form = window.fsApi().getForm(FORM_ID);

function getPage(paging) {
    const currentPage = paging.currentPage;
    const totalPages = paging.totalPages;
    console.log(`Page ${currentPage} of ${totalPages}`);
}

form.registerFormEventListener({
  type: 'change-page',
    onFormEvent: function (event) {
        const paging = form.getPagingContext();
        getPage(paging);
    return Promise.resolve(event);
    }
  });
</script>
  2. This code is designed to monitor page changes within the form and log the current page number and the total number of pages in the form. Overall, the script enhances the functionality of a multi-page web form by providing insights into user navigation through page change tracking and logging. Here's a detailed explanation of its components and functionality:
    1. Variable Declaration and Form Retrieval:
      • FORM_ID is a constant holding the ID of the form.
      • The form object is retrieved using window.fsApi().getForm(FORM_ID) and stored in the formvariable. This line assumes the existence of a fsApi function in the global window object, which is part of the form handling library or API being used.
    2. Function getPage:
      • The getPage function takes a paging object as its parameter.
      • It extracts currentPage and totalPages from the paging object. These represent the current page number the user is on and the total number of pages in the form.
      • It then logs this information to the console in the format: "Page X of Y", where X is the current page and Y is the total number of pages.
    3. Event Listener Registration:
      • The script registers an event listener on the form for the event type 'change-page', which is triggered when the user navigates to a different page within the form.
      • The event listener's callback function retrieves the current paging context of the form using form.getPagingContext(). This context includes information about the current and total pages.
      • The getPage function is then called with this paging context to log the current page information.
    4. Purpose of the Script:
      • The primary purpose of this script is to monitor and log navigation between pages in a multi-page form. This can be useful for analytics, debugging, or providing feedback to the user or developers about how users are interacting with the form.




Check if User is Accessing the Form via Mobile Device 

  1. const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);


     

    This line of JavaScript code is used to detect if the user's device is a mobile device, such as an iPhone, iPad, iPod, or an Android device. In summary, this code is a simple way to check if a user is visiting a website or using a web application from a mobile device, based on the information available in the browser's user agent string. This kind of check can be useful for tailoring the user experience, such as choosing to display a mobile-friendly interface or offering different functionalities depending on the type of device.Here's a breakdown of how it works:

    1. Regular Expression:
      • The code uses a regular expression (/iPhone|iPad|iPod|Android/i) to define a pattern that matches the strings "iPhone", "iPad", "iPod", or "Android".
      • The i at the end of the regular expression makes the matching case-insensitive, so it will match "iPhone", "iphone", "IPHONE", and so on.
    2. navigator.userAgent:
      • navigator.userAgent is a property in JavaScript that provides information about the browser and operating system of the user's device. It returns a string that contains details about the browser name, version, and the operating system.
    3. .test() Method:
      • The .test() method is a JavaScript method used with regular expressions. It tests whether a string matches the pattern defined by the regular expression.
      • In this case, it is used to test if the user agent string contains any of the specified device names.
    4. Variable isMobile:
      • The result of the regular expression test (a boolean value) is stored in the variable isMobile.
      • If the user agent string contains "iPhone", "iPad", "iPod", or "Android", the isMobile variable will be set to true, indicating that the user is likely accessing the website or application from a mobile device.
      • If none of these strings are found in the user agent, isMobile will be set to false, indicating that the user is likely not on a mobile device.




Google Translate Widget 

  1. <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><script type="text/javascript">
    function googleTranslateElementInit()
    {
        
        new google.translate.TranslateElement(
        {
            pageLanguage: 'en'
        }, 'google_translate_element');
    }
</script>
<p>Google Translate</p>
<div id="google_translate_element">
    <br>
</div>

  2. This code snippet automatically embeds Google Translate's language selection widget into a web page, enabling users to translate the text of the page into various languages supported by Google Translate. The widget will appear within the <div id="google_translate_element"> element, and the page's default language is set to English ('en'). Here's a breakdown of how it works:

     

    1. Google Translate Library: The first <script> tag loads the Google Translate library from Google's servers. The src attribute specifies the URL of the script to load, and the ?cb=googleTranslateElementInit query parameter indicates that the googleTranslateElementInit function should be called once the script has finished loading. This is a callback function that initializes the translation widget.
    2. Initialization Function: The googleTranslateElementInit function is defined in the second <script> tag. This function creates a new instance of google.translate.TranslateElement. It is configured with an options object that specifies the default language of the page (pageLanguage: 'en' for English). The second argument specifies the DOM element where the translation widget will be displayed, identified by its ID ('google_translate_element').
    3. Placeholder Elements: The <p> tag simply provides some text ("Google Translate") which may serve as a label or description for the widget. The <div> tag with the ID google_translate_element is the placeholder where the Google Translate widget will be rendered. Initially, it only contains a line break (<br>), but once the script runs and the widget initializes, this div will display language selection options, allowing users to translate the page content into their chosen language.
 

Related articles