How to show Hidden fields on review part of the form?

  • mailme.shambhavigupta
    Asked on June 27, 2024 at 7:39 AM
    b. second part of the issue/ask is that when the user mobile # match then the condition i have is that Name, Address, Mobile question is hidden ( as i already have the information). However the issue is that when the customer submits the order and reviews the order before submit, in the review section also the Name, Address & Mobile is hidden. Is there a way to address this issue that while review the form before submit the user/customer should see his Name, address & Mobile to verify.
  • Ronald JotForm Support
    Replied on June 27, 2024 at 7:41 AM

    Hello Shambhavi,

    We have forwarded this issue to our relevant team. Please give us more time to check on this.

    We really appreciate your patience and understanding while we look into this.

  • Ronald JotForm Support
    Replied on June 27, 2024 at 8:19 PM

    Hi Shambhavi,

    I created a workaround by using an extra paragraph field and injecting custom CSS into the form. Let me break it down into simple fields and explain it. It's really easy. Let me show you how:

    1. While in Form Builder, click on the Add Form Element menu on the left side of the page.

    How to show Hidden fields on review part of the form? Image 1 Screenshot 90

    2. Under the Basic tab, scroll down the list and choose the Paragraph field.
    3. Now, just drag and drop it to your form.

    How to show Hidden fields on review part of the form? Image 2 Screenshot 101

    First is we copy the Unique Name of the fields that will be hidden when a phone number is matched.

    1. Select the Name field and click the Gear Icon.
    2. Under the Advanced Tab, scroll down and copy the Unique Name.
    3. Paste the value inside the Paragraph field enclosed with curly brackets, e.g., {name}.

    How to show Hidden fields on review part of the form? Image 3 Screenshot 112

    Doing this will copy the Value of the Mobile Number fields and Name Fields into the Paragraph field. See the screencast below:

    How to show Hidden fields on review part of the form? Image 4 Screenshot 123

    Next step is to hide the Mobile Number and Name field when the phone number matched.

    1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.
    2 Click on
    Conditions in the menu on the left side of the page.
    3. Create a Show/Hide Field Condition that hide multiple fields
    4. Click the Save Button.

    How to show Hidden fields on review part of the form? Image 5 Screenshot 134

    Doing this will hide the fields on the first page and review page. Meanwhile the Paragraph field is still visible on both page. See the screencast:

    How to show Hidden fields on review part of the form? Image 6 Screenshot 145

    The last step is to hide the paragraph field on the first page so that it will only be visible on the last page. This will be done by injecting custom CSS into the form. Let me show you how: 

    1. Copy the code below: 

    /* Hide the Paragraph Fields - 16328961 */

    li#id_9 {
    display: none;
    }

    /* End code here */


    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

    How to show Hidden fields on review part of the form? Image 7 Screenshot 156

    Please note that the code to hide the Paragraph field on your form depends on the position on it. Reach out to us if you're having trouble configuring it.

    That's it. Doing this workaround will hide the mobile number and name fields on both the first page and review page, but by using a paragraph field, your users can still review their information.

    How to show Hidden fields on review part of the form? Image 8 Screenshot 167

    You can test the form I made at this link using the value of "1111" of clone it to see the configured settings.

    Reach out again if you have any other questions.

 
Your Answer