CustomForm
    • 1 Minute to read
    • Dark
      Light

    CustomForm

    • Dark
      Light

    Article summary

    You can create a custom form and use it for tracking if you are using forms on your page that are not created by using the html tag "<form>".

    Class

    constructor

    Create an instance of the class "CustomForm" and pass form name and all belonging form fields which should be tracked. Pass the custom form to the Smart Pixel to track it.

    /**
     * @param {string} name
     * @param {HTMLElement[]|CustomFormField[]} [elements]
     *
     * @constructor
     */
    wtSmart.extension.form.CustomForm(name, elements);

    add

    You can add all form fields you want to track.

    /**
     * @param {HTMLElement|CustomFormField} element
     *
     * @returns {wtSmart.extension.form.CustomForm}
     */
    customFormInstance.add(element)

    setAttribute

    Set an attribute.

    /**
     * @param {string} key
     * @param {string} value
     */
    customFormInstance.setAttribute(key, value)

    getAttribute

    Get an attribute value.

    /**
     * @param {string} key
     *
     * @returns {string}
     */
    customFormInstance.getAttribute(key);

    submit

    Change the internal form status to "submitted".

    customFormInstance.submit();

    addEventListener

    /**
     * @param {string} evt
     * @param {function} func
     */
    customFormInstance.addEventListener(evt, func);

    removeEventListener

    /**
     * @param {string} evt
     */
    customFormInstance.removeEventListener(evt);

    Example

    <div id="form03">
        <input id="001" type="hidden" name="hidden1" value="1" />
        <input id="002" type="hidden" name="hidden2" value="2" />
        <input id="003" type="text" name="text1" value="" size="15" maxlength="15" />
        <input id="004" type="text" name="text2" value="" size="20" maxlength="20" />
        <textarea id="005" cols="40" name="textarea1" rows="6"></textarea>
        <input id="006" type="password" value="" name="password1" maxlength="10" size="10" />
        <input id="007" type="radio" name="radio1" value="1" />Mr.<br />
        <input id="008" type="radio" name="radio2" value="2" />Ms.<br />
        <input id="009" type="checkbox" name="checkbox1" />Mail me more info<br />
        <input id="10" type="checkbox" name="checkbox2" />E-Mail me more info<br />
        <select id="011" name="select1">
            <option value="a1">a1</option>
            <option value="a2">a3</option>
            <option value="a3">a3</option>
            <option value="a4">a4</option>
        </select>
        <select id="012" name="multiple1" multiple="multiple">
            <option value="abc">abc</option>
            <option value="def">def</option>
            <option value="ghi">ghi</option>
            <option value="jkl">jkl</option>
            <option value="mno">mno</option>
        </select>
        <input id="013" type="submit" name="submit1" value="submit" />
    </div>
    // create a custom form
    var customFormInstance = new wtSmart.extension.form.CustomForm(
        'custom form name',
        [
            document.getElementById('001'),
            document.getElementById('002'),
            document.getElementById('003'),
            document.getElementById('004'),
            document.getElementById('005'),
            document.getElementById('006')
        ]
    );
    
    // add new form fields
    customFormInstance
        .add(document.getElementById('007'))
        .add(document.getElementById('008'))
        .add(document.getElementById('009'))
        .add(document.getElementById('010'))
        .add(document.getElementById('011'))
        .add(document.getElementById('012'))
        .add(document.getElementById('013'));
    
    // set an attribute
    customFormInstance.setAttribute('foo', 'bar');
    
    // get an attribute
    var attribute = customFormInstance.getAttribute('foo');
    
    // change the internal form status to 'submitted'
    customFormInstance.submit();
    
    // add event listener
    customFormInstance.addEventListener('submit', function() {
        console.log('custom form was submitted');
    });
    
    // remove all event listener
    customFormInstance.removeEventListener('submit');


    Was this article helpful?