Skip to content
RTILA Web Business Automation
  • Home
  • Features
  • Pricing
  • Marketplace
  • Docs
  • Support

Cart & Checkout Icon

RTILA Web Business Automation
  • Home
  • Features
  • Pricing
  • Marketplace
  • Docs
  • Support
Free Download
Free Download
Popular Search chatgptdownloadapivariablepro

Billing & Licensing

  • Change License’s registered email address
  • Upgrade a License
  • Manage License Activation Count
  • Reset RTILA Studio local database
  • Standalone Exe Antivirus False Positive Alert
  • Team Member Activation URL & License
  • AppSumo Codes Redemption
  • Download & Activate RTILA Studio
  • AppSumo Code Stacking & Upgrade
  • Mac OS Installation Warning

How-To & Tutorials

  • Public Templates
  • How to target a CSS element
  • Change default Browser
  • Export Results to a CSV file
  • Profile Session Feature
  • License Check for Standalone Executables
  • OCR Feature: read text from images
  • Auto Download Pinterest Images
  • Save current URL using JavaScript
  • Search & Filter Projects
  • Run Automations in Silent Mode (no browser opening)
  • Correcting & Completing Auto-Recorder Commands
  • RTILA WordPress Plugin installation & configuration
  • Using Developer Tools In RTILA Studio
  • Create A Project From Scratch
  • Bring back disappearing commands & properties
  • RTILA Cloud API documentation
  • Export & share an RTILA project file
  • Install Browser Extensions using Profile Session
  • How To Fill a Form Using Generic Form Filler Child-Project
  • Project Settings: Import URLs manual entry, From File, From Project, and Read XML Sitemap
  • Project Settings: Import URLs manual entry
  • Use Local Storage Variable to scrape Do-follow Links
  • Schedule Launch of Automations
  • Email Results File via Gmail
  • Read from Google Sheets & Post on WordPress
  • Website Load Testing Automation
  • Read data from a txt or csv file
  • Downloading files
  • Open in a New tab
  • Using filters to complete a URL
  • Choosing the right collection
  • Set a Counter with JavaScript
  • Setup re-Captcha Resolution
  • Woo Categories & ChatGPT API
  • Login to Google Account & share profile session
  • Google Search Baby Steps
  • Auto-Recorder as a 1st step
  • Standalone Executable Bots

Technical Documentation

  • Custom Commands
  • Integrations
  • RPA & Desktop OS Commands
  • Add And Configure Dataset Properties
  • Inspection Panel Interface & Elements
  • Config & binaries files for Standalone
  • Focus On Element Command
  • Go To Url Command
  • Scroll Element Command
  • Execute JavaScript Code command
  • Reload Page Command
  • Compare Variables Condition
  • Take Screenshot Command
  • Smart Variable (ChatGPT API)
  • Child Projects
  • Confirm (Dialog Box) Command
  • Populate Text Field Command
  • Hover Mouse On Element Command
  • Download Page Command
  • Stop Automation Command
  • Log Message Command
  • Input (prompt box) Variable
  • Extract Results Command
  • Wait for Element to Appear Command
  • Selector (DOM element)
  • Check Radio Input Command
  • Dynamic Variable (JavaScript Code)
  • Static Variables
  • Set Checkbox State Command
  • Set Dropdown Value Command
  • Press a Keyboard Key Command
  • Upload File Command
  • Double Click On An Element Event
  • Click On An Element Event
  • Switch Browser Identity Command
  • Slack Notification Command
  • Save as Pdf Command
  • Go Back To Previous Page Command
  • Go Forward To Next Page Command
  • Proxies Built-In Rotation
  • External Proxy Rotation API
  • Regular Expressions
  • Ejecute JavaScript (Global)
  • Mock Location Command
  • Close Page Command
  • Desktop Notification Command
  • Command Folder
  • Clear Cookie Command
  • Change Page Size Command
  • Break Loop Command
  • DataSet Types
  • Automation Commands Panel
  • Crawler Commands
  • Alert Message Command
  • Wait Commands
  • Home
  • Docs
  • How-To & Tutorials
  • How To Fill a Form Using Generic Form Filler Child-Project

How To Fill a Form Using Generic Form Filler Child-Project

Table of Contents
  • Use Case
  • How To Use Form Filler Child-Projects
  • Input Field Smart CSS Selector
    • Smart CSS Selector Example For Common "First Name" Input Field
    • Exclude Certain Tags and Attribute from CSS Selector
  • Form-Filler Template In Action

Use Case #

Using a Generic form filler from a child project is the idea of using a preconfigured form filler that takes common CSS input field selectors. These form fillers are meant to work with most site forms that have similar input field attributes or tags, so the approach is to use CSS locators that can include the different tags/attributes that an input field may have. Just like most forms have a “First Name “, a “Last Name “, and an “Email” input field, these input fields mostly contain the same attributes in many different forms. Therefore, This would act like using a ” Smart” CSS field identification CSS locator.

How To Use Form Filler Child-Projects #

In order to use these form templates, you can enable the child project feature from the project settings. Once you have enabled it, you can call the form filler child project template and use its preconfigured commands with preconfigured values without having to create each input command with the same values repeatedly.

You can see the commands we have imported from the form filler child project and how they were used to fill the input fields of the form as if we created these commands from scratch and specifically for the shown form. This shows how easy it could get using these form fillers could be and how it could save some time in creating such commands that could easily be imported using these templates

Input Field Smart CSS Selector #

As mentioned earlier, the approach to making the preconfigured form-filler templates is to choose an input field CSS selector that contains different tags and attributes, this CSS locator would have multiple and slightly different tags CSS selector combined, then when a form input field is found with one of CSS locators that is similar to the preconfigured input field with “Smart” CSS selectors, that input field would be selected automatically and the preconfigured value would be inputted to that form input field. This is a very helpful technique that can help you set a ” Form-fillers” template on your own for forms that you constantly work with, so you won’t have to manually enter each data repeatedly.

Smart CSS Selector Example For Common “First Name” Input Field #

Here is an example of creating a smart CSS selector for the commonly encountered “First Name” input field. As you can see in this CSS selector there are multiple different CSS locators with slightly different attributes and tags separated by a comma, these different CSS locators can include the ones used in many website forms with the ” First Name “input field.

Copy CodeCopiedUse a different Browser
input[type="text"][id*="name" i], input[type="text"][placeholder*="name" i], input[type="text"][class*="name" i], input[type="text"][name*="name" i], input[type="text"][aria-label*="name" i]

Here is a detailed explanation of the previous CSS selector :

This CSS selector targets all input elements of type=”text” that have certain attributes that contain the string “name” in a case-insensitive manner. Specifically, it targets input elements that meet any of the following conditions:

  • id attribute contains the string “name”
  • placeholder attribute contains the string “name”
  • the class attribute contains the string “name”
  • the name attribute contains the string “name”
  • the aria-label attribute contains the string “name”

The *= selector checks for the presence of the specified string in any part of the attribute value. The “I” flag at the end of each attribute selector indicates that the search should not be case-insensitive, meaning that it will match strings regardless of whether they use uppercase or lowercase letters.

So, the entire selector targets any element with a <type> attribute of text that has an “id”, “placeholder”, “class”, “name”, or “aria-label” containing the substring “name”.

Exclude Certain Tags and Attribute from CSS Selector #

In some cases, we might need to tell the CSS selector to exclude some tags and words from a certain input field, this can be done by using this format “: not([attribute=what-i-do-not-want-to-target])”. This is helpful to ignore the input field with such tags and attributes and give the CSS selector a better chance of finding the correct element.

Here is an example of using the “Description” input field smart CSS selector and setting it to exclude some tags and attributes as explained after the code snippet

Copy CodeCopiedUse a different Browser
input[type="text"]:not(textarea):not([id*="name" i]):not([placeholder*="name" i]):not([class*="name" i]):not([name*="name" i]):not([aria-label*="name" i]):not([type="email"]), input[inputmode="text"]:not([id*="name" i]):not([placeholder*="name" i]):not([class*="name" i]):not([name*="name" i]):not([aria-label*="name" i]):not([type="email"])

This CSS selector targets all elements with a <type> attribute set to “text” or an ‘input mode ‘ attribute set to “text”, except for those that are elements or have an ‘id’, ‘placeholder’, ‘class’, ‘name’, ‘aria-label’, or <type> attribute containing the string “name” or have a type attribute set to “email”.

  • The input[type=”text”] and input[inputmode=”text”] selectors target <input> elements with type=”text” and inputmode=”text”, respectively.
  • The ‘: not(textarea)’ selector excludes <textarea> elements from the selection
  • The ‘: not([id*=” name” i])’, ‘: not([placeholder*=” name” i])’, ‘: not([class*=” name” i])’,’: not([name*=” name” i])’,’: not([aria-label*=”name” i])’, and ‘: not([type=”email”])’ selectors exclude elements that have an ‘id’, ‘placeholder,’ ‘class’, ‘name’, ‘aria-label’, or <type >attribute containing the string “name” or have a type attribute set to “email”.
  • The ‘*=’ selector matches any part of the attribute value, while the ‘I’ flag makes the match not case-insensitive. The ‘: not()’ selector excludes elements that match the given selector.

Form-Filler Template In Action #

Here is an example of a form-filler template used in a form web page to fill the input field using the preconfigured command with the ‘smart’ CSS selector for each input field, you can see how the CSS selector works and selected the right input field and inputs the value that has been added to the commands in the form-filler child project template.

What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on 17-Apr-23
Install Browser Extensions using Profile SessionProject Settings: Import URLs manual entry, From File, From Project, and Read XML Sitemap

Powered by BetterDocs

Leave a Reply Cancel reply

You must be logged in to post a comment.

Table of Contents
  • Use Case
  • How To Use Form Filler Child-Projects
  • Input Field Smart CSS Selector
    • Smart CSS Selector Example For Common "First Name" Input Field
    • Exclude Certain Tags and Attribute from CSS Selector
  • Form-Filler Template In Action

RTILA CORPORATION

Suite 20C Trolley Square.
Wilmington, 19806 DE, USA.

Support

  • Documentation
  • Videos & Media
  • Support Tickets

Company

  • Cookie Policy
  • Privacy Policy
  • License Agreement
  • Payments & Refunds

Copyright © RTILA CORPORATION

Facebook GroupYouTube