Connecting sign up form with e-mail

JavaScript
1

Hi

I watched a good video, where the guy created a signup-form: https://www.youtube.com/watch?v=GAOBXGPuKqo

I liked the look and I am trying to create a similar version, but more like a “subscribe for new posts-form”. But now I have done everything in that video and I don’t know how to connect it to an e-mail.

What I want is that when a new visitor, subscribes and signs up for new posts, their e-mail gets sent to my e-mail, or to a file in the text editor perhaps? So I can then keep store of these subscribers on my e-mail-list. But how to establish this connection? So that subscribers will receive notice every time a new post is published on the blog?

This is the form in HTML:

<div class="login-page">
    <div class="form">
        <form class="register-form">
            <input type="text" placeholder="user name">
            <input type="text" placeholder="password">
            <input type="text" placeholder="email id">
            <button>Create</button>
            <p class="message">Already Registered? <a href="#">Login</a></p>
        </form>

        <form class="login-form">
        <input type="text" placeholder="user name"/>
        <input type="password" placeholder="password"/>
        <button>login</button>
        <p class="message">Not Registered?<a href="#">Register</a> </p>
        </form>
    </div>
    <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>

 <script>
$('.message a').click(function(){
$('form').animate({height:"toggle", opacity:"toggle"}, "slow");
});
 </script>

The CSS code looks like this:

body {
    background-image: url(pick anyone :) ), linear-gradient(blue, white);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.login-page {
width: 360px;
padding: 10% 0 0;
margin: auto;
}

.form{
    position: relative;
    z-index: 1;
    background: rgba(7, 40, 195, 0.8);
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
}
.form input{
    font-family: "roboto", sans-serif;
    outline: 1;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

.form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #4caf50;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.form button:hover, .form-button:active {
    background: #43A047;
    }

    .form .message {
        margin: 15px;
        color: aliceblue;
        font-size: 12px;
    }
    .form .message a {
       color: #4caf50;
       text-decoration: none;
    }

    .form .register-form {
        display: none;
    }
2

You need a backend language to store that email into a database.

Try PHP and MariaDB. It’s free.

1 Like
3

Yeah thanks. Any good tutorials or code examples on how to do this?

Would be nice if I could just keep on going with the code above and then establish the link on top of that.

1 Like
4

Hello @O.w. If you don’t know PHP & MYSQL, this will be too hard to create. But, try this:

Remember, if you’re going to implement this in a live site, I would recommend you not to do it. That’s because input forms are the main target for hackers and they can write special commands and hack your website’s database (SQL Injection). So, after learning PHP & MYQL, you will understand the necessary actions to take when creating these types of forms.

Hope you understand.

5

You’d first have to understand that this doesn’t just require adding a few more lines of code to your existing page (and why). If you want your login form to actually send an email to you, it’ll need an “action” attribute. That attribute will point to a file on the server. In many cases, that’s a PHP file containing a script that reads the content of the form data, and then performs some tasks (like sending an email). You don’t need a database for that, but the PHP script can’t be executed by the browser, it’ll have to be on the server.
Are you talking about a web page that is already online or about a page that’s only living on your hard drive at the moment?

6

Hmm ok. I had no idea about that.

I mean a majority of people, who is running a Wordpress-site, is probably using some type of input form. Either a plugin or a form created by themselves.

But these forms are great targets for hackers you say? But when learning PHP and SQL necessary defense mechanisms are learnt?

1 Like
7

I want to try to create it on a website, that I am playing around with first, in Visual Studio, which is not live right now. But I also plan to implement it on a live website, which is running on Wordpress, in time. But first I want to read more about the aspects of PHP and SQL ,which I have to know, to be able to build the a solid form, which can fend off attackers. If you know any tutorial in particular, where I can read more about this, I would appreciate the input :+1:.

I plan on reading up on PHP and SQL during the process.

8

PHP uses sql commands to perform Database operations, and therefore vulnerable if proper care is not taken while writing the code.
You can learn PHP and MySQL on WA4E… I can’t say it’s best, but I’m suggesting this because I’ve tried it and it’s absolutely free.

9

WP form plugins are created by experts who know PHP & SQL very well. They take necessary actions to defend attackers.

Yes. Of course. Input fields are like a heaven to hackers. They can write special SQL commands in the input fields by wrapping them around backticks and they can either destroy your database completely or can view your database.

When you’re learning PHP & SQL, you will learn popular defense mechanisms (prepared statements, hashed passwords, etc.).

If you’re just a beginner and knows HTML, CSS only, practice by making static sites which are not functional, on your computer.

Please only implement that form in a live site after you take necessary validations for the form. If you want this to be in WP, then that would be too hard. That’s because WP doesn’t allow you to put PHP code in pages and posts.

That’s a good point, but start from the basics of PHP. If you haven’t learnt JavaScript, please learn it first. Don’t jump right into creating a form with PHP.

If you want to learn PHP, then freeCodeCamp’s YouTube channel has one:

SQL course:

Good luck!

10

Hi again

About those videos. Are there any other videos where this guy is doing these courses on a Mac?
I think this guy is great but he is on Windows, and I am not. Thing is it is kind of a headache to go through the video and having to figure out how everything that he does works on a Mac. So if someone knows a very good tutorial with this guy(or someone else) which goes through all the basics of PHP and SQL, and thereby making you an able noob-coder in these languages, it would be great. I am a noob- but I am not totally green. Therefore I want to go through basics but also venture into a bit more advanced stuff for these two languages.