Creating a user login form for your product or app without writing code yourself could be tricky. You might have a developer do it, taking them away from other projects… or you could put Mason to work.

Mason is a feature-building platform on which teams can collaborate to design, build, and deploy frontend features without needing a developer to write code.

We’ll show you how easy it is to design, build, and deploy a login form inside the Mason platform. You’ll have the benefit of written instructions and a video tutorial to take you through the process.

Mason

First, we’ll tell you what a front-end-as-a-service is all about, and how Mason uses it to help your workflow progress at lightning speed.

  • Mason is a design/build/deploy platform that enables you to produce fully functional front-end software solutions without writing code.
  • Since it enables you to create and manage front-end experiences in your codebase, you can transition from design to deploying a live feature in mere minutes – cutting, days, weeks, and even months from your work schedule.

Three major steps are involved:

1. Start by selecting a design component or series of components

As an example, you could build a single user login form, or create an entire flow that includes social authentication, “Forgot Password”, and more.

2. Design the product inside the Mason platform

Select a template or build your own. Either way, you can customize it down to the pixel level.

3. Connect your endpoints and you’re ready to go.

Grab 5 minutes of your developer’s time to drop in the proper endpoints. Export your feature and drop it into your existing codebase with a single line of code. Hit “Publish”, and you’re live.

How to Create Your Login Form Without Writing Code

If you’d like to watch the step-by-step tutorial, hit Play, sit back and enjoy the ride.

If you feel written instructions to double-check what you viewed in the tutorial would be helpful – read on.

We’ll be using 2 tools on the Mason platform to create a user login form:

  1. Mason Builder
  2. Mason Canvas

Mason Builder enables you to create frontend website or app features and connect them to an existing backend. These features can be customized to align with your website or app style or brand.

Mason

Note that every change you make on a feature you’ve created automatically translates to valid HTML/CSS code, just as if you wrote the code by hand – except you won’t need to bother about having to debug it.

Mason Canvas is a virtual whiteboard where you can visualize and construct your front-end feature without having to write code or hand over your design to a developer.

Mason

With these two tools at your fingertips you’re ready to go to work following these step-by-step instructions as your guide.

Step 1. Shape Your Login Form

Upon logging into your account you’ll see a “+New Feature” button. Click on it and you’ll be presented with a number of options.

  • Click on “Canvas”.
  • +New Feature → Canvas
Mason

Locate the “Elements” tab on your left. Clicking on it takes you to the “Forms” section, where you can select a form and drag and drop it into the Mason Canvas Container.

Elements → Forms → drag-and-drop form from Canvas

Mason

Next, click on the white space surrounding the form to select the Container. A bar will appear on the right hand side.

Important: At this point you want to make certain the height is set to 100%.

You’re on a roll! 3 clicks to go to shape your login form.

  • Select the “Data” input from inside your form.
  • Click on the “Clone” tab that appears on top of it. This allows you to add as many input fields as you need.
  • Note the bar on the right side (it appears when you select the “Data” input).
  • Toggle to the “Attributes” bar tab, and select the input type you need for each input field (text, URL, number, etc.)
  • Data → Clone → add input fields
  • Data → Attributes → select type of input for each input field
Mason

Step 2. Customize Your Login Form

Note: This is ridiculously easy.

  • Select your form again.
  • Go to the sidebar to style your form. You can change colors, edit borders, change the size or background and make other changes as well.
  • Once you have a style you like, move on to the “Submit” button – which you can also customize if you’re in the mood.
  • Satisfied with what you’ve done? Hit “Publish” and “Save” to save your work.

Step 3: Make Your Form Fully Functional.

You’re not quite done yet, but almost. You need to go to “Configure”,select “Datasources” and fill in your API endpoint. This is where your developer probably comes in; they can help with this part quickly.

Note: Your Application Programming Interface (API) endpoint is a web address that allows uses to access your application (i.e., log in).

  • Datasources → fill in API Endpoint
Mason
  • Next, go to the Form section and select the “Post” submission method.
  • All you need to do now is hit Publish and click the Preview button to see if everything is ok.
  • Form section → Post → Publish → Preview

Step 4: Test Your Form

You’ve done an excellent job of building your user login form. It would be embarrassing however if it didn’t work. Let’s test it.

Do this by checking the network request in Chrome’s developer tools.

Go to “Inspect—Network” where you can see the requests the browser is making. Then, it’s simply a matter of filling in a few testing credentials to verify your form is working correctly.

We bet it is.

Other Projects Mason can Do & Why You Should Give It a Try

Mason

There are plenty of other things besides building fully-functional user login forms that Mason can do that don’t require coding and will save you time and give real-time results.

Mason lets you create functional frontend UI components in minutes instead of months. That won’t put you out of work. It will simply allow you to complete a ton of projects in the time it used to take you to do one.

For example:

  • You’ll amaze your clients by delivering functional solutions with lightning speed.
  • You won’t be tied to a single project for weeks or months.
  • The features you create will always adhere to brand style guides, because when your style changes, you just edit your feature inside the builder, hit Publish, and see your changes immediately.

Best of all, Mason promotes teamwork and collaboration through its visual interface – it’s designed for team use, giving them a new way of building and managing front end designs. Mason’s visual interface is especially valuable when you need quick feedback from project stakeholders.

No more waiting for the next deployment cycle. Any authorized user can log into Mason and make a change with no downtime.

Interested in improving your team’s productivity by 10X (or more)? Click here for more info. Mason is open and it’s free to get started.

Full Disclosure: This article is sponsored by Mason.