Formatting fields in a list

[nchambers]

Sorry in advance, I thought I would find the solution easily but have been unsuccessful.

I have a form ID 19 and a list ID 9

The list is for milestones
item, due date, budget

How can I

1. format the fields as text, date, number($)
2. Change the width of the fields 60%,20%,20%

Thank you in advance
Noel

[faisalahammad]

Hey Noel,

Could you please share your exact webpage URL so I can help you to achieve this? Thank you

[nchambers]

Hi Faisal, Thanks in advance for your assistance.

I have three lists, if I can solve for Milestones I should be able to work out the rest.

https://nfmri.org.au/expression-of-interest-form/

Cheers
Noel

[faisalahammad]

Could you please export the form and share with me using the following secrate link so no one can access it publicly? So I can further investigate to resolve it.

** ****

Exporting a Form

[tcgsa (Phil Meyer)]

Hey Faisal,

I’d also be keen to know the solution to this, if that would be ok with you.

[faisalahammad]

Hey Phil,

Sure, whenever I found the solution and response from Noel, I’ll post the solution here.

[nchambers]

Hi Faisal,

Thank you. I did send the link to the form. I have included it again below.

I have three lists but if you can assist me with Milestones please, I should be able to work out the other two.

Text, Date, number
60%, 20%, 20%

https://nfmri.org.au/expression-of-interest-form/

Thanks again in advance
Noel

[faisalahammad]

Thank you, Noel.

But I was looking for the JSON file export form so that I can import it into my sandbox and further investigate the issue.

[nchambers]

Sorry, I have just sent that

[faisalahammad]

I didn’t find or miss any filter hooks that can help resolve the issue. However, as a workaround, you can try the following jQuery code.

1. First, add the “gf_change_list_fields” class to the Milestones → List → Appearance → Custom CSS Class.

2. Then, use the following jQuery code in the child theme’s JavaScript file or try the “Simple Custom CSS and JS” plugin.

Simple Custom CSS and JS

jQuery(document).ready(function($) {
    function updateFieldTypes() {
        var $secondInput = $('.gf_change_list_fields input:eq(1)');
        var $thirdInput = $('.gf_change_list_fields input:eq(2)');

        $secondInput.attr('type', 'date');
        $thirdInput.attr('type', 'number');
    }

    updateFieldTypes();

    $('.gf_change_list_fields .add_list_item').on('click', function() {
        updateFieldTypes();
    });
});

3. Try using the following CSS code in the style.css file of the child theme or in Appearance → Customize → Additional CSS to align the default calendar icon.

.gf_change_list_fields input[type="date"]::-webkit-calendar-picker-indicator { 
  margin-top: 10px;
}

So, the final output will look like the following screen recording.

And the entries will look like the screenshot below.

To modify the column/field width to 60%, 20% and 20%, try the following CSS code in the same location.

.gf_change_list_fields .gfield_list_group_item:first-child {
  flex: 3;
}

.gf_change_list_fields .gform-field-label:first-child {
  flex: 3;
}

Output:

Give it a try, and let me know how that goes!

[nchambers]

Hi Faisal

Thanks so much for your assistance. It is greatly appreciated.

I will give it a try during the day and let you know how I get on.

Cheers
Noel

[nchambers]

Thank you so much. I now have this working exactly as you described. I can try my other tow lists now using the same methodology

Two quick questions.
The height of my dates field seems a little larger. Is there a way for me to fix this.?
The numbers field has a up/down arrow. As numbers in the 100,000’s will be entered can I remove the up down?

Thanks again for your help and willingness to assist others. Great experience!!

Cheers
Noel

[nchambers]

Hi Faisal,

Please don’t worry about the last two questions. In the orbital theme the field heights are the same and the up/down option disappears.

I am still trying to work out how to change the two other lists in the document as some of the changes carry through when I use .gf_change_list_fields

I tried to use .gf_change_list_fields_XX (XX=List ID) without success but I will keep looking into it. You have fixed the main list.

Cheers
Noel

[faisalahammad]

Hi Noel,

You’re welcome. You can use the #field_19_5 or #field_19_5.gf_change_list_fields to apply any CSS to its child input field. Thank you.

[tcgsa (Phil Meyer)]

Hey Faisal,

Thanks so much for sharing your solution for Noel here for us all to see.

A couple of questions, if you don’t mind:

1. Where I’m at we use dates in the format dd-mm-yyyy. How would I accomplish that using your solution?

2. Is there a way to turn that number field into a currency field with one’s desired currency symbol?

3. Is it possible to add a drop-down field?

I hope you don’t think I’m taking too many liberties with my questions!

[faisalahammad]

Hi Phil,

You’re welcome. I’m used to handling around 30 customers with lots of questions.

1. You can use the Advanced Merge Tags plugin to modify the date. You can find more details below, including the details guideline.

Do More with Advanced Merge Tags and Modifiers 

2. Sure, you can use a bit of jQuery code to accomplish this. Here is the modified code and the resulting output.

jQuery(document).ready(function($) {
    function updateFieldTypes() {
        var $secondInput = $('.gf_change_list_fields input:eq(1)');
        var $thirdInput = $('.gf_change_list_fields input:eq(2)');

        $secondInput.attr('type', 'date');
        $thirdInput.attr('type', 'text'); 

        $thirdInput.on('input', function() {
            var inputValue = $(this).val();

            inputValue = inputValue.replace(/[^0-9]/g, '').replace(/^0+/, '');

            var formattedValue = '$' + parseFloat(inputValue).toLocaleString('en-US');

            $(this).val(formattedValue);
        });
    }

    updateFieldTypes();

    $('.add_list_item').on('click', function() {
        updateFieldTypes();
    });
});

Submission preview:

3. It’s also possible to use the following modified code.

jQuery(document).ready(function($) {
    function updateFieldTypes() {
        var $firstInput = $('.gf_change_list_fields input:eq(0)');
        var $secondInput = $('.gf_change_list_fields input:eq(1)');
        var $thirdInput = $('.gf_change_list_fields input:eq(2)');

        $firstInput.replaceWith('<select name="' + $firstInput.attr('name') + '">' +
            '<option value="Father">Father</option>' +
            '<option value="Mother">Mother</option>' +
            '<option value="Brother">Brother</option>' +
            '</select>');

        $secondInput.attr('type', 'date');
        $thirdInput.attr('type', 'text');

        $thirdInput.on('input', function() {
            var inputValue = $(this).val();
            inputValue = inputValue.replace(/[^0-9]/g, '').replace(/^0+/, '');
            var formattedValue = '$' + parseFloat(inputValue).toLocaleString('en-US');
            $(this).val(formattedValue);
        });
    }

    updateFieldTypes();

    $('.add_list_item').on('click', function() {
        updateFieldTypes();
    });
});

Output:

Ha ha ha, I’m not sure why you asked those questions since you didn’t seem to be experiencing those issues. However, it seems like I’ve learned something new, even though I may have used the wrong approach. I suspect someone could easily manipulate the list fields and submit the form with unexpected data. Thank you.