HTML and CSS button for form action

Question

I am creating two contact button for two persons in HTML and CSS. My aim is while clicking on the button user will directly send them mail using outlook platform. My code for person1 is given below:

<p><form action="mailto:abc@google.com" method="post" enctype="text/plain"><button class="button1" a href="mailto:abc@google.com">Contact</button></p>

It creates a contact button and while clicking on that button it shows mail id in outlook is abc@google.com.This is perfect.

Now code for person2 is given below:

<p><form action="mailto:xyz@google.com" method="post" enctype="text/plain"><button class="button1" a href="mailto:mailto:xyz@google.com">Contact</button></p>

But here while clicking on the Contact button instead of showing "xyz@google.com" id it shows id for person1 which is abc@google.com.

I am unable to resolve this issue.

score 2 · Answer 1 · answered Nov 12 '20 at 09:15

2

I think part of the problem might come from the fact that you have two apparent mistakes in your code.

First of all, you're not closing your <form> tags.

Secondly, your second link's "href" is set to : "mailto:mailto:xyz@google.com" instead of "mailto:xyz@google.com"

Making these changes fixed it for me!

answered Nov 12 '20 at 09:15

Shiverz

663
1
8
23

You're welcome man, glad to help. Keep in mind, for this specific use, the buttons dont need to have a "href" attribute. Moreover, I think it would be best to use regular tags with an href attribute, and [styling it to look like a button with css](https://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button). That is, if you don't need the
tags for something else you haven't included in your post.
– Shiverz Nov 12 '20 at 12:46

score 2 · Answer 2 · answered Nov 12 '20 at 09:18

Just add closing tags for the form, and correct this line - a href="mailto:xyz@google.com".

<form action="mailto:abc@google.com" method="post" enctype="text/plain">
  <button class="button1" a href="mailto:abc@google.com">Contact</button>
</form>

<form action="mailto:xyz@google.com" method="post" enctype="text/plain">
  <button class="button1" a href="mailto:xyz@google.com">Contact</button>
</form>

HTML and CSS button for form action

2 Answers2