Is it the only element on the page? There are many ways to center it vertically but without knowing what’s on the rest of the page, something like Dave’s will work. With other elements on the page, Daves method needs to be adjusted.
You may edit the existing form to add the <label> elements and id attributes.
Also add the CSS to style it as you want.
HTML and CSS alone won’t send an email, the server side part is inevitable, you will need to server to send the mail. But take it a step at a time, get the form set out as you want first.
That would negate the benefit of using a contact form. With your email address in the form code it may be harvested by spammers.
You may as well take the easy route to being flooded with spam and use a simple mailto link.
I gave an example of a properly formatted label and input here:-
The CSS would depend upon the look you want. There were some example already given for things like centreing the form element, putting labels and inputs on their own lines. But without more specific needs stated it is hard to advise.
Also Ryan is correct, the correct code may dpened upon the form’s context within the whole page.
You have the area called main on the left but you failed to place anything there.
You used form as a selector but the element is called #form so nothing got placed.
As you are using grid-template areas you don’t need the columns or rows setting,
You used height:100vh for the wrapper which means your layout can never grow below the fold. Is that wise? Content will just spill out. Use min-height instead, You will rarely use height for your main container.
Think about what you are saying. 100vh is 100% of the viewport height yet the viewport already has margins on the body so that one rule will give you a vertical scrollbar when none is needed. Negate the margins on the body,
"main main ct1 ct2"
"main main ct1 ct2"
"main main ct3 ct4"
"main main ct3 ct4";
You probably also should use the box-sizing:border-box model when using things like 100vh as padding and borders will increase the height.
You really need to follow a structured tutorial as that question encompasses various different topics. Basically your form sends an http request to your server and then on your server you have some code that acts on that request and accomplishes the tasks that you require.
Read the MDN primer here for an overview,
The prime thing to note is that you need code serverside (PHP or similar) that receives the data and then performs the action you require (such as emailing you or retuning a received message back to the page).
You can set the action of the form to open the default email client but that is not recommended.
If you don’t have the time or experience to learn you could use some third party form handler but usually there’s a cost involved.
Yes, thats a standard mailto link in an anchor and will open the users default mail application assuming they have one. (Some users will be on machines (such as a Library, college or at work) where it may not be possible to open a default email client.)