Hi there. This video is all about adding a really simple email button to the website. We had this link that we made earlier and when we clicked it it went to google. That wasn't that helpful. What we want to do now is when we click it it opens up our email campaign and sends us a website pre fills in and the subject line is done. Okay. It's a nice little handy. Quick, super easy, quick trick to add that sort of functionality to your website. Yeah. Let's jump in and make it happen alright to make it work. We're going to do it to the button that we've got here at the moment. It doesn't go to google. Okay. It'll go to another web page. I want to get it so that when you click it, so I'm the user, I'm at this website at a deer and I want to click it and send an email for about a reservation. Okay. And doing a form. We'll do later on in the course because it's pretty hard to do. Not pretty hard. Yeah it is pretty hard. We'll do it later on. Um But for the moment a little male to thing is goi...

ng to be nice and simple and quick and easy to do. So all we need to do is we did this h ref earlier on. Okay. So if you haven't done this one look for making a hyperlink video earlier on. Okay. And all we need to do is switch out this part. So instead of going to google dot com we're going to get it to go to mail too Colin so it has to look exactly like this. Okay then you put in the email address no spaces. So if you wanted to email me your email daniel at my email, my website, my website dot com. Okay. So when somebody clicks that they're going to we'll show it. Okay. Target blank. Yeah, why not? It doesn't really matter in this case because it will load up in its own blank thing and that is it. That should make it work. Alright, let's save it. Let's give it a preview. Where are you? Just click it, Look at that. It opened up my email system on my machine, I'm pretending on the client now. So I'm just searching the internet for a restaurant. I'm like, let's make a reservation, click the button, this opens up so it's opening up mail. Okay. And yeah wants to I can write a subject and I could say could I get a booking? Okay. It's a nice cheap, easy, quick way, right. It's five seconds to implement and heaps easier than a form. A couple of things. That might be handy is to adding a subject line. Like pre filling it in. So what you can do, you can add a little bit of extra to the end of this. So male to is cool. But at the end of the dot com put in a question mark. Okay, you gotta put a question mark and it has to be spelled like capitalists and it has to be subject. So question mark, capital S for subject and then you can put in equals. So it all has to look like exactly like that. Then you can just add the subject line. So you could say reservation. Cool. Let's hit save and let's preview it. Let's close it down. Yeah. Let's preview it in the browser, click on it. You can see it loaded my email and put the subject in school. Ha you can do some other things like adding the CC and can you put body copy in? I think you can as well. I don't know them off by heart, but you can go and have a look at that yourself. Now all you need to really look for is search for mail to an html and you'll find a page on what you can and can't add and it'll just be different things like this. I imagine it will be question mark, C C equals. And you put another email address and but that's a guess. And just a nice little cheap trick for adding an email. Alright, so that's it for this one. It's going to the next one if you're thinking, oh, that'll be the last one for tonight. I'll do some more tomorrow. Do the next one. The next one is awesome in bed codes. It's gonna make us look awesome. It's that map. It's not gonna take too long. Alright. I'll either see you in a few seconds or I'll see you tomorrow when you wake up. All right by now.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Add an Email Button to a Website

Add an Email Button to a Website

Lesson Info

29. Add an Email Button to a Website

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks