I’ve noticed that quite a few people have portfolios complete with contact forms but the forms aren’t working because in order to use them, you need a backend to process it. And of course, since we are working on our portfolios long before getting to the backend portion of the FCC course, that leaves you with a non-working contact form. Catch-22 type of thing.
For those of you who want a quick (maybe temporary) solution, you can use Formspree https://formspree.io/ until you get around to getting your own site, learning PHP, etc.
One thing to note is that the free version leaves your email address exposed to scrapers and bots so you might want to set up a temporary disposable email address while you use it.
By the way, you can try to obfuscate your email with a bit of JavaScript in your HTML. Something like this to replace the first line of your form:
<script>
var mailAdd1 = "your";
var mailAdd2 = "emailaddress";
var mailAdd3 = "@";
var mailAdd4 = "gmail.com";
var fullAdd = mailAdd1 + mailAdd2 + mailAdd3 + mailAdd4;
document.write('<form action="https://formspree.io/' + fullAdd + '" method="post">');
</script>
I just tested it and it seems to work fine. I’m going to play around a bit and see if I can do better. A smart robot might be able to decipher that. Maybe reverse strings or shift characters might be good.
Actually, blue, at first I was using a real email so I went back to change it to an anonymous one and again had no problem with it. Not sure what’s happening on your end. Are you trying this on Codepen? Maybe it doesn’t work on Codepen for some reason? I don’t know because I never tested it there.
I tested it and this doesn’t seem to work on Codepen.
The way Formspree works is, the first time you submit the form, it’s used to validate. They send you an email to confirm. Once you confirm, then every message after that is forwarded to your email address as normal.
This works on my site. However, on Codepen, every time I submit, it sees it as the first time time. I think it’s because the URL that Codepen uses changes each time so Formspree can’t know that it’s the same form (they think you’re installing the form on a new site each time) and so they keep send me confirmation emails.
It might work on something like Wix though since you keep the same URL for your website.
I host my websites (finished ones) on pages.github.com. I almost never use codepen.
Exactly that is the same thing for me. Another bad thing is that if you go inspect element and use a disposable e-mail someone can see it there and see the e-mails you were getting. So it would be better setting up another account just for this if not using the usual one.
EDIT: I just checked the mail and I got the confirmation, 7 hours later. So now it’s working.
Oh and let me ask you this: how did you overcome the hard start of a first programming language? I’m having major difficulty of going through JS.
What do you mean they “can see the emails you were getting”? I don’t think anyone can read your emails… If someone looks at the source code, they can see your email address, but not the actual emails. That’s why I recommended getting an extra email address for this.
Glad to see it’s working for you now.
I think the hardest part is learning to “think like a programmer”. Luckily, I’ve been playing around with (simple) programming since I was a teen and it came pretty naturally to me. I was very interested in it for its own sake and that’s probably why I didn’t think of it as difficult.
However, I still struggle when I try to learn new, more difficult concepts. The key really is to practice a LOT. If you just go through the challenges on FCC, it’ll be tough. FCC doesn’t “teach” much at all. Think of it more as a road map, telling you where you should be going. But learning to drive the car, well, you have to search and figure that out outside of FCC.
So then the problem is that most people will just Google “JavaScript tutorial” and then they’ll try to read the whole book, maybe copy the exercises as they go along, and think they should “know” it then. Nope. You need to USE it in a way that is meaningful to you. Think of a small task that you can create an app for. Start very small and simple and work your way up. Make it personal. Make it useful. When you do that, you learn so much more because you’re focused on accomplishing your goal, not “learning JS”. It’s like learning a language. Those who just “want to learn English” never do very well because there’s nothing they actually want to SAY in English. It’s just a tool. If you have nothing to express, then it’s very difficult to get good at it. JavaScript is the same.
If you REALLY want to hide your email address, then don’t use one at all. Either pay them for the premium account or roll your own with the backend, which is what you should be doing if you know how to anyway. I just thought I would provide a quick and easy temporary solution to those who don’t know how to do all that just yet. I think it would throw off most bots, which is what we are really hoping to do.
Yes that was my intention, just go ahead and set a goal then move up.
By the email being visible I mean going to inspect element and only IF you set a temporary email anyone will be able to access it. Well at least all previous tempmails I’ve used don’t require a password so I assume none do.
I don’t pretend to know everything about the best way to obfuscate email addresses. I thought my suggestion was a reasonable temporary solution. If you have a tested and more effective way of doing it, then by all means, please show us how to do it so we can learn. That’s what we’re all here for.
I’m sorry, blue. I’m not clear on what you’re saying. You are talking about the “email address”, not the “email messages”, right? Also, not sure what you mean by not requiring a password… I’ll try to explain a bit more clearly.
When you use Formspree, you have to tell them which email address to forward the messages to by putting it in the form’s action. This means that, as you point out, anyone can find out what that email address is. There are bots that scrape for email addresses in the html of websites automatically. If it’s not a bot, a person could get it by looking at the source code or inspect. Because of this, I think the risk for getting a lot of spam in the future is high. That’s why I suggest using a temporary, disposable email address that you will ONLY use for this purpose.
You can create a new email address with yahoo, microsoft or google very quickly and easily. If, in the future, you start to get too much spam, you can stop using that email address and make a new one. That’s what I mean when I say it’s disposable and temporary. You will probably not keep using that email address for a very long time.
When you create a new email address with one of those services, you are always required to make a password. I have never once seen a service that lets you create an email address without a password. Of course, only you know that password. You don’t put that password anywhere in your HTML.
So if you create "bluemail@gmail.com", for example, you will also need to create a password, say “bluepass”, which you will keep private. When a user goes to your site and sends you a message, Formspree forwards that message to your "bluemail@gmail.com" account. For you to see that email, you’ll need to login to your email account using your password.
Yes I was saying that the address can only be seen. Not the message through inspect element. BUT if it’s an actual disposable email like this one then that means anyone can access the inbox of the address and with these actual temporary email addresses (not google, yahoo or microsoft) anyone can access your received messages as long as they know the address. Those from the link I gave in this post, they do not require a password to be used.
I just thought that by disposable you meant those disposable addresses not the address you’d create just for this purpose. Hope that clears it all out
I found this one so once I see what it is I will let y’all know. There is also foxyform.com but it has JS. I don’t know how to style that one so I’m moving on.
Maybe someone who has done / or is doing the backend can make something similar. Would be nice if you would have a web portal where you could see “emails” sent to you from your site. You would only have to expose an ID then.
I developed a completely free and open source Ruby on Rails version of formspree a few months back. I made it because I was looking for something similar but without the security and privacy concerns I had with formspree. Unlike the formspree on github, my app has no paid dependencies and has complete configuration instructions for users who want to self host on heroku.
I would indeed try and implement your clever piece of code in order to obfuscate the email, but I just read this article and thought to share. formspree.io now (updated 4 months ago) encourages you to use a unique URL after you register and set up your email once there. In this way, you can then replace your email with a unique token at the “action” form, which is given by the formspree settings of your project. Details: help.formspree.io/hc/en-us/articles/360056076314
So now it’s working.
