I have been using your form builder and noticed that autofill works for the email field and other fields when they are in English. However, it does not seem to work when I use Dutch for fields like “first name” and “last name”. I’ve attached screenshots that demonstrate this behavior.
Could you assist in ensuring that autofill works correctly for Dutch fields as well? Any help or guidance would be much appreciated.
Thank you!
Hi Max,
There are several, but one example is Repair V2 B2B with Field ID: [voornaam:]. When I change the Field ID to Name, it does work.
Thanks in advance for your help!
Thanks! Could you please specify where this popup window comes from? Is it a part of a specific app or browser extension on your desktop?
Hey Max,
No, it’s not a separate extension. In this case, it’s just a built-in feature in Chrome. Most modern browsers (like Chrome, Firefox, Safari, etc.) now have something called “autofill.” It automatically fills in things like name, address, email, and phone number on forms, based on what you’ve entered before or saved in your browser settings.
Got it, thanks!
Our devs will create a custom script that will fix this issue. Could you just specify the names of other widgets with this issue?
Hi Max,
It’s about Repair V2 B2B and Purchase V2. I already have a few custom scripts running on these widgets and they’re getting quite complex. Do you think this could cause any issues? Otherwise, this option isn’t that important.
Got it, thanks!
Worry not - our devs will combine the new script with the existing one and everything will work fine 
I’ll update you once the solution is ready!
Hi @user8320 
We’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:
const TARGET_FIELDS = [
{ label: 'Voornaam:', autocomplete: 'given-name', type: 'text' },
{ label: 'Tussenvoegsel:', autocomplete: 'additional-name', type: 'text' },
{ label: 'Achternaam:', autocomplete: 'family-name', type: 'text' },
{ label: 'E-mailadres:', autocomplete: 'email', type: 'email' },
{ label: 'Bevestig e-mailadres:', autocomplete: 'email', type: 'email' },
{ label: 'Telefoonnummer:', autocomplete: 'tel', type: 'tel' },
{ label: 'Straatnaam:', autocomplete: 'street-address', type: 'text' },
{ label: 'Huisnummer:', autocomplete: 'address-line2', type: 'text' },
{ label: 'Postcode:', autocomplete: 'postal-code', type: 'text' },
{ label: 'Plaatsnaam:', autocomplete: 'address-level2', type: 'text' }
];
function listener(selector, callback) {
const firstTarget = document.querySelector(selector);
if (firstTarget) {
return callback(firstTarget);
}
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
setTimeout(() => {
callback(targetNode);
}, 300);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function handleUpdateFields(container) {
TARGET_FIELDS.forEach(({ label, type, autocomplete }) => {
const input = container.querySelector(`input[aria-label*="${label}"]`);
if (input) {
input.setAttribute('autocomplete', autocomplete);
input.setAttribute('type', type);
}
});
}
listener('[class*="FieldsGrid__Grid-sc"]', (container) => {
handleUpdateFields(container);
const mutationObserver = new MutationObserver(() => {
handleUpdateFields(container);
});
mutationObserver.observe(container, { childList: true });
});
Please check your widgets and let me know how they work now
Hi Max,
I had to make a small adjustment to the script because I’ve made a lot of changes recently, and the widget is now “Reparatie V3.”
It seems to be working partially, but the field “Telefoonnummer” is not working yet.
See below for my adjustments.
const TARGET_FIELDS = [
{ label: ‘Voornaam’, autocomplete: ‘given-name’, type: ‘text’ },
{ label: ‘Achternaam’, autocomplete: ‘family-name’, type: ‘text’ },
{ label: ‘e-mailadres’, autocomplete: ‘email’, type: ‘email’ },
{ label: ‘Telefoonnummer’, autocomplete: ‘tel’, type: ‘tel’ },
{ label: ‘Straatnaam’, autocomplete: ‘street-address’, type: ‘text’ },
{ label: ‘Huisnummer’, autocomplete: ‘address-line2’, type: ‘text’ },
{ label: ‘Postcode’, autocomplete: ‘postal-code’, type: ‘text’ },
{ label: ‘Plaatsnaam’, autocomplete: ‘address-level2’, type: ‘text’ }
];
function listener(selector, callback) {
const firstTarget = document.querySelector(selector);
if (firstTarget) {
return callback(firstTarget);
}
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
setTimeout(() => {
callback(targetNode);
}, 300);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function handleUpdateFields(container) {
TARGET_FIELDS.forEach(({ label, type, autocomplete }) => {
const input = container.querySelector(input[aria-label*="${label}"]);
if (input) {
input.setAttribute(‘autocomplete’, autocomplete);
input.setAttribute(‘type’, type);
}
});
}
listener(‘[class*=“FieldsGrid__Grid-sc”]’, (container) => {
handleUpdateFields(container);
const mutationObserver = new MutationObserver(() => {
handleUpdateFields(container);
});
mutationObserver.observe(container, { childList: true });
});
Our devs will double-check the code. I’ll get back to you once I have their response
We’ve slightly adjusted the script and now it should be working great:
const TARGET_FIELDS = [
{ label: 'Voornaam', autocomplete: 'given-name', type: 'text' },
{ label: 'Achternaam', autocomplete: 'family-name', type: 'text' },
{ label: 'e-mailadres', autocomplete: 'email', type: 'email' },
{ label: 'Telefoonnummer', autocomplete: 'tel', type: 'tel' },
{ label: 'Straatnaam', autocomplete: 'street-address', type: 'text' },
{ label: 'Huisnummer', autocomplete: 'address-line2', type: 'text' },
{ label: 'Postcode', autocomplete: 'postal-code', type: 'text' },
{ label: 'Plaatsnaam', autocomplete: 'address-level2', type: 'text' }
];
function listener(selector, callback) {
const firstTarget = document.querySelector(selector);
if (firstTarget) {
return callback(firstTarget);
}
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
setTimeout(() => {
callback(targetNode);
}, 300);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function handleUpdateFields(container) {
TARGET_FIELDS.forEach(({ label, type, autocomplete }) => {
const input =
container.querySelector(`input[aria-label*="${label}"]`) ||
container.querySelector(`input[placeholder*="${label}"]`);
if (input) {
input.setAttribute('autocomplete', autocomplete);
input.setAttribute('type', type);
}
});
}
listener('[class*="FieldsGrid__Grid-sc"]', (container) => {
handleUpdateFields(container);
const mutationObserver = new MutationObserver(() => {
handleUpdateFields(container);
});
mutationObserver.observe(container, { childList: true });
});
Could you please check it?
Hi Max,
This seems to be working. Once again, many thanks. I truly appreciate how you handle such individual requests.
Thanks again.
It’s my pleasure 