How to Pick the Right CSS Selector in FillyForm

Let’s be honest: figuring out your CSS selector can be confusing if you’re new to it. But it’s crucial if you want FillyForm to appear in the correct spot. Below, you’ll find a quick explanation of what CSS selectors are, why they matter, and how to choose the right one.

First, What’s a CSS Selector?

A CSS selector is just a piece of code that points to a specific element on your web page. When FillyForm “knows” your selector, it knows exactly which field to attach its inline helper to. Without the right selector, FillyForm either won’t show up at all—or it’ll show up in the wrong place.

Why It Matters

If you pick the wrong selector, users won’t see those handy AI prompts that make form-filling a breeze. And if your selector’s too broad, FillyForm might attach itself to multiple fields you never intended. Either scenario can lead to chaos (and fewer completed forms).

Finding Your Selector

1. Inspect the Form Field: Right-click your form field in Chrome or Firefox and choose “Inspect.” 
2. Look at the HTML: Let’s say you see <input type="text" id="demo-ad-script" />. 
3. Grab the ID: In this case, id="demo-ad-script", so your selector is #demo-ad-script. 
4. Paste It into FillyForm: Go to the FillyForm dashboard, select your field, and drop #demo-ad-script into the “Field CSS selector” box.

That’s it. Now FillyForm knows exactly where to attach its inline helper.

Quick Tips

• Use an ID if possible. It’s usually unique, so FillyForm won’t accidentally appear in multiple places. 
• Avoid Vague Selectors like input[type="text"], unless you truly want FillyForm on every text field. 
• Check for Typos. Even a tiny mistake like #demo-add-script instead of #demo-ad-script can break everything.

Example: Audio Ad Script Field

Imagine you have a field called “Audio ad script generator.” If the HTML has <input id="demo-ad-script" />, just use #demo-ad-script in FillyForm’s CSS selector setting. Done. Now FillyForm pops up exactly where you want it.

Final Note

Think of your CSS selector as a street address. If you give the wrong address, your mail never shows up. Give the right address, and your FillyForm prompts slide in perfectly, boosting completion rates and making your life easier.

If you still need help, don’t hesitate to reach out to our support team. We’re here to make sure your forms run smoothly—without all the guesswork.