How do I attach my email to the "send message" button? - html

Question

I'm trying to create my own website using this HTML5 template. I have no background in HTML.
I'm trying to make the last section, Contact Me, send a message directly from the website. The code that I think is relevant from the link above (again, no background in HTML) is:
<section id="Contact">
<div class="container">
<h3>Contact Me</h3>
<p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum integer. Integer eu ante ornare amet commetus.</p>
<form method="post" action="#">
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall"><input type="text" name="name" id="name" placeholder="Name" /></div>
<div class="col-6 col-12-xsmall"><input type="email" name="email" id="email" placeholder="Email" /></div>
<div class="col-12"><input type="text" name="subject" id="subject" placeholder="Subject" /></div>
<div class="col-12"><textarea name="message" id="message" placeholder="Message" rows="6"></textarea></div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" class="primary" value="Send Message" /></li>
<li><input type="reset" value="Reset Form" /></li>
</ul>
</div>
</div>
</form>
</div>
</section>
I was trying to understand which part of it I need to change to make this happen. From this SO question I understand that the relevant line might be <form method="post" action="#">. I changed it to be <form method="post" action="mailto:my_email#gmail.com">, but it opens the user's outlook email instead of directly sending from the website, and the message in the outlook is also messed up: name=some_name&email=some_email_test&subject=test&message=some+message