Often when you put an application form your website, a section with hidden fields must be populated automatically. In this section fields like UTM Source, UTM medium and Google Analytics Client ID will likely be added as hidden fields.
How to prefill hidden fields
When you use the Application Form widget, Shadow DOM is used to insert the application form into the page on your website.
To prefill fields (Input elements) on this form, you need to use the right syntax that works correctly with Shadow DOM.
The right syntax for input fields is:
<script> function prefillWhenLoaded() { const forms = document.getElementsByTagName('byner-application-form'); if (forms.length === 0) { return setTimeout(prefillWhenLoaded, 500); } const fields = forms[0].shadowRoot.querySelectorAll('lightning-input, lightning-textarea'); if (fields.length === 0) { return setTimeout(prefillWhenLoaded, 500); } fields.forEach(field => { if (field.classList.contains('byner__UTM_Source__c')) { field.value = 'mySource' } if (field.classList.contains('byner__UTM_Campaign__c')) { field.value = 'myCampaign' } if (field.classList.contains('byner__UTM_Medium__c')) { field.value = 'myMedium' } if (field.classList.contains('byner__UTM_Term__c')) { field.value = 'myTerm' } if (field.classList.contains('byner__UTM_Content__c')) { field.value = 'myContent' } if (field.classList.contains('byner__UTM_Id__c')) { field.value = 'myId' } }); }; prefillWhenLoaded(); </script>
How to redirect the user
It is also possible to add logic to handle the "Saved" event:
$Lightning.use( 'byner:ApplicationFormApp', function () { $Lightning.createComponent( 'byner:applicationForm', { formId: 'a0T09000002HljpEAC', jobId: 'a1Q090000005TmkEAE', siteUrl: 'https://byner-trial-1773e277830.secure.force.com/' }, 'lightningLocator', function (component, status, errorMessage) { let bynerform = document.getElementsByTagName('byner-application-form')[0]; bynerform.addEventListener('saved', function (event) { document.location = 'https://customerwebsite.nl/application-form-saved'; }, false); } ); }, 'https://byner-trial-1773e277830.secure.force.com/' );
In the above example an eventListener is added to the form. When the form is saved, the user is redirected to the "https://customerwebsite.nl/application-form-saved" url.
Related articles
You can also check out the following articles related to Application Form:
Comments
0 comments
Please sign in to leave a comment.