JavaScript How is PF's "CONTACT US" Button made?

[YoungPhysicist]

I would like to add a email sending feature to my website, something like the the "CONTACT US" button here on PF.

When I was searching this topic online, I get various paragraphs from CodeProject and StackOverflow, I saw methods using mailto: and some other stuff, but none of those work on my new laptop. Windows says that it needs an email client.

But as I am trying to use the "CONTACT US" button here on the exact same computer, it worked! So it uses a totally different method that works everywhere.

Do anyone have a idea of how it was made?

 

[DrClaude]

Paging @Greg Bernhardt

 

[Borg]

The Contact button brings up a dialog that sends your message back to PF's server just like any other action on the site (like clicking a link). A mailto link uses information on your computer to open whatever email program (like Outlook) has been set up as default on your computer. In order to send email with that, you have to have your email program set up to communicate with an email server. For most people, this is provided by your ISP or a service like gmail. If you don't have an email program set up, your computer can't use the mailto link.

 

[jedishrfu]

Google blogger software uses a dialog with the google host to forward your message to the owner of the blog. That means the google machine takes on the responsibility of being the one with the email client.

There may be some javascript apis from google that would allow that for a custom web application.

Aso this scheme might work:

https://www.makeuseof.com/tag/7-simple-steps-gmail-desktop-email-client/

 

[Greg Bernhardt]

Do anyone have a idea of how it was made?

It seems you are asking a couple questions. First the popup is a combination of a little javascript and some css. Javascript detects the click and then loads the contact form overlay. The email is sent via html form.

 

[YoungPhysicist]

The email is sent via html form.

Yeah,I know. I mean which way exactly is the form constructed,so it works everywhere.Like the source code or something (the “view source code”’ function on my browser didn’t help much)

But according to what @jedishrfu said in the previous post,looks like it can’t be done only by html.It has to work with some email client,either on the computer or external.

 

[Greg Bernhardt]

Yeah,I know. I mean which way exactly is the form constructed,so it works everywhere.Like the source code or something (the “view source code”’ function on my browser didn’t help much)

But according to what @jedishrfu said in the previous post,looks like it can’t be done only by html.It has to work with some email client,either on the computer or external.

Not sure what you are really getting at. The form has nothing to do with an email client.

 

[PeterDonis]

It has to work with some email client,either on the computer or external.

It works with a program on the server side that sends email using the information submitted with the HTML form. It doesn't interact with any email software on the client computer.

 

[PeterDonis]

I saw methods using mailto: and some other stuff, but none of those work on my new laptop. Windows says that it needs an email client.

Yes, a mailto: url basically tells your browser "load whatever the default email client program is on this computer and start composing a new email with this to address". But that's not what PF's "Contact Us" button is doing, as should be obvious if you hover your mouse over it to look at the URL it points to.

 

[jim mcnamara]

SMTP (Simple Mail Transfer Protocol) is invoked on the physical machine that hosts the forum. So when you send email, there has to be:

A DNS connection to resolve the destination URL reference (example: me@mycompany.com) into an octet string which is the internet actual address.
An smtp process (mail server) that takes the message and uses the mail protocol to connect to the smtp process "mycompany.com" uses to receive email.
It initiates a conversation, which you can actually emulate from a telnet terminal. Try it. It is how you test an email (Exchange in windows parlance) server.

https://docs.microsoft.com/en-us/exchange/mail-flow/test-smtp-with-telnet?view=exchserver-2019

This shows the Windows how to. If you really want the nitty gritty stuff you probably should run WSL ubuntu (Linux Windows Service) which provides a pretty good embedded version of Linux. Requires Windows 10 and is free. I am assuming you are not using Linux to start with.

Most email messages use some type of encoding protocol. So to actually send a readable "cool" email, rather than simply test a connection, you need to run base64 (or windows version of it) on a candidate file - usually html. Then send the encoded file.

I've left out details.

 

[jack action]

Here, you can find the source code for a simple contact form using HTML and PHP.

PHP is a popular server-side language that can read the input values the user sent (found in the array $_POST) and can send email with the function mail($to, $subject, $body, $from).

 

[YoungPhysicist]

Not sure what you are really getting at. The form has nothing to do with an email client.

It works with a program on the server side that sends email using the information submitted with the HTML form. It doesn't interact with any email software on the client computer.

Well,sorry. I mistreated this question. I thought that the contact button can be made simply by html code and nothing else.

Later I thought that it can be used by using a gmail client.

At last, thanks to @PeterDonis, I know what it really is.