Please Help: Advice on how to collect email's from my sign up form on my website?
I am currently trying to create my database and then link it to my website to collect the user's emails when they put it into the input box. The problem is I've never built anything with PHP or MySQL and I need to finish eh website by Thursday! Is there any easy way to collect the emails that my user enters into the input box on the website? Something like excel or the sort.
Or any type of tutorial end-to-end setting up would be awesome.
Or any products from ProductHunt and beyond, but it cant be like MailChimp because I want the user to enter their email right into the input box I have created.
Also, it needs to be free, im 15 and need the rest of my money to incorporate. Also, I'm using HTML, CSS, and JavaScript for the webpage.
Thanks alot!!
For a quick implementation I combine Wordpress with Mautic.
Takes me about 2 hours and that includes the landing page setup.
Here is an example https://cryptolucidity.com/
Wordpress for the Content/Landing page, Mautic for the Marketing automation.
In Mautic you can create forms which populate 'segments' allowing you to segment your lists.
Thank you so much!
Are you up and running? If not I can help you this weekend if you are interested.
Co-founder here we would love the help pete... how coudl you help us?
We get on a google meet and discuss to determine if you just need some guidance, I need to do it for you or somewhere in between.
I am not a contractor, consultant... so this is not a paid gig :)
That would be perfect Pete, thanks for helping us.
Ok sounds great, here is my email alexruben1268@gmail.com, when would you like to do it? (By the way, as I am in school I am available from 3:35 to about 4:45
This is just my opinion, consider searching on StackOverflow/getting help on forums like reddit
If your home website has a public facing IP then you should be able to use it. Public facing doesn't have to mean renting a static IP, though without renting the static IP, I remember fiddling around with how to make a home-hosted website be public facing.
edit: public facing means if you used say your cellphone (not connected to your home WiFi) you can view your website hosted on your home computer from your phone's network.
Renting a VPS to throw your site on isn't expensive. It's possible you could do this for free too if there is no db/scripting (except JavaScript as that's client side). A little VPS from OVH for example runs at or under $4/mo and even less if you buy in bulk eg. a year(I think it's $40/yr if you're new). But that requires setting it up before you can just dump your html/css/js code into the public folder eg. something like /var/www/html
Check out other options like Firebase I think I heard that's potentially free.
If you haven't used it yet, you can use AWS servers (and other services) for free for a year and you can rent an EC2 server and pick an image. Though this also requires some know-how to setup/get running as well.
Possibly the easiest thing to do if wanting to just dump your code somewhere public is to rent economy hosting from GoDaddy and use cPanel/file manager.
Maybe even simpler to modify an existing platform like WordPress/SquareSpace. Put your code into a page/post and use that. Then buy a domain, point it to that subdomain (I'm presuming).
About the actual question of interfacing a form with a post request.
I wrote this little pastebin thing you can look at, shows how to do it with plain javascript and jQuery (cleaner but requires an include script)
So pretty much you'd have a url that receives a POST request and you send the parameters (form fields) to that URL and the server side scripting (PHP/or others) would receive the parameters and insert them into a db for you. I can't see Basin's endpoint but this is a generic pattern:
basic html form example
https://pastebin.com/eCwitpxs
the js code that grabs the values from the form above and makes a post request to some endpoint (showed jQuery and non-jQuery method)
https://pastebin.com/y0Jzuanr
You know actually a simple thing you can consider is to send the form data as a Slack Webhook, this would send the form data as a JSON string into Slack and you could store data that way haha. If you have a Slack team configured, you'd create a channel and setup a webhook for that channel to receive the JSON string.
Actually off hand can't recall if you can make that call without using PHP/CURL (the method I used), also used Python. Probably can.
Ahh nice someone made a gist using jQuery
https://gist.github.com/achavez/9767499
The slack approach is not ideal I realize regarding grouping data, just a thought for storage/ready-built endpoint.
I use this method myself (for my own little projects) because I can't build mobile apps
Good luck
edit: oh yeah... completely missed the part about being free haha. Definitely consider the AWS EC2 instances then as that's a free server instance (for a year) that you can install anything on (like a Full LAMP stack) some of them are pre-configured I believe. But then the problem is you still need to know how to use PHP/MySQL. If you had money, (even less than $100) you could potentially consider hiring somebody on outsourcing sites to build it for you, it's not hard to do .
Hey, how exactly do i get the code to work... currently i have added the url needed but im having two problems. 1) dont know what to put in the place= var text = // Text to post.. also hwo do i link this to my form? shoudl i wrap it in a function tat is called when the form is submited. ie. button is clicked?
Oh you're talking about that Gist. Yeah. Assuming you have a slack webhook url (you have to create a channel and enable slack webhook on this channel) it should look something like:
https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX
Visit the url below while logged into your Slack account to set it up.
https://slack.com/signin?redir=%2Fservices%2Fnew%2Fincoming-webhook
What you put in the
var text =would be the email address + other data submitted by the user that you grab, but you have to concatenate them together (join) into one string.In the pastebin example I provided above (second one). I show you how to specify/select form fields using the id. Since you're using jQuery it would be something like:
(for example this could be part of your form)
<input type="text" name="email" id="email-field">(this is how you get the value from this input upon submit with jQuery)
let emailAddr = $('#email-field').val();Then you add that to the var = text by doing:
text += 'email: ' + emailAddr;If you just want to grab the email, then that is enough.
Then you call that function (so you yeah you would wrap this whole process in a function to call or the click button handler)
Here's the new pastebin that goes through that process, complete from form-field selection, to submit button binding, to calling the slack call. I'll test this myself to make sure it works.
https://pastebin.com/5N6i4WmM
I tested it locally on my computer, it works.
Again this method is not really advisable but it is a way to get it done. But definitely not scalable/could get annoying to organize/manually grab the emails from slack.
Though Slack does have JSON export
edit: remember to include jQuery in your
<head></head>section of your site. You can host it on your server or just use the link I used which is hosted by jQuery.You can pretty much just copy this code, but make sure the id's match (the email field and submit button);
Also put this code after the html (
<body></body>) tags because that has to exist first, before this JS can run (the html/DOM won't exist yet) unless you wrap it in a document.ready function.Thanks for the reply. I have not tested it yet as i don't have my code with me, but I imagine that i will have the following problem... I have a, onSubmit() function on my button already that verify the users email... should i include this jquery code withing the function? or should I should i write it in a separate function and then call the function within the if statements that verify the users email? Additionally I believe that the if statement will only execute either the verification or the function. Given this what would you advise? Is there a way where i can include another else if to run the function and wrap the whole thing in a while loop? if so how would that work?
Yeah hard to tell without your code. Just a quick google search perhaps your onSubmit call is in the top of a <form> tag? Like this:
<form onsubmit="myFunction()">If so, and from the context of your response. You'd put the slack $.post code from above after the verification. In the "okay" section where it's not an error (invalid value or something).
You'd just add it to the end of the function that already exists (myFunction()). You can put the entire
$.post('...command in there. It should execute top-to-bottom if there are no errors.So assuming the
<form...example above is close to what you have.Your function might be:
Don't forget to include jQuery in your <head></head> tags as you can't use it if it's not there.
I again want to remind you that this is not a great solution/long term.
I got an error saying invalid payload
Is there any way you can share code? If you don't want it to be public we can private message or something.
It sounds like you may not be sending a string rather possibly an object or something.
You could check what you're sending before hand using:
It should say string
Also where are you seeing this error message? The browser's console log?
Sure I can share the code, here is my code https://codepen.io/alexRamirezBlonski/pen/yvexgQ
Again can't reply.
Good to hear.
I can't reply to your most recent comment.
Here it is fixed. This one does run.
A couple of things, you didn't have jQuery included in your code.
Also your sendToSlack() does nothing in your previous call because you're not passing the email to the sendToSlack() function as a parameter or referencing it globally from inside the sendToSlack() function.
I also don't know where you got this slack code from.
At any rate, this one works.
https://codepen.io/anon/pen/EQPdWZ
Remember you need an actual slack webhook enabled. See the slack url.
If you're trying to use usebasin I don't know about that service. I'm trying to help you with slack.
include this line just before your closing </head> tag
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
You do actually have a slack team setup right? And then you enabled a channel as a webhook endpoint?
I'm looking at your code/will test it against my own webhook endpoint url.
I would have responded sooner but I just got this email from indiehackers.
Edit: oh I realize you're still trying to use usebasin. I can't advise on that as I don't know how they work(what their endpoint parameters request like does it need your key) but I realize your url is special (assigned to your account).
But I'll help you get your code running to be able to insert into Slack.
It worked! Thanks for the help :) Much apreciated
Its fine, I appreciate the help
Thank you
thanks for the in-depth comment. I appreciate it.
I will definitely try sending the data to slack, it sounds liek its not too hard .
Yeah it's probably not the best solution. Here's an example of what you could be looking at (I use a channel for my home camera system telling me it uploaded a photo to S3)
@ad_hero 's response to you sounds like the route that is probably more appropriate for you. Sounds pretty straight forward.
usebasin.com
If it's one time thing you need done in 5 mins, they just become the form processor so "the post" goes to them and they collect the email address and name and return the user to your thankyou page.
hey does this work with jut a regular website made with html, css, and js on my local computer... or does it require that the website be live? secondly, Could you give me a quick runthrough of how i would create it? I read on your site that i just add a specific action to my form but is it really that easy?
100% just a html line or two pasted in the right order. Easy as pie works on local webpages (restricted to one form name only!). I didn't get the optional website analytics to work (didn't try hard) but the form processor works great - I literally spent 5 minutes adding email capture to my basic static website (which was deployed for free with http://surge.sh)
ahhh... these dotted lines, IndieHackers, could you consider adding a hover effect that shows the poster's icon on it where you mouse is? haha.... for super long posts like mine.
My original post is moved, sorry @entrepreneurs, though I did respond to your question about further info, this applies to both of you (Op and your comment here) so I posted it as a separate comment.
Thank you, I will check it out!
You're in luck! You can refer here: https://blog.webjeda.com/google-form-customize/
or here: https://github.com/dwyl/html-form-send-email-via-google-script-without-server
Thank you for this!
Can you explain more in deep, what the problem with MailChimp is?
Is it because you want to style it as you want? because that is an option with MailChimp. Look here for more info https://kb.mailchimp.com/lists/signup-forms/css-hooks-for-customizing-forms
No, the problem is that fi you use MailChimp, the user will get redirected to them to complete the form. I want the user to complete it on our super easy email input box and looking at our well-designed graphics. Thanky you for commenting though :)
This comment was deleted 9 years ago