Is it possible to do API calls from HTML alone?

General Web Dev
1

I have an HTML page with a contact form.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
	</head>
			<form action="mailto:example@example.com" method="get" enctype="text/plain">
				<label for="name" dir="rtl">Name</label>
				<input type="text" class="fname" name="name" required></input><br>

				<label for="email" dir="rtl">Email:</label>
				<input type="email" class="email" name="email" dir="ltr" required></input><br>

				<label for="phone" dir="rtl">Telephone:</label>
				<input type="tel" class="phone" name="phone" dir="ltr" required></input><br>

				<input type="submit" class="submit" value="Send"></input>
			</form>

		</div>
	</body>
	<script src="behavior.js"></script>
</html>

I want that contact form inquiries would be sent to SendGrid with some web service instead of SMTP.
Can I achieve this with HTML alone without using any backend program?

I would assume that in general, API calls would require some backend program and hence can’t be done from HTML alone but I would like to ask anyway about possible exceptional cases or tricks to contact an API from HTML alone.

2

Not what I am aware of. I think yo must use Javascript fetch() both for extracting the form values and send it somewhere.

3

Even if it would be possible, you would need to put the credentials for the API so that everyone can read them. I don’t think this is what you want.

2 Likes
4

You can read from an “open” API. https://api3.go4webdev.org/usr/all
But most API have some ways to protect from accessing via
<a href="https://api3.go4webdev.org/usr/all"></a>
Meaning that Javascript or backend is the only way to connect to a protected API.

5

Okay, let’s say I do it with vanilla JavaScript instead of HTML.
If by clicking submit I just transfer the data to a SendGrid account ID xyz, why are credentials needed?

6

So you can send any data to SendGrid without any username or password? What a welcome for hackers to send million of data to this address

1 Like
7

Because if you can send it to that account ID without any credentials, so can anyone else in the world. It’s open to abuse from all.

1 Like
9

@Thallius and @SamA74

I can add a captcha and maybe even also a form-filling-time-honeypot to prevent spam but besides that, that’s exactly what I want.

What am I missing?

10

The other end of the communication.

If the SendGrid SERVER can take a form input with no user credentials, and sends out mail… their server will be used by every spammer in the world…

You’re asking someone to put a door on a vault, without a lock, and expecting noone but you to walk through it.

To continue this analogy: If there is a lock on the door (the API requires user credentials), if you put the credentials on the form, you’ve put the key to the lock on a hook beside the door and are expecting noone to use it but you.

1 Like
11

I doubt this is the case, SendGrid requires an API key.
They also have policies whereby if their service is used for (reported) spam the account will be suspended and eventually deactivated if the problem isn’t resolved.
So if you did/could “leave the door open” they would bolt it shut, not just for spammer, but for you too.

12

(which was kind of the point i was trying to drive to :wink: )

To bring the analogy to full length, why we have backend servers.

Welcome to Analogyverse.
You run a bank (your website).
You want customers (end users) to deposit money (form data) in your box (your mailbox) in the vault (the mail server). You dont OWN the vault, you dont RUN the vault, you have made an agreement with the federal reserve (SendGrid) for them to put one in your bank.
So the reserve put a door in the vault (the API) so you can access it,
you put a podium in the bank (your form) with little slips of paper for writing down what they deposited.

Does it work? Sure, those good actors come along, write down a deposit, walk it into the vault, and deposit it.
However, the bad actors see the vault door, walk in, and take your money.
So that doesnt work.

So you put a lock on the door (Username/password/whatever).
But your good actors still need to get in. So you leave the key beside the door.
Did you stop the bad actors? No, they’ve gotta do an extra step of unlocking the door, but your money’s still gone.

So how do banks prevent this?
Well banks put their vault doors behind desks with tellers (the back end). The teller has the key.
A person comes in, fills out the piece of paper, and hands it to the teller. The teller can then look at the piece of paper, to make sure no miscreants are writing rude words on it (sanitization and validation), and then can take the paper to the vault.
You trust the teller, because you hired and trained them (wrote the backend code). They’re the only ones who ever handle the key, and they keep it hidden on them at all times. They know how to access the vault, and the kinds of things you can and cant put in the vault.

2 Likes
13

Sending data to an API typically requires server-side processing due to security reasons and the need for authentication, which cannot be done directly from HTML alone. In your case, using SendGrid to handle contact form inquiries involves making HTTP requests, which usually requires server-side scripting.

However, there are some workarounds that involve using third-party services that act as intermediaries between your HTML form and the API. These services can receive form submissions, process them, and then forward the data to the desired API. One such service is “Formspree.”

Here’s a basic example of how you could modify your HTML to use Formspree:

htmlCopy code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <form action="https://formspree.io/your_email_here" method="post">
    <label for="name" dir="rtl">Name</label>
    <input type="text" class="fname" name="name" required><br>

    <label for="email" dir="rtl">Email:</label>
    <input type="email" class="email" name="_replyto" dir="ltr" required><br>

    <label for="phone" dir="rtl">Telephone:</label>
    <input type="tel" class="phone" name="phone" dir="ltr" required><br>

    <input type="submit" class="submit" value="Send">
  </form>
</body>
</html>

In this example, replace "https://formspree.io/your_email_here" with the actual Formspree endpoint you get when signing up on their website. Formspree will forward the form submissions to your specified email address.

Keep in mind that while this approach doesn’t require server-side code in your own infrastructure, it relies on a third-party service. If you have specific requirements or want more control, using a backend server with a server-side language (such as Node.js, Python, PHP, etc.) is the recommended approach

1 Like
14

Yes and no. You can test HTMX which is a Javascript library that gives you the feeling of using HTML without using Javascript. :slight_smile:

15

We have a tutorial on that here:

2 Likes