How Fake Data Handles Custom Form Elements and Unfamiliar Fields

Updated

Fake Data (fakedata.pro) handles non-standard inputs in three ways: it can be extended to recognize custom UI elements, it learns field types as you fill them and remembers them for next time, and it lets you write your own JavaScript to generate data for cases nothing else covers. This applies to web developers and testers filling forms built with material design or other UI libraries, where inputs often don't behave like plain HTML fields. If your forms are all standard HTML inputs, the built-in behavior is usually enough and you won't need the extension features.

Why standard form fillers struggle with custom elements

Modern UI libraries often replace native inputs with wrapper elements, hidden fields, or script-driven components. A filler that only looks for <input> tags will skip these or fill the wrong element. Fake Data's page states that inputs "behave less and less like standard HTML inputs" with the spread of material design and similar libraries, and that the tool can be extended to recognize and work with them.

The three mechanisms

1. Extension for custom elements

Fake Data can be extended to recognize non-standard inputs. This is the first thing to reach for when a field is visible on screen but the filler ignores it or puts data in the wrong place.

2. Learning from your usage

Fake Data learns about new fields as you use them. The next time you fill the same field, it remembers what type of data belongs there — and the page says this works "on any website." In practice, this means the first pass over a new form may need manual correction, and later passes on the same field should be more accurate.

3. Custom JavaScript

For the field that is unlike any other, you can write your own custom code and generate data the way you need. The site describes this as the escape hatch for special cases, and says support will even help with writing scripts that work with Fake Data.

How to approach an unfamiliar field

  1. Try filling first. Install the extension and fill the form once. If the field is handled correctly, the learning mechanism should remember it for next time.
  2. Check whether the field was skipped or mis-filled. If so, the input likely isn't a standard HTML element and needs extension.
  3. Extend for the element type. Use the extension capability to teach Fake Data to recognize that kind of input.
  4. Write custom JavaScript for one-off cases. If the field is genuinely unique, generate its data with your own code.
  5. Verify on a repeat pass. Refill the same form to confirm the field is now handled and that the remembered data type is correct.

Expected result: after steps 3–4, the field is filled with appropriate data; after step 5, it should be filled correctly without reconfiguration.

Common sticking points

  • First-time accuracy on new fields. Because the tool learns as you go, expect to correct unfamiliar fields once before they're remembered.
  • Custom elements that look standard. A field may render like a normal input but be built from wrapper components; if filling fails, treat it as a custom element rather than a standard one.
  • Scripts need testing. Custom JavaScript is powerful but specific to your form, so test it against the actual page before relying on it.

Free vs. paid, as stated on the site

The page lists a Free tier ("Free!"), a Pro license at €4.99 (described as "/life"), and an Ultra tier at €2.99 /month. The page does not specify which of the custom-element, learning, or scripting features are limited to paid tiers, so check the plan details before assuming a feature is included in Free. No login or account requirements are stated on the page.

Bottom line

Fake Data is built for exactly the case where forms don't use standard inputs: extend it for custom elements, let it learn repeated fields, and script the truly unique ones. Choose it if you regularly test modern UI-library forms; if your forms are plain HTML, the learning behavior alone will likely cover you.