#114: Building Comment Form

(Updated on )

In this screencast we’re going to get into building the comment form in HTML/CSS. The markup for the comment form lives in the comments.php file in our theme. We look for the <form> element to find it.

We lay out each of the three inputs (name, email, url) using the grid system we have in place. Boy we’ve gotten good use out of that eh?

We already have a CSS file exclusively for comment related stuff, so that’s where we’ll work. The first thing we write is making the inputs in our little grid 100% wide so they fit within the column. Divs would do this naturally, but inputs behave more like inline-block and don’t automatically fill their parent containers width. We also fiddle with the main textarea a bit making it 100% wide and not as tall as it was. We decide not to mess with the resizing ability of the textarea. It doesn’t really break anything.

Then we get the Reply link working. The JavaScript already works just fine, because we didn’t mess with the ID for the form which the JavaScript relies on. We do need to make a bunch of tweaks though, like giving the form a gray background so the design of it works.

We spend the rest of the time tweaking some things with media queries so that the form looks OK on small screens.