How to use the data submitted by a form in another one?

In some situations is needed to chain multiple forms, to use the data submitted by a form in another one. To implement this type of project with the current version of the plugin (v5.0.19), the second form should be inserted in the thank you page of the first form.

The form’s settings includes the attribute: “Thank you page (after sending the message)”, for entering the URL to the page where the user is redirected after submit a form. As we said previously to connect multiple forms, the shortcode of the new form should be inserted in the thank you page of the previous one, to populate the fields in the new form with the submitted data. But this process is not automatic, and will be needed some javascript code in the thank you page.

Go to the thank you page of the form, and activate the “Text” tab in the page’s editor, because if you insert HMTL tags from the “Visual” tab, the symbols for open and close the HTML tags: “<“, “>” are converted to “&lt;”, and ¬†“&gt;” respectively.

The controls in the forms are dissimilar: input fields, textarea fields, radio buttons, checkboxes, dropdown lists, phone and datetime fields, etc. So, I will insert a script tag, with an auxiliar javascript function, that takes into consideration the different fields in the forms, and facilitates the assignment of values to the fields. The function is called setFieldValue, and requires two parameters, the field name, and the value to be assigned:

<pre style="display:none;"><script>
function setFieldValue(field, value) {
  jQuery('[id="' + field + '"]').each(
    function () {
    var e = jQuery(this),
    attr = e.attr('vt'),
    t = this.tagName;

    if (typeof attr == 'undefined' && t != 'SELECT') {
      if (e.hasClass('phone')) {
        value = jQuery.trim(value)
                 .replace(/[^\d]/g, ' ')
                 .split(' ');
        for (var j = 0, h = value.length; j < h; j++) {
           jQuery('[id="' + field + '_' + j + '"]').val(value[j]);
       } else if (e.hasClass('date')) {
         value = jQuery.trim(value).split(' ');
         jQuery('[id="' + field + '_date"]').val(value[0]);
         if (value.length > 1) {
          var time = value[1].split(':');
          jQuery('[id="' + field + '_hours"]').val(time[0]);
          jQuery('[id="' + field + '_minutes"]').val(time[1]);
    } else {
      if (t == 'SELECT') {
        e.find('[vt="' + value + '"]')
         .prop('selected', true);
      } else {
        if ((typeof value == 'object' && 
             jQuery.inArray(attr, value) != '-1') || 
             attr == value) {
          e.prop('checked', true);

To prevent conflicts between the name of fields, when more than one form is inserted in a same page, our plugin adds a code to the end of the fields names, ¬†that depends of the number of forms in the page. The plugin adds the code “_1″ to the names of fields in the first form, the code “_2″, to the names of fields in the second form, and so on. If you want populate the field with name: fieldname1, in the first (or unique) form inserted the thank you page, with the value submitted through the field with name: fieldname3, the previous function should be called with the format:

setFieldValue('fieldname1_1', '<%fieldname3_value%>' );

Inside the shortcodes to display the results of the forms: [CP_CALCULATED_FIELDS_RESULT]…[/CP_CALCULATED_FIELDS_RESULT], the tags with the format <%fieldname#_value%>, are replaced by the value submitted through the field with the name: “fieldname#”, like follow:

setFieldValue('fieldname1_1', '<%fieldname3_value%>' );

The setFieldValue function should be called as many times as needed to assign the submitted data to the fields in the new form:

setFieldValue('fieldname1_1', '<%fieldname3_value%>' );
setFieldValue('fieldname2_1', '<%fieldname5_value%>' );
setFieldValue('fieldname3_1', '<%fieldname1_value%>' );

Note: The name of fields in the previous code have been selected randomly, only to explain the process.

Comments are closed, but trackbacks and pingbacks are open.