How to create a login form to request a one-time login code?

I’m building a real estate website and I’m working right now on the user login page form. This is necessary so that the user can view documents that are specific to him.

I am working on the visual side now and will add the technical part later.

Can anyone help me figure out where to start to build something like these.

For those of us who don’t speak German:

Code anfordern = Request code
Code bestatigen = Confirm code
Email oder SMS = E-mailaddress or SMS

I’m sorry that I didn’t think to translate this .

It’s basically just using CSS as per normal and you would use techniques such as flexbox to help lay it out.

I’m not going to build it for you but I do have an old demo that I quickly adapted which will show some of the techniques that you will need.

Note that my original demo was actually about creating labels as moving placeholders so the code is quite advanced in places when referring to the actions of these labels. However I would suggest that instead you place the labels in their final position to begin with and the code would be simpler.

You will need to have a go yourself and then if you get stuck put up a codepen of what you have and where you ar having trouble :slight_smile:

Of course, when I don’t need someone to build something for me, I just want some insight on where to start and that’s it.
I have made simple login forms using PHP.
I simply need such a form that I indicated, because I am currently working on the creation of a real estate page and the user wants such a login form, so I am looking at how it can be created.

But thanks, I’ll take a closer look later.

1 Like

I have a question…
I need to create another such form, but what to enter for the received code…
Would it be correct to create two separate files? I mean one form on one page and another on the other or should it be put on one?

If you are talking about what you receive ‘server side’ then that’s not really a css html question as such but you would of course need to be able to identify the data you receive and I guess that would be via your form submission or from the form values. The html could be the same but I guess you would need to change the values unless you are collecting exactly the same data I suppose.

You may need to post a specific question about this in the relevant forum category for the system you are using to receive data. (I don’t get involved in server side code so its not my strongpoint).

To build a user login page for your real estate website, start by designing a visually appealing and user-friendly layout that aligns with your site’s branding. Then, create the front end using HTML and CSS to structure and style the page, making it responsive for different devices.
On the back end, develop code (using languages like PHP, Python, or Node.js) to handle user logins and securely store their information in a database. Prioritize security with HTTPS, password encryption, and protection against common web threats. Test the login page thoroughly, deploy it to a web server, gather user feedback through testing, and ensure compliance with privacy regulations. Following these steps will result in a functional and secure login page for your real estate website.
Hope this will resolve your issue.

I did so. At first, I created the visual with html and css and now I’m working on the login form. I use php for the backend because I understand it better and have used it more.

Thank you

This I understand, I use php for this purpose.