Duplicating a text field in the form

The Quform WordPress v2 documentation is not yet finished. Please post on the forums if you have any questions in the mean time.

Click here to visit the complete documentation for Quform 1.x

To be able to duplicate a text field there are two steps.

Step 1

Add the following code to the box at Forms → Settings → Custom CSS & JS → Custom JavaScript.

1
23
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
jQuery(document).ready(function ($) {
    var $field = $('.quform-field-1_1'),        $input = $field.closest('.quform-input'),
        $inner = $input.closest('.quform-inner');
 
    $field.attr('name', $field.attr('name') + '[]');
 
    $('<a href="#">').text('Remove').click(function () {
        var $inputs = $inner.find('.quform-input');
 
        if ($inputs.length > 1) {
            $inputs.last().remove();
        }
 
        return false;
    }).insertAfter($input);
 
    $('<a href="#">').text('Add').click(function () {
        var $clonedInput = $input.clone(),
            $clonedField = $clonedInput.find('.quform-field');
 
        $clonedField.val('').removeAttr('id');
        $clonedInput.insertAfter($inner.find('.quform-input').last());
        $clonedField.focus();
        return false;
    }).css('margin-right', '10px').insertAfter($input);
});
jQuery(document).ready(function ($) {
    var $field = $('.quform-field-1_1'),
        $input = $field.closest('.quform-input'),
        $inner = $input.closest('.quform-inner');

    $field.attr('name', $field.attr('name') + '[]');

    $('<a href="#">').text('Remove').click(function () {
        var $inputs = $inner.find('.quform-input');

        if ($inputs.length > 1) {
            $inputs.last().remove();
        }

        return false;
    }).insertAfter($input);

    $('<a href="#">').text('Add').click(function () {
        var $clonedInput = $input.clone(),
            $clonedField = $clonedInput.find('.quform-field');

        $clonedField.val('').removeAttr('id');
        $clonedInput.insertAfter($inner.find('.quform-input').last());
        $clonedField.focus();
        return false;
    }).css('margin-right', '10px').insertAfter($input);
});
  • On line 2, replace 1_1 with the Text element unique ID

Step 2

The plugin requires that the value for a Text element is a string, so we’ll need some PHP code to convert the array of submitted values to a string before the form is processed. Add the following code to your theme functions.php file (or create a plugin for it).

1
2
345
6
7
8
9
function my_join_duplicate_fields($result)
{
    if (isset($_POST['quform_1_1']) && is_array($_POST['quform_1_1'])) {        $_POST['quform_1_1'] = join(', ', $_POST['quform_1_1']);    }
 
    return $result;
}
add_action('quform_pre_process_1', 'my_join_duplicate_fields');
function my_join_duplicate_fields($result)
{
    if (isset($_POST['quform_1_1']) && is_array($_POST['quform_1_1'])) {
        $_POST['quform_1_1'] = join(', ', $_POST['quform_1_1']);
    }

    return $result;
}
add_action('quform_pre_process_1', 'my_join_duplicate_fields');
  • On lines 3 and 4, replace the four occurrences of 1_1 with the Text element unique ID
  • On line 9, replace the number 1 with the form ID

Still having trouble? Head over to the forums.

Forums