Heading element: The header doesn't prepopulate using the Unique Name.

  • Kimberly_Hammer
    Asked on June 14, 2024 at 7:43 AM

    Link to form: https://www.jotform.com/build/240886824482063

    I use a preopulated field for my form that captures the name of the pet and then adds it to the rest of the from using {yourPets}. It works everywhere except in one sunheading where it still shows up as {yourPets} instead of filling in the name. Thoughts?


    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 20

  • Gian_D JotForm Support
    Replied on June 14, 2024 at 7:49 AM

    Hi Kimberly,

    Thanks for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

  • Gian_D JotForm Support
    Replied on June 14, 2024 at 8:41 AM

    Hi Kimberly,

    I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue. After investigating it a bit, I found that the Heading element doesn't prepopulate. As a workaround, you can use the Paragraph widget, and make it your header using CSS code. I applied the said changes to the cloned version of your form. Check out the screencast below:

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 90

    As you can see, the Paragraph widget is exactly like a Heading element, and it's prepopulating with the pet's name. You can clone my demo form to make things easier, or you can do it on your end. Let me show you how to do it:

    1. In Form Builder, click on Add Form Element on the left side of the page.

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 101

    2. Drag, and drop Paragraph widget on your form below the Heading element.

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 112

    3. Click on the Pencil icon of your Paragraph widget, and paste your header text.

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 123

    4. Customize your paragraph text, and once done, click on the Checkmark icon of the Paragraph widget.

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 134

    5. Delete your existing heading text.

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 145

    Now, let's modify it using CSS code:

    1. Click on the Paint Roller icon on the upper right side of the page.

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 156

    2. Click on the Styles tab, and paste the CSS code below to Inject Custom CSS field.

    /*To move the paragraph upward*/
    #id_99 {top: -1.7in;}
    /*Ends here*/

    Heading element: The header doesnt prepopulate using the Unique Name Screenshot 167

    That's it. Let us know if you have any other questions.

 
Your Answer