Sign Up Form with PyQt Style Sheets

In this tutorial, we will create a sign up form using PyQt style sheets. PyQt is a set of Python bindings for the Qt application framework and it allows us to create desktop applications with a rich user interface.

Step 1: Set up your development environment

Before we start creating the sign up form, make sure you have PyQt installed on your system. You can install PyQt using pip:

pip install PyQt5

You will also need a code editor to write your Python code. I recommend using Visual Studio Code or PyCharm.

Step 2: Create a new Python file

Create a new Python file and import the necessary modules:

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLineEdit, QLabel, QVBoxLayout

Step 3: Create the sign up form

Create a class called SignUpForm that inherits from QWidget. Inside this class, create the UI elements for the sign up form using QVBoxLayout:

class SignUpForm(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("Sign Up Form")
        self.setGeometry(100, 100, 400, 300)

        layout = QVBoxLayout()

        self.username = QLineEdit()
        self.username.setPlaceholderText("Username")
        layout.addWidget(self.username)

        self.password = QLineEdit()
        self.password.setPlaceholderText("Password")
        self.password.setEchoMode(QLineEdit.Password)
        layout.addWidget(self.password)

        self.confirm_password = QLineEdit()
        self.confirm_password.setPlaceholderText("Confirm Password")
        self.confirm_password.setEchoMode(QLineEdit.Password)
        layout.addWidget(self.confirm_password)

        self.sign_up_button = QPushButton("Sign Up")
        layout.addWidget(self.sign_up_button)

        self.setLayout(layout)

Step 4: Apply style sheets to the sign up form

Now that we have created the sign up form, let’s apply style sheets to customize its appearance. Style sheets in PyQt are similar to CSS and can be used to define the visual properties of UI elements.

Add the following code inside the SignUpForm class to apply style sheets:

self.setStyleSheet("""
    QWidget {
        background-color: #f0f0f0;
        color: #333;
    }

    QLineEdit {
        border: 1px solid #ccc;
        padding: 5px;
        margin-bottom: 10px;
    }

    QPushButton {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
    }

    QPushButton:hover {
        background-color: #0056b3;
        cursor: pointer;
    }
""")

Step 5: Run the sign up form

To run the sign up form, create an instance of the SignUpForm class and show it using the QApplication:

if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = SignUpForm()
    form.show()
    sys.exit(app.exec_())

Now you can run your Python file and see the sign up form with customized styling. Feel free to experiment with different style properties to customize the appearance of the form further.