We're making huge progress in our 21 day portfolio, and if it feels like we're nearing the end, we are. But there's still interactions and accessibility and design review and SEO settings. So in reality, yes, we are making incredible progress, but there's still a lot to consider as we move forward.
This lesson's going to focus on reCAPTCHA validation, to reduce spam in our contact forms, and it's going to cover responsiveness across all breakpoints, desktop, tablet, mobile landscape, mobile portrait, and the outdoor theater in Bryant Park. So reCAPTCHA, Google's CAPTCHA, completely automated public Turing test to tell computers and humans apart. In other words, it trips up robots in an attempt to reduce spam. How do we add it? Well, we can just add a reCAPTCHA element anywhere inside our form block. So let's make sure we're on the base break point and we'll double click to edit our contact form. Remember, we're editing a symbol here. That means changes here will affect every contact form everywhere. So we're editing the symbol. Let's go ahead into our ad panel and we're going to add reCAPTCHA from here. Under forms, we have reCAPTCHA. Let's use the navigator to place this precisely. We'll put it inside the form and we'll put it in between the message area and the submit button.
[Sara] That's it?
[McGuire] What's up?
[Sara] Normally you talk more.
[McGuire] Did you want us to talk more?
[Sara] Yeah. How was your day?
[McGuire] Good.
[Sara] Okay.
[McGuire] Let's continue setting up our reCAPTCHA validation and we'll go to our project settings to do that. So, project settings. Let's head over to forms and we'll want to scroll down to reCAPTCHA validation. There's two things here, a site key and a secret key. Let's go and register for a new key. Now we're going to ignore this existing data on this test account. Instead, we're going to press the plus button. This will create reCAPTCHA for a new site. So that site, let's add one right here. Megan Garcia portfolio. This element integrates using reCAPTCHA V2. So we'll use reCAPTCHA V2. We're going to make sure the I'm not a robot checkbox is checked, to reduce the number of robots checking this box, and we're going to add two domains, two domains right here. The first one we'll add is Garciaux.com, press return.
And the second one we want to add is our staging domain. So let's go back to Webflow and we'll go back to our general settings. This is where we can either copy this one, this sub domain, right to our clipboard, or we can change it, if now is the time we want to change our subdomain. We're going to keep it like this, megangarciaportfolio.webflow.io. We'll go to reCAPTCHA, paste that in, .webflow.io. And the reason we're doing both of these domains is to ensure later when we publish our site on Megan's custom.com domain, it works there and we want it to in the meantime, and anytime we're on the staging domain, we want it to work on the staging domain too, so we can accurately test our reCAPTCHA element. Hit return, and both have been added.
We're going to accept the reCAPTCHA terms of service, send alerts to owners. We're going to keep that on, so we get notifications if not working properly, then we'll press submit. That's a coincidence, a site key, and a secret key. We've seen this before. So let's go, copy our site key, and we'll go back to Megan Garcia portfolio. We'll go back to forms and we're going to go down here and paste in the site key, just pasting in what we copied to our clipboard. Back to reCAPTCHA. Copy the secret key back to the portfolio. Paste the secret key.
The final thing we want to do is enable reCAPTCHA. Now, when this is enabled, all forms will be validated, all forms throughout the project. Forms that do not contain a reCAPTCHA field will fail to submit. Let's save our changes and very carefully read this dialogue box, which is clearly stating that we have to make sure all our forms include the reCAPTCHA component before we enable this, as they'll fail to submit, unless we have the reCAPTCHA element properly added to each form. Again, if you're adding this to an existing site, this change will go into effect immediately before the next publish. Let's enable reCAPTCHA and let's scroll up to go back to the designer.
But that's setting up reCAPTCHA. Let's move on to test responsiveness on this page. So we're back on the contact page. We have our reCAPTCHA element. Again, this is located in reCAPTCHA and we're on desktop. We're on our base breakpoint. We may want to make an adjustment to the reCAPTCHA element so we can add margin on the top, just to push it off from the next element. Maybe 10 pixels on top. We're just eyeballing it right now.
Let's press back to instance, so we're no longer editing that symbol and let's test responsiveness and fluidity. So if we grab the boundary, if we grab the edges of the viewport, let's click and drag and test how this is working. So far, reCAPTCHA is working fine. The rest of the form looks good. We've done this before, but we're checking what this static page looks like. Everything looks good on desktop. Let's move on to tablet. Again, same thing. We're going to test responsiveness and fluidity. The heading still seems to fit. The H1 still seems to fit. One thing to note, and we're going to do a design review later to catch things like this, but it might be worth noting that if we go back here, this is an H1.
And even if we go back to our homepage, this is an H one. Each of our secondary sections starts with an H2. This is a little more specific. So this is an H3, but if we go down to our contact form, when we click in here, it's still an H1. We might want to go into the cog and make this an H2, a heading two, so that hierarchically our pages make a little more sense. In fact, if we leave this, if we stop editing the symbol, we know that change carried through to the contact page. So now we have a proper H1, I'd love to hear from you. And if we double click in here, we have the H2. Let's work together. Of course, changes to headings like that affect all breakpoints. So let's go back in. We're in tablet. And of course it's an H2 there as well. So we're looking pretty good.
Let's move on to mobile landscape. Now you'll notice the moment we switched between tablet and mobile landscape, this heading gets smaller. Remember we created a larger head in class as a duplicate. We duplicated the head in class and went back when we were in base break point. When we created this in the last lesson, and we changed a lot of this. We changed specifically the size, the height, the color, but when we duplicated that class, it brought with it other changes. So it brought back the changes on mobile landscape. So those are size and height differences. Maybe we want to increase this, hold down option and drag. Maybe that looks a little bit better, but keep in mind if we test fluidity, it knocks that to the next line. Maybe not so great. Let's reduce it. 36 looks pretty good.
As for the rest of it, everything's wrapped in our container class and we know our container class is already configured on each breakpoint, so that looks pretty good. Again, testing that fluidity, looks great. Noticing now that our footer could go through one change, we could always catch this later, but let's grab our text blocks here. Let's grab our collection item or the collection list itself, and let's set its children to center. That looks a little bit more balanced. We can always make changes to this later. Escape so that we're no longer editing the footer.
Okay, let's go to mobile portrait. Now on mobile portrait, it's a disaster. Why? Well, because the reCAPTCHA validation is hanging off the edge, and the reCAPTCHA element itself needs a little customization to make this work on a much more narrow viewport. So we're going to do that right now. First, let's make sure we're inside the form block. We've double clicked to edit our symbol, and we're going to wrap our recapture element with a Div block. So let's click the reCAPTCHA. Let's do command K to enter quick find let's do Div block. Press return. And we'll just drag our reCAPTCHA element inside a Div block. With the Div block selected, let's go over to our style panel and add a class. We'll call it reCAPTCHA wrapper.
And if we go down, we can actually transform the size. We can transform all of it. Let's make sure we're actually locking to the top left. We'll set our transform origin. So it anchors on the top left. And what that means is this. When we go and add our transform, let's scale it. The scaling will occur around the top left of the element. Now it looks super tiny on the screen, but this is scaled at 0.7 and we can test what it looks like on different device widths. In fact, let's go and grab this. Let's see what it looks like on an iPhone. There's the iPhone 12, 12 pro even on narrow devices, it looks okay. The only device, it hangs off the edge with still, is going to be the Nintendo entertainment system, which yes, that's accurate.
However, one thing to note on our contact form on all pages here, is this amount of padding on the sides might be a little much on mobile portrait. So with our form blocks selected, let's go back up to padding. Let's see what would happen if we reduce this maybe to 15 pixels on each side, or even because of our limited screen real estate, let's do 10 pixels on all sides. It looks a lot better. Okay. And as the final step, let's go back to our large breakpoint 1920. Let's go back to our instance, so we're no longer editing the contact form and this looks pretty good. Maybe the larger heading could be even larger. It has a maximum width. Let's actually remove that maximum width here and set the size to 335.
[Sara] (laughs) Stop doing that.
[McGuire] But that's it for now. We secured our contact form to reduce the chances of spam messages reaching our fictional UX designer. We also made sure it responded and was fluid on all device breakpoints, including desktop, tablet, mobile landscape, mobile portrait, and larger than 1920 pixel breakpoint.
Up next in the course, we'll set up and optimize our search settings, how people will find Megan's portfolio site on search engines like Google.
[Grímur] I received some pretty... How do you say? Interesting messages on Twitter, Pinstagram and LikedIn, and I want to thank everyone for sharing their progress. It keeps me going, almost as much as these Duracell brand batteries.
[McGuire] Those are Energizer.
[Grímur] No, it's Duracell. I can see it. I see what I want to see.
