We're still neck deep in the Forums area. In this screencast we look at the signup page. Another rather important page as we want the experience of joining the forums to be and easy and welcoming as possible.

We're a little nervous at the beginning, thinking it's going to be a crazy struggle to figure out what files to update to change things in the smartest way possible. We do have a bit of a struggle, but find some information on GitHub that helps us understand. We're getting better at this! Plus, next time around, we've already wrestled all the control we need and it will be easier. Although, and I've said it before, I'd really love to get this onto bbPress one day so the whole site has single-signon.

Strangely enough, we're going to be styling a "normal" form for the first time. The search form on the site is so custom it doesn't do much for us. The comment form we ended up using in-input hints instead of labels. This form has traditional labels, so we have to write some CSS from scratch. We break it into a partial (_forms.scss) as we tend to do for design patterns, and go with a top-label style.

We have to end up setting a max-height and overflow: auto for the popups because the Terms of Service for the site show in a popup and it's too long. Hopefully this will be OK for mobile - we'll have to watch that.

We get the CAPTCHA going (just a simple matter of giving it some free API keys), but the display of it seems a little funky. Likely just an aberration of the weird monitor configuration I have.

We end up doing a little bit of styling for the error messages that are possible to get while signing up. We also discover the error messages leave a bit to be desired, but at least we can get them looking OK.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.