Advertisement
  1. Code
  2. Coding Fundamentals
  3. Workflow

How to Automate Repetitive Browser Form Actions

Scroll to top
Read Time: 8 min

In today's busy world, anything that can save you time, sanity, and keystrokes, while adding accuracy, and consistency is a big win.

In this tutorial I'll show you how to employ Keyboard Maestro to automate away repetitive browser actions. I'll cover 

  • altering form fields like dropdown menu values
  • entering pre-written text snippets
  • adding conditional logic with text parsing for checking accuracy
  • automatic form submission. 

This will aid you in completing mind-numbing tasks in just a few keystrokes.

As a practical example, I'll manipulate forms on a website called Help Scout. You can easily apply these examples to browser forms in almost any web application to save you time.

Manipulating Form Data and Submitting Forms

This example demonstrates how typing just a few characters, as a trigger, allows you to change the value of a drop down field and then activate the form's submit button.

The first thing you need to do is start Keyboard Maestro, select the Safari Macros group, click the + to add a new macro, and give it a name. Name the example macro helpscout send + set pending.

Creating a macroCreating a macroCreating a macro
Creating a macro

Now add a trigger for your newly created macro. Choose Typed String Trigger here.

Setting a new triggerSetting a new triggerSetting a new trigger
Setting a new trigger

The next step is to set a typed string that will stick in your head and is unique. Use a trigger sequence plus a mnemonic for any of your triggers. 

For this trigger enter the following value for a typed string: ,,hsp The double comma is the trigger sequence (it's highly unlikely you'll type that for anything else) and the mnemonic is Help Scout Send Pending.

Entering a typed triggerEntering a typed triggerEntering a typed trigger
Entering a typed trigger

You'll use Safari's built in developer tools to identify some form field names and values, and use Keyboard Maestro to set them when you activate the trigger you just set up.

The first step is to secondary-click the form field you wish to alter and select Inspect Element.

Inspecting dropdown elementInspecting dropdown elementInspecting dropdown element
Inspecting dropdown element

Now drill down and see the option values available. 

Note in the example how the field label status is in the inspect window on the line that reads <label for="status">Status:</label>. The value you're after is highlighted <option value="2">Pending</option>

Now you know what value to set your drop down form field to in Keyboard Maestro.

Finding the form valueFinding the form valueFinding the form value
Finding the form value

Now you need to add another Safari action like you did earlier. This time you're going to pick Set Safari Field to Text.

Set Safari field to textSet Safari field to textSet Safari field to text
Set Safari field to text

Next click the word Safari just below the Try button and pick the field identified earlier, document.forms["tkReplyForm"]["status"].

Select Safari fieldSelect Safari fieldSelect Safari field
Select Safari field

Then set the field to the value you found earlier, 2.

Set Safari field valueSet Safari field valueSet Safari field value
Set Safari field value

You've now completed the steps necessary to change the value of the form field to select the desired choice. Next is to activate the submit button. 

Secondary-click on the desired submit button and find the Button ID that goes with it, so you can tell Keyboard Maestro to do something with it. In the example you're looking for the button text Send Reply

Note that the ID is sendBtn.

Inspect Safari buttonInspect Safari buttonInspect Safari button
Inspect Safari button

Add another Safari Control called Focus Safari Field. Once again click the word Safari below the Try button to find the field you just identified in the previous step. 

In the example it is document.forms["tkReplyForm"]["sendBtn"].

Focus Safari form buttonFocus Safari form buttonFocus Safari form button
Focus Safari form button

Now that the button has focus, you can activate it by emulating the pressing of the return key. 

Add an action, but this time click on All Actions and in the search field type keystroke. Type a Keystroke is the action you need. 

Once that is added, choose the keystroke Return from the dropdown to simulate it.

Add return keystrokeAdd return keystrokeAdd return keystroke
Add return keystroke

The action is now ready to use. Here is a screenshot of me emailing myself within Help Scout, to see the example in action. You should do the same type of test in your example now.

Example form before macro is runExample form before macro is runExample form before macro is run
Example form before macro is run

Note here how I've typed out ,,hs and am about to complete the trigger sequence by pressing p.

Example form executing macroExample form executing macroExample form executing macro
Example form, executing macro

…and voila, the status has been changed to pending and the form submitted.

Example form macro execution completeExample form macro execution completeExample form macro execution complete
Example form, macro execution complete

Automatic Text Entry and Verification

In the second example I'll show you how to automatically insert prewritten text snippets, verify it is a correct entry before submission, and throw a visual exception if it wasn't. This means you can manually intervene before the form is submitted. I'll continue in the context of the Help Scout web interface for consistency across examples.

The first step is to add a typed string trigger. As before, start the trigger with ,, and then add htv for the mnemonic Help Scout text verification.

Create text triggerCreate text triggerCreate text trigger
Create text trigger

Inspect the text field where the text snippet is to be inserted. You're looking for the section the reply field is in, so you can use it in the next step.

Inspect text entry fieldInspect text entry fieldInspect text entry field
Inspect text entry field

Add a Select Safari Field action. This will work the same as the previous example.

Click Safari right beneath the Try button and choose the field that represents what you found in the previous inspection step.

In this case it's forms["tkReplyForm"]["reply"] (textarea).

Select Safari text fieldSelect Safari text fieldSelect Safari text field
Select Safari text field

Then add an action under Text called Insert Text. For the example use some lorem ipsum text.

Creating text snippetCreating text snippetCreating text snippet
Creating text snippet

Return to the previous example in a time saving maneuver and use Command-Primary Click select the previous actions you used to set your form to a pending status and submit it automatically; followed by Command-C to copy the actions to the clipboard.

Copy previous workflow actionsCopy previous workflow actionsCopy previous workflow actions
Copy previous workflow actions

Next add in an action from the Control Flow section called If Then Else. Once that is added use Command-V to paste the actions you just copied as the actions to execute if the condition—yet to be set—is met.

Add If Then ElseAdd If Then ElseAdd If Then Else
Adding If Then Else logic

Check the form field for the existence of the text snippet that was supposed to be entered automatically. 

To do this set The text: to forms["tkReplyForm"]["reply"] (textarea).

Setting field to checkSetting field to checkSetting field to check
Setting field to check

You need to enter a part of the snippet to use for verification that the text inserted correctly. Since your snippet is lorem ipsum text, use the words sit amet for your check.

Setting text to check in fieldSetting text to check in fieldSetting text to check in field
Setting text to check in field

In the otherwise execute the following actions: section you need to add an alert. 

To locate this quickly, look under All Actions and then choose Alert. Give the alert a title of Text failed to automatically paste… and a comment of Please manually retype in the rely field and then click the submit or send button.

This will define what the alert box will look like and display when an error occurs.

Add an alertAdd an alertAdd an alert
Add an alert

It's time for a test! Press reply and type the trigger ,,htv.

Testing text verificationTesting text verificationTesting text verification
Testing text verification

It worked but an error still popped up. This is actually a good verification that the alert is working. 

The problem is actually what can be called a race condition. The check is executed so quickly that it happens before the text is recognized as pasted into the text field. This needs to be fixed.

Macro alert messageMacro alert messageMacro alert message
Macro alert message

Luckily Keyboard Maestro has so many awesome tricks up it's sleeve there is a mechanism for this. Just above the conditional logic add an the action Pause, and set a value of 0.5 seconds. Now the text will be entered correctly like it was before, but you'll only get the alert if there is an error and the text is not actually input.

Adding pause statementAdding pause statementAdding pause statement
Adding pause statement

Create and Use Quick Throw-Away Macros

Many people get hung up on the idea of building a permanent library of Keyboard Maestro macros to save time. A commonly overlooked and powerful thing you can do is make small temporary macros that you may only use for a couple hours or days.

One example that is pretty similar to the first example is a macro that quickly closes any message that is not set to a closed status. With this example a hotkey has been set to activate the macro when it is pressed. 

The hotkey combo for this temporary macro is set to Control-Option-Shift-Command-C ^⌥⇧⌘C (all modifier keys and C). When the hotkey combo is press, the macro does the following:

  • Activates a keyboard shortcut R which opens the Help Scout message so it can be replied to or otherwise acted on
  • Changes the status field to closed
  • Submits the form
Temporary macro exampleTemporary macro exampleTemporary macro example
Temporary macro example

Use your skills so far to created this short macro yourself and then take it for a spin. Here's the message from the previous example, only I've marked it active again. Control-Option-Shift-Command-C  ^⌥⇧⌘C is pressed.

Active message before temporary macro is runActive message before temporary macro is runActive message before temporary macro is run
Active message before temporary macro is run

Success. The macro opened the conversation, changed the status, and closed it with one keyboard shortcut.

Closed message after macro is runClosed message after macro is runClosed message after macro is run
Closed message after macro is run

Conclusion

Keyboard Maestro is a very powerful tool. While this tutorial digs a little deeper than beginner macros, you've just begun to scratch the surface of what you can concoct. You now know enough to inspect form fields and buttons, manipulate them using typed triggers and assigned keyboard shortcuts. You are also armed with the knowledge of how to construct safety checks in your macros to ensure a form is in the state you desire before submitting or otherwise acting on it.

Let me know what time saving macros you end up building from studying the examples I've walked you through in this tutorial by leaving a comment below.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.