Contact Form with Custom fields

I am facing similar issue mentioned in the community post https://develop.zendesk.com/hc/en-us/community/posts/1260803684709-Custom-fields-in-the-Contact-form-pop-up-dont-show

I want show the custom fields in the Web Widget contactForm, but it is not working. I have added multiple custom fields in the Zendesk Admin Portal. But, when I add those Field IDs in Web Widget it does not load the custom fields (Even if I had enabled it from the Zendesk Admin Portal)

here is the example what I am trying after inserting the script "snippet.js"

<script type="text/javascript">
   window.zESettings = {
      webWidget: {
         contactForm: {
            subject: true,
            attachments: false,
            fields: [
               { id: 'description', prefill: { '*': 'Description here' } },
               { id: 'subject', prefill: { '*': 'Subject here' } },
               { id: 81541168, prefill: { '*': 'My custom field text' } }
            ]
         }
      }
   };
</script>

id 81541168 is my custom field ID which is active and enabled in Custom Form Fields option

Also, if I want to redesign the whole form with my custom fields (disabling the default fields that are available), then how can I do this?

Please guide.