Filling In a Web Page Form Using Automator

You can use JavaScript in Automator to fill in a web page form. If you make this a Quick Action you can access it from the menu bar or as a keyboard shortcut. This can help speed up situations where you need to fill in the same form every day.

You can also watch this video at YouTube (but with ads).

Video Transcript: Hi this is Gary with MacMost.com. Let me show you how you can fill in a web form using Automator.
MacMost is brought to you thanks to a great group of supporters. Go to MacMost.com/patreon. There you can read more about it. Join us and get exclusive content.
So let's say that you have a form like this and you need to it in pretty often. You can type it all in or copy and paste. It's a bit of a pain and you can use Autofill for some things but not other fields. So it's nice to have a script that actually did it all for you. We can do it in the ScriptEditor or we can do it in Automator. I'm going to do it in Automator because I want to be able to use a Quick Action.
So in Automator I'm going to create a new Quick Action. I'm going to set it to be Receives No Input and do that only in Safari. Then I'm going to Search for JavaScript over here and drag the Run JavaScript action in there. This is where the script goes. I want to do some basic stuff here. First I want to define Safari as an Application and let me script it. So these are the two lines of code here that you need for that. It's pretty standard. Anytime you do JavaScript in Automator you're going to have to do a declaration of variable for the application, say equals that application. Then turn on includes Standard Additions so you can script it.
Now I'm going to feed into Safari some JavaScript. It gets confusing because I'm using JavaScript here in Automator. But I'm also going to be using JavaScript in Safari. There's two different JavaScripts. The Automator JavaScript and the Safari JavaScript. Some I'm going to create a string, a piece of text, that's the Safari JavaScript and I'm going to feed that into Safari. 
So before I do that I want to go to Safari here and I want to take a look at the code for this form. So I can do that a number of different ways. First I want to get the Develop Menu turned on. In Safari under Preferences, Advanced, you want to make sure you have Show Develop Menu in the Menu Bar. Now with Develop on I can look at the field here. I could actually click in it and if I Control click in it there's Inspect Element. It will bring up the Element Inspector here and I see the html code. I could see exactly that that is an input and the name equals, and there's the name. Sometimes it will be a name and sometimes it will be an ID so you have to pay attention to which one you've got. ID's are best but a lot of times in forms all you have are names.
So there's first name. I can also see the rest of this form clearly. The last name, zip code, this text area is named bodytext, and the form itself has an ID called testform. So you want to note all of that. It's going to complex if it's somebody else's webpage. There might be a ton of stuff here and it might be hard to find.
Now I want to build this JavaScript script here. I'm going to create another variable called jsScript. Just my name and I'm going to set that equal to a blank string just to start off with. That way I can create things like this. I can say jsScript and += and include a string there with a command in there and put one command per line. Otherwise it's going to look very unwieldily having this really long single line of code. So let me add the first line here. 
This is what it looks like. document.getElementsByName then the name then a bracket. Why a bracket? Because there could be more than one element with that name. Hopefully the page is coded well and there is only one element with that name. But we want to go and say get the first element out of that list. If it was an ID and not a name we would do getElementBy ID and you would need the zero here because there would only be one of those. But we're going to do getElementsByName there and there's the value, dot value, and we're going to set that equal to then using singe quotes, notice I do single quotes around here and single quotes here. That's because I'm using double quotes on the outside.
So this is the JavaScript for Safari script here. That's why I have two semi colons. One closes out the Safari JavaScript. The other closes out this whole line in Automator. Now to have this execute I'm going to use Do JavaScript. So I do Safari dot doJavaScript and then I pass in that string. This script here. Then I have to include this thing in curly brackets. The word in:safari.windows zero, so the frontmost window and the currentTab of that frontmost window. So you want to make sure when you run this, of course,  that the form is on the current tab of the current window.
Now before we get that working we're going to have to go into Safari here and under Develop Menu there is Allow JavaScript from Apple Events. You have to turn that on else this won't work. So now let's run this. We can test it out by using the Run command here. When we do it we see it actually puts that letter in here. So now we can go and add more lines. 
I'm going to Copy and Paste this line four times. I'm going to change each one of these. So there's my code there Four lines of JavaScript and you can see now how it's easier to put these on four lines with the += than to try to string all this together. It would look very jumbled. So let's run it now and you can see it puts all of that in there.
Now all we need to do is submit the form. Do that with a line that looks like this. So, document.forms and then the first form, submit. We knew there was an ID for the form so we could have said, getElementByID instead of this but since it's the only form on the page it was easier to use this. Sometimes forms don't even have a name or ID. So actually knowing that this is the first form on the page allows us to do this. So we can then Submit. Now this will fill in those four blanks and Submit. Let's test it out. You can see it submitted and here's the result of the submission. Just kind of mirrors back the information to you.
So let's Save this out now. I'll save it out as Fill In Test Form. It's a QuickAction so it should appear now in Safari. So let's take a look in Safari here. I'm going to Refresh the page so everything is blank. I can look in Safari under Services and there's Fill In Test Form. When I select that it's going to fill everything in and submit the form. Nice.
So here I am at the National Weather Service page and when I go to this page I have to enter a zip code here and then hit Go. We can do the same thing here. I can Control click on this field and say Inspect Element. It will jump in here and show me that this input has an ID, which is great, called Input String. Also we can look pretty easily and see the form also has an ID, getForecast, with a capital F in there. So I can make a script that looks like this. You can see it starts off the same way but my JavaScript lines for Safari are different. I'm going to use getElementByID, input string, and I'm going to set the value equal to a zip code. Then I'm going to use getElementByID and use the form name, getForecast, with that capital F and Submit. Now I can save that out. I'll have it workload receives nothing in Safari. I'll say Get Weather Form and I'll hit Save. 
Now I can go here and I can be at this page and under Safari, Services, Get Weather Form and it's going to fill in that zip code and it jumps to the correct page. What will make it even better is if it went to the webpage and then entered this in. So I could start off on a blank page or somewhere else and it will go to the page first. So the trick is, though, if you do that here in JavaScript then it's going to go to the page and if the page wouldn't have been loaded yet when it is trying to execute the form. So what we're going to do is use Automator and just do it all in Automator and have it wait. 
So I can Search for an URL here. So I can get specified URL's here. Then ask to enter in a URL. So I'll put Weather.gov in there and then I have to do Display WebPages. So it will get those addresses, just one, and display it. Now it will still be too fast sometimes. Sometimes it'll work. But usually it doesn't display the page quickly enough and then this JavaScript tries to run before the page is there. So we're going to look for wait and now, depending upon speed and things like that, you might have to do more or less. I'm going to do Wait for one second. So now I can Save this All. The Get Weather Form will now get this URL, play it, pause for a second, then fill the form in and Submit.
So let's go to Safari here. I'm on a blank page and do Safari, Service, Get Weather Form. You can see it goes to the National Weather Service and then after a second fills in the form. Submit it and now I have my local weather.
Anytime you're doing things like this it gets really tricky. Some code on some webpages is going to be really complex and hard to figure out exactly the fields to fill in. There's going to be scripting on the page that may get in the way of your scripting as well. I'll include all the code on the webpage for this post at MacMost.com.

Here is the sample code:

var safari = Application("Safari");
safari.includeStandardAdditions = true;
var jsScript = "";
jsScript += "document.getElementsByName('firstname')[0].value ='A';";
jsScript += "document.getElementsByName('lastname')[0].value ='B';";
jsScript += "document.getElementsByName('zipcode')[0].value ='12345';";
jsScript += "document.getElementsByName('bodytext')[0].value ='This is a test.';";
jsScript += "document.forms[0].submit();";
safari.doJavaScript(jsScript, { in: safari.windows[0].currentTab });

Comments: 9 Responses to “Filling In a Web Page Form Using Automator”

Douglas Brace

5 years ago

Pretty cool! Thank you for sharing this. Something for others to keep in mind is that websites that use CAPTCHAs may cause this to not work (or work as smoothly as we may want).

Dana Stevens

A great video. Made the time I spent learning the basics of Javascript worthwhile. Probably doesn't appeal to a significant portion of your viewers but I really appreciate it. Thanks Gary.

Bill Sinclair

Woah — way too geeky. All this effort to enter normal details?
all the best

Gary,
You said you could do this in either Automator or Script Editor. Would it be possible to post a script editor version? If you don't have time to fool with it I certainly understand. Thanks. Dana

Gary Rosenzweig

Dana: The JavaScript is the same. Using Script Editor is just like using Automator when you are just including a script and no other actions.

Thanks Gary. I've tried to adapt the script to see if I could make a script using JavaScript that does the same thing that one of my more complicated AppleScripts accomplishes. I've had success with the modified code when putting the code in the JavaScript console but have not had much luck with the code when using Script Editor. I'll keep working on it. Thanks for posting the video that gave me the inspiration to try. Dana

Gary, I did get my modified code to work using Script Editor. Had to change my thinking a bit but your comment that "The JavaScript is the same" and a bit of internet searching put me on the right track. I don't think you'll make a JavaScript convert out of me just yet but this post may have taken me down that path. Thanks again for making the original post and for being there for us. I'll try to make comments only during normal business hours from now on. Dana

EA Platt

Gary -- would this work with a PDF file that had fill in the blanks?

EA: No. It relies on web pages being scriptable (JavaScript). PDFs are not.

Comments Closed.

Filling In a Web Page Form Using Automator

Comments: 9 Responses to “Filling In a Web Page Form Using Automator”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information