In this video, we have one last thing to do, to finish the footer, its the e-mail from. This title here that 1
says to subscribe to our newsletter, is not a link, it's just a headline. But same style as other footer links. 2
We need to change this into a regular text and remove that hover effect. 3
This is how we'll do that. 4
Add a regular text block and give it the same footer link class. 5
Now it's not a link anymore, but the hover effect is still there. To get rid of that, 6
we will duplicate a class and name it something like "subscribe text". 7
Now we can go to the hover effect and get rid of it. 8
Now let's create the newsletter form. 9
But start by copying the email form we already have above and go from there. 10
Naturally, spacing is going to be an issue here, especially when we shrink. 11
So we're gonna have to make some layout adjustments. 12
The content here is flexbox organized in columns. 13
For starters, we can get rid of the width that we have applied to the footer columns. That is making them 14
equal width, regardless of the content inside. 15
Which in this case, isn't really going to work. 16
All right, that's a little better. 17
There is also an extra empty column, which previously we used to have an equal space between the logo 18
and the links. 19
This time, we're gonna have to lose it. 20
And that's an extra improvement. 21
Now, let's change the width of the first column with a logo inside. It's stretching way too much. 22
Let's check what's the width in the design and apply that. 23
Excellent. 24
That might be enough. 25
Now let's style the form. 26
Now, this form is using classes from the above hero section form. 27
So we need to duplicate every time we're changing something inside, so don't forget that. 28
Let's start with the background color of the field. 29
There seems to be some default style in the field border, so let's change the border to transparent 30
or 0 pixels. 31
Remember, the text inside the field, is the place holder text. Which can be styled from the states dropdown. 32
♫ 33
Now the button is a little more fun, we've decided to have a button that's arrow and it's on top of 34
the field not outside of it. 35
So we gotta pay for our creativity. 36
Luckily we have already learned how to use positions, so we can make such arrangements. 37
We'll need to do a few things in order to make this work. 38
First, let's turn our button into an arrow. 39
This is fairly straightforward. 40
We are going to put the arrow as a background image of the button. In regular buttons, 41
we could directly insert the arrow inside, but when it comes to form buttons they work a little differently. 42
Here's what we need to do. 43
Get rid of the text and the waiting message, that's inside the settings of the button. 44
But put something, like one single letter. 45
We cannot leave it completely empty, because Webflow will insert some default text otherwise. 46
Now, remove the existing class and create a new class something like arrow button. 47
We can easily make the letter disappear, by turning the text to transparent color. 48
That's all. 49
Now it won't be visible. 50
Problem solved. 51
Next. 52
Export the arrow from Figma and add it as a background image of the button. 53
We've got to change a few settings here. 54
First, choose the Contain, 55
so the full arrow is visible no matter the button's dimensions. And remove tiling and position 56
image right in the center. Next, remove the blue background by changing it to transparent. 57
We need to match the height of the button to the height of the field. 58
It's not matching right now because the field has an extra margin on the bottom by default. 59
Change that to 0 and the button should match the height Exactly. 60
If it doesn't, then check the settings of the form. 61
It's a flexbox and something might be up in there, or just change the button height manually, 62
Just like the field. 63
That should do the job. 64
Next, we're going to set button to absolute position. 65
And align it to the right. 66
The moment you do this, the pattern might disappear. 67
Now, why is that? 68
Because position is relative to the body. 69
We need the position to be relative to its direct parent element, which is the form. 70
Remember the trick? 71
If we change the position of the parent to relative or something else, then the button will position 72
itself relative to the parent. And that will fix our issue. 73
Let's move the arrow a little to the right. 74
Now, let's give it a test in the preview. 75
All is working fine, except one thing - for a very long email, the text is going to mix with the arrow. 76
Fixing this is very easy. 77
We just need to add extra padding to the field element. That way 78
text will stop going underneath the arrow. 79
There, now it's perfect. 80
We also need to change the success message. To enable the success state, 81
select form block and in the settings, click success tab. 82
Make sure you've selected the form block and not the field. 83
Selecting just the field will show different options in the settings. 84
Make sure to duplicate the success message class, since this is the same class from the above form. 85
Now the box grows wider compared to the form field and alters the entire structure of the footer. 86
Not a good idea. To fix this, 87
we can give our entire form block a fixed width. The same size as we have in designs, which is 267 pixels. 88
This will keep the field, the success and error messages all the same size. 89
Now, let's style the rest. The text size is too big compared to other footer content. 90
We should match the font size, and maybe less padding. 91
And we also need to update the content. 92
As for error message, it seems fine as is. All right, 93
check the responsiveness 94
and see how it all looks inside the preview mode. 95
Our home page is done. And in the next section, we're going to learn how to use Webflow's interaction 96
tool. So we can create some animations for our page and bring it to life. 97
Stick around.