PyQt5 - Simple Registration Form

In this article, I will demonstrate to you how we can create a simple and attractive registration form using PyQt5.

Introduction

 
PyQt5 Registration Form is a simple Sign Up form for Python GUI applications. It contains a list of fields for getting various information from customers. Then, it controls the applications in a sophisticated and secure way to provide subscriptions and other program plans for users.
 
Requirement
 
PyQt5 – Qt Designer
 

Steps to be followed

 
Step 1 - Create a New Form
 
In this Qt Designer Environment, we can choose the “Dialog without button” template. It will continue the form without having any widgets or new plain form.
 
 
 
Step 2 - Change Form background
 
After opening the new form, we can change the form background by following the below instructions.
  • Go to Properties >> stylesheet
  • Edit Style sheet >> Add color >> Background color
 
 
After choosing the “background-color” option, the available color palate will show with the HTML code.  
  • Select color >> OK.
 
In the Edit Stylesheet editor, our desired color code will be generated. If we want to modify anything on that manually, that’s also available there.
  • Verify and click “Ok”.
 
Now, our desired colored form will display like below image.
 
 
 
Step 3 - Setup User image
 
Creating label (QLabel) for add image
 
Let’s create a new label for displaying an image on the form. Choose the “label” under Display widgets and drag-drop on the Form (QDialog).

Under “properties”, we need to click on “style sheet”. Then the Edit style sheet window will appear, click on “Add resource” and choose “background-image”.
 
 
 
Adding new Resource
 
In PyQt5, the Qt designer requires a Resource file for fetching and displaying an image on the form. After choosing background-image option, we need to follow the below instructions to find resource file and display on the form.
  • Select Resources >> Edit resources (pencil icon).
  • Edit Resources >> New resource file.
  • Import Resource File >> resource.qrc >> open.
 
After successfully importing Resource file at Edit Resource window, let’s move on to creating a new prefix process.
  • Edit Resources >> resource.qrc >> add prefix (I will give name as “newPrefix”) >> Add Files>> user.png >> Open

 
 
After adding an image with the corresponding resource file, the Edit style sheet editor will show you a few lines of  code.

 
Now, we successfully added an image to the QLabel box. Given below

 
 
Step 4 - Creating Frame (QFrame)
 
Under containers, click on “Frame” widget to drag and drop on the QDialog. Then click on “stylesheet” under properties to choose a color for how your frame looks attractive.
 
 
 
Step 5 - Creating QLabel (Label) for giving form name
 
Under Display Widgets, choose “Label” to drag and drop on the Frame then change the name as “Create an account” by Font property.
 
 
 
In the Edit style Sheet from properties, to change the Font color by doing a few steps. Given below
  • Edit style Sheet >> Add color >> color >> pic screen color >> Ok
 
 
Step 6 - Creating Line Edits
 
In this Registration form, we will need to create some list of fields for gathering customer information. By the way,  I create four Line edits as one by one, under Input Widgets choose “Line Edit” to drag and drop on the frame.
 
 
 
Step 7 - Creating Radio Button
 
Let’s create a Radio Button for customers who will accept the agreements by doing a single click. Choose “Radio Button” under Buttons Widget to place on the form area.
 
 
 
Step 8 - Creating Push Button
 
Now, we create a “Push Button” for submitting the above-collected information to the server or our local system. Under “Buttons” Widgets, choose “Push Button” to drag and drop on the same Form.
 
 
 
Step 9 - Giving a name for Widgets
 
As I desired, we created four Line Edits and one Radio Button as well as Push Button; then let’s give a name for them according to their process.
 
Here we need to give a name for the Line Edits that should look like hidden words.  Therefore, we will use the “place holder text property” for achieving that. Then the password Line Edit we will also give a feature for hiding passwords while getting input from users. In the password Line Edit, Click on the eco mode under the QLineEdit property to change the “Password” mode.
  • QLineEdit    = User Name
  • QLineEdit     = Password
  • QLineEdit     = Retype password
  • QLineEdit    = Email
 
  
Under properties, click “Font” to customize the Radio Button and Push Button words.
  • QRadio Button     = Accept the Terms and Conditions
  • QPushButton    = Sign Up
 
 
Step 10 - Changing Widgets Background
 
In similar step 2, to hold the cursor on the require widgets follow the instruction given below.
  • Properties >> stylesheet >> Edit Style Sheet >> Add color >> Background-color >> Select screen color>> Ok
 
Step 11 - Save and Preview
 
Now, we almost did the registration form, so let’s move to save the project. Go to the File which is at the top right side of the Qt Designer Environment and click save.


Now, the time to preview our project.
  • Form >> Preview

Finally, we test our Registration form. Given below
 
 

Summary

 
In this article, we learned how to create a simple and attractive registration form by using Qt Designer. I hope you understood this very well. If you have any difficulties while doing the above,  please leave a comment below.