Small red plastic toy shovel.

Gravity Forms Notification to Google Spreadsheet

The idea that data can flow to different places for different purposes is one of the key concepts I want people to believe in. Different technologies and different interfaces have different affordances depending on what you’re trying to do. In this case, we’ve built some online training for students. As part of that training they need to sign off indicating they read various rules and safety advice. We’re using Gravity Forms to collect that information. We’re going to set a special notification email that’s easier to parse in addition to the regular email that gets sent out (that one is oriented towards student confirmation and alerting the individual faculty). Gravity Forms Notification We’re just going to put the student email and faculty email in the subject line with a space between them. I did some fancier stuff early but went back to this when I realized what we were doing just wasn’t complex enough to justify extra drama. I set the from name to Health Hub Logger so it’d be easier to write the filter in GMail. Notifications in Gravity Forms are pretty straight forward but you can find out more on their site. GMail Filter I then setup a filter in GMail so that I could be confident that the Google Script could find these emails and that I […]

23

H4 Widget Headers – Incorrect Nesting Fix

Nothing fancy here but I’m documenting it for the benefit of beginners or people who don’t do this at all. It seems most of the widgets in WordPress automatically give you h4 headers when you add them to the sidebar. That seems to go against the idea of nested and orderly headers that WCAG accessibility wants. Granted, I’m not an expert and reading their documentation seems more painful than it should be. I do know that the SiteImprove checker flags it on the site I’m working on so I turned to javascript for a fix. What I need to do is take the HTML below and remove the H4 element and replace it with a div. I add a class so it’s easier for me to repeat the style that the H4 element had. As is typical for me, I did it on one element first and then I move to see if I can make a more generalizable function. Now I need to repeat this for the other 3 or 4 widgets. I could just copy it over and replace it but I’m really only dealing with two variables so making a decent function makes sense. I need to select the specific ID of the widget and I need specific replacement text. That leads to a function like this. […]

cartoon face eating cheetos.

Accessibility Bandage

We’re trying to solve some accessibility issues in sites that already exist. It’s not much fun but some of the solutions might be useful to others. The goal is also to do it pretty fast as many of these sites aren’t really our responsibility but we’re trying to help people out who are on WordPress. Same Name, Different URL In this case we had an issue where some tags for the posts were the same name as some other links on the page. They didn’t go to the same place. That’s a bad thing for accessibility. Handily, our post tags were wrapped in a div with the class tags (.tags). The following bit of js, selects all the a elements within the element with tags class (.tags) and adds a the # character to the tag title. Simple and easy compared to writing a custom tags function in php. I also like the ability to use querySelectorAll in combination with forEach. See the Pen cobe tags accessibility fix by Tom (@twwoodward) on CodePen. Pattern What you can see too in the codepen above is that I’ll often copy/paste the HTML from the WordPress site and experiment with it in codepen. It often simplifies things while providing a quick working environment.

12

Making an Index Using Javascript

Working with a faculty member we had a rather long page that was originally written in Google Docs. It had many sections that were (mostly) designated by H tags of various denominations. The goal was to and put it on a website quickly build an index of anchor links. I did not wish to do the index portion by hand. With javascript things like this are relatively pleasant. You can see the whole thing in this codepen but I’ll break it down a bit below. First we can get all the H tags with querySelectorAll. I can console.log(headers) and I’ll see a NodeList of all the headers it found. I tend to work console.log all my variables as I go just to make sure it’s really happening the way I think it is. My next move is to add an id to each of these headers so that we can navigate to them via anchor links. with this forEach loop each header will get an id of header-whatever number we’re on in the loop. Now that I have headers that I can link to as anchor links, I need to build the index and put it somewhere. In this case it was easy for me to add a div to the source manually so I did. That will be where […]