How do I call a form using AJAX?

Owned by support (Unlicensed)
Last updated: mars 10, 2015 by Valérie D'Auteuil (Unlicensed)
3 min read

1. A form compatible Javscript library is provided by PUBLITRAC.  Ensure that you have your API Key, this information is provided upon request.

2. Create a Hosted Form in PUBLITRAC.

3. Generate the HTML of the Form.  In order to build your AJAX call, you must use the form ID and the names of the input fields that are generated.  (Example below underlined)

<form class="nlForm" action="..." id="1394" name="1394">

<ul class="nlLblLeft">
...
<li class="nlField nlFormRequired">
<label id="lbl_Email">Courriel:</label>
<span class="nlInputField">
<input title="" class="nlFormText nlRequired" name="Email" id="Email" type="text" value="" maxlength="255" style="width:150px;" tabIndex="3" />
<span class="nlFormMsg" />
</span>
</li>

....

4. To setup the AJAX call, use the information from point 3 and fill the informations below.  You will be required to add the API Key, the form id and each form's field names and values.

          <script type="text/javascript" src="https://app.publitrac.com/Publipage/PubliPage.Forms.WebForms-min.js...>

          <script type="text/javascript">

                    function yourCustomJavascriptMethod(firstName, lastName, email, company, isGroupDev) {

                                        /* Form identification */
                                        PubliPage.Forms.WebForms.config.apiKey = '<API_KEY>';
                                        PubliPage.Forms.WebForms.config.formId = '<formid>';

                                        /* Leads attributes */
                                        PubliPage.Forms.WebForms.config.fields.<formfielname> = <formfieldvalue>;
                                        PubliPage.Forms.WebForms.config.fields.<formfielname> = <formfieldvalue>;
                                        PubliPage.Forms.WebForms.config.fields.<formfielname> = <formfieldvalue>;
                                        ...

                                        /* Application callbacks (optionals) */
                                        PubliPage.Forms.WebForms.onPostedForm.callback = function(data) {
                                                            if(console != undefined) {
                                                                                console.log('On Posted Form: ' + data);
                                                            }
                                        }

                                        PubliPage.Forms.WebForms.onError.callback = function(error) {
                                                            if(console != undefined) {
                                                                                console.log('Error: ' + error);
                                                            }
                                        }

                                        /* End of application callbacks (optionals) */

                                        /* Post the form */
                                        PubliPage.Forms.WebForms.post();
                    }

                    </script>

5.  The 'callbacks' will help you create fully customized forms within your application.