https://github.com/arslanramay/laravel-livewire-multistep-forms
Laravel Livewire Multi-Step User Onboarding Form
https://github.com/arslanramay/laravel-livewire-multistep-forms
laravel livewire3 mysql php
Last synced: about 2 months ago
JSON representation
Laravel Livewire Multi-Step User Onboarding Form
- Host: GitHub
- URL: https://github.com/arslanramay/laravel-livewire-multistep-forms
- Owner: arslanramay
- Created: 2024-11-25T13:48:37.000Z (6 months ago)
- Default Branch: dev
- Last Pushed: 2024-12-09T09:22:52.000Z (5 months ago)
- Last Synced: 2025-02-08T19:16:58.053Z (3 months ago)
- Topics: laravel, livewire3, mysql, php
- Language: PHP
- Homepage:
- Size: 139 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Laravel Livewire Multi-Step User Onboarding Form Application
A Laravel Livewire-based multi-step form application for collecting user subscription details. This application supports both **Free** and **Premium** subscription types, guiding users through multiple steps to collect Personal Details, Address Details, and Payment Details (for Premium users).
## Project Overview
### Tech Stack
This project uses the following technologies:
- PHP 8
- MySQL
- Laravel 11
- Livewire 3
This project is designed to demonstrate a clean implementation of a multi-step user registration form with dynamic navigation and validation on each step. The following steps are included:
1. **Personal Details**
- Name, Email, Phone, and Subscription Type selection.
2. **Address Details**
- Address Line 1, Address Line 2, City, State, Postal Code, Country.
3. **Payment Details(Credit Card)** (for Premium subscription only)
- Card Number, Expiry Date, CVV.
4. **Confirmation**
- Displays all the user-submitted details for review before final submission.
## Key Features
- Dynamic step navigation.
- Step-specific validation.
- Secure handling of sensitive user data (e.g., masking payment details).
- Organized code structure using Livewire components.
- Proper relationships between database models.
- Validation rules for Email address and credit card details.
- Encrypted credit card details stored in the database.
## Main Files
### Livewire Components
1. **Subscriberform**: Handles the multi-step form logic and data submission.
- File Path: `app/Livewire/Subscriberform.php`
### Blade Views
1. **Multi-step Form View**: Renders the multi-step form UI.
- File Path: `resources/views/livewire/subscriberform.blade.php`
2. **Subscribers List View**: Displays a list of submitted subscribers.
- File Path: `resources/views/subscribers-list.blade.php`
### Models
1. **Subscriber**: Represents a user in the subscription system.
- File Path: `app/Models/Subscriber.php`
2. **Address**: Stores user address details.
- File Path: `app/Models/Address.php`
3. **Payment**: Stores user payment details for Premium subscriptions.
- File Path: `app/Models/Payment.php`
## Project Setup Instructions
To set up this Laravel project locally, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://github.com/arslanramay/streamplus-multistep-forms.git
cd streamplus-multistep-forms
```
2. **Install Dependencies**:
```bash
composer install
npm install
npm run dev
```
3. **Set Up Environment Variables**:
- Copy `.env.example` to `.env`.
```bash
cp .env.example .env
```
- Configure database credentials and other necessary settings in the `.env` file.
4. **Generate Application Key**:
```bash
php artisan key:generate
```
5. **Run Migrations**:
```bash
php artisan migrate
```
6. **Start the Development Server**:
```bash
php artisan serve
```
7. **Access the Application**:
- Open your browser and navigate to `http://127.0.0.1:8000`.
8. **Testing the Application**:
- Complete the multi-step form for Free and Premium subscriptions.
- After submission, verify the data on the **Subscribers List** page by navigating to `/subscribers-list`.
## Usage
- Start by selecting a subscription type (Free or Premium) in Step 1.
- Fill in the required details for each step.
- For Premium subscriptions, enter payment details in Step 3.
- Review all information on the Confirmation page (Step 4) before submitting.
- Successfully submitted data will be stored in the database and displayed on the **Subscribers List** page.
## License
This project is open-source and available under the [MIT License](https://opensource.org/licenses/MIT). Developed by [Arslan Ramay](https://github.com/arslanramay)
---
For any issues or questions, feel free to reach out or create an issue on the GitHub repository.