Dynamic Form Builder - WordPress Plugin

A professional WordPress plugin with MVC architecture, following SOLID principles, featuring dynamic form creation, submissions management, and comprehensive testing.

Features

• ✅ Dynamic Form Builder: Admin can create/edit/delete forms with customizable fields
• ✅ Custom Database Tables: Separate tables for forms and submissions
• ✅ MVC Architecture: Clean separation of concerns
• ✅ SOLID Principles: Interface-based design, dependency injection
• ✅ Autoloading: PSR-4 compliant autoloader
• ✅ JSON Storage: Flexible field configuration storage
• ✅ Frontend Display: Shortcode-based form rendering
• ✅ AJAX Submissions: Smooth user experience
• ✅ Comprehensive Tests: Unit and integration tests included

Installation

1. Plugin Installation

# Upload the plugin folder to wp-content/plugins/
# OR
# Install via WordPress admin: Plugins > Add New > Upload Plugin

2. Activate Plugin

# Via WP-CLI
wp plugin activate dynamic-form-builder

# OR via WordPress Admin
# Plugins > Dynamic Form Builder > Activate

3. Database Tables

Tables are created automatically on plugin activation:

• wp_dfb_forms - Stores form configurations
• wp_dfb_submissions - Stores form submissions

File Structure

dynamic-form-builder/
├── dynamic-form-builder.php      # Main plugin file
├── includes/
│   ├── Bootstrap.php              # Plugin bootstrap
│   ├── Interfaces/
│   │   ├── ModelInterface.php     # Model interface
│   │   └── ControllerInterface.php # Controller interface
│   ├── Database/
│   │   └── Schema.php             # Database schema management
│   ├── Models/
│   │   ├── FormModel.php          # Form data model
│   │   └── SubmissionModel.php    # Submission data model
│   ├── Controllers/
│   │   ├── AdminController.php    # Admin panel logic
│   │   └── FrontendController.php # Frontend form logic
│   └── Views/
│       ├── Admin/
│       │   ├── FormBuilder.php    # Form builder UI
│       │   └── SubmissionList.php # Submissions list UI
│       └── Frontend/
│           └── FormDisplay.php    # Frontend form display
├── assets/
│   ├── css/
│   │   ├── admin.css              # Admin styles
│   │   └── frontend.css           # Frontend styles
│   └── js/
│       ├── admin.js               # Admin JavaScript
│       └── frontend.js            # Frontend JavaScript
├── tests/
│   ├── bootstrap.php              # PHPUnit bootstrap
│   ├── Unit/
│   │   ├── FormModelTest.php      # Form model tests
│   │   └── SubmissionModelTest.php # Submission model tests
│   └── Integration/
│       └── FormSubmissionTest.php # Integration tests
├── composer.json                   # Composer configuration
└── phpunit.xml                     # PHPUnit configuration

Usage

Admin Panel

1. Create a Form

1. Navigate to Form Builder in WordPress admin menu
2. Click Create/Edit Form section
3. Enter form name
4. Click Add Field to add form fields
5. Configure each field:
   • Field Label: Display name
   • Field Name: Internal identifier (use lowercase, no spaces)
   • Field Type: text, email, tel, textarea, select, number, date
   • Required: Check if field is mandatory
6. Click Save Form
7. Copy the generated shortcode: [dfb_form id="X"]

2. View Submissions

1. Navigate to Form Builder > Submissions
2. View all form submissions with:
   • Form name
   • Submitted data
   • IP address
   • Timestamp
3. Delete individual submissions as needed

Frontend Display

Add the shortcode to any page or post:

[dfb_form id="1"]

Replace 1 with your actual form ID.

Architecture

MVC Pattern

Models (Models/)

• Handle data operations (CRUD)
• Implement ModelInterface
• Interact with database
• Example: FormModel, SubmissionModel

Views (Views/)

• Display HTML templates
• Separate admin and frontend views
• No business logic
• Example: FormBuilder.php, FormDisplay.php

Controllers (Controllers/)

• Handle user requests
• Coordinate between Models and Views
• Implement ControllerInterface
• Example: AdminController, FrontendController

SOLID Principles

Single Responsibility

Each class has one job:

• FormModel - Form data operations
• SubmissionModel - Submission data operations
• Schema - Database schema management

Open/Closed Principle

Classes are open for extension, closed for modification:

• Interface-based design allows new implementations
• Models implement ModelInterface

Liskov Substitution

Any implementation of ModelInterface can replace another without breaking functionality.

Interface Segregation

Small, focused interfaces:

• ModelInterface - Data operations
• ControllerInterface - Controller initialization

Dependency Inversion

High-level modules depend on abstractions (interfaces), not concrete implementations.

Testing

Setup Test Environment

# Install dependencies
composer install

# Install WordPress test suite
bash bin/install-wp-tests.sh wordpress_test root '' localhost latest

# Create bin/install-wp-tests.sh if not exists
# Download from: https://raw.githubusercontent.com/wp-cli/scaffold-command/master/templates/install-wp-tests.sh

Run Tests

# Run all tests
vendor/bin/phpunit

# Run only unit tests
vendor/bin/phpunit --testsuite unit

# Run only integration tests
vendor/bin/phpunit --testsuite integration

# Run with coverage
vendor/bin/phpunit --coverage-html coverage/

Test Coverage

Unit Tests (tests/Unit/)

• FormModelTest.php - 8 tests covering all FormModel methods
• SubmissionModelTest.php - 7 tests covering all SubmissionModel methods

Integration Tests (tests/Integration/)

• FormSubmissionTest.php - 4 tests covering complete workflows

Sample Test Cases

// Unit Test Example
public function test_save_creates_new_form() {
    $form_data = [
        'form_name' => 'Test Form',
        'form_fields' => [
            ['name' => 'email', 'label' => 'Email', 'type' => 'email']
        ]
    ];

    $form_id = $this->form_model->save($form_data);
    $this->assertGreaterThan(0, $form_id);
}

// Integration Test Example
public function test_complete_form_submission_workflow() {
    // Create form -> Submit data -> Verify storage
    $form_id = $this->form_model->save([...]);
    $submission_id = $this->submission_model->save([...]);
    $this->assertGreaterThan(0, $submission_id);
}

API Reference

Models

FormModel

// Create a form
$form_id = $form_model->save([
    'form_name' => 'Contact Form',
    'form_fields' => [
        ['name' => 'email', 'label' => 'Email', 'type' => 'email', 'required' => true]
    ]
]);

// Get a form
$form = $form_model->find($form_id);

// Get all forms
$forms = $form_model->findAll();

// Get active forms only
$active_forms = $form_model->get_active_forms();

// Update a form
$form_model->update($form_id, ['form_name' => 'Updated Name']);

// Delete a form
$form_model->delete($form_id);

SubmissionModel

// Create a submission
$submission_id = $submission_model->save([
    'form_id' => 1,
    'submission_data' => ['email' => 'user@example.com'],
    'user_ip' => '192.168.1.1'
]);

// Get a submission
$submission = $submission_model->find($submission_id);

// Get all submissions
$submissions = $submission_model->findAll();

// Get submissions by form ID
$form_submissions = $submission_model->get_by_form_id($form_id);

// Delete a submission
$submission_model->delete($submission_id);

AJAX Endpoints

Admin AJAX Actions

// Save form
wp.ajax.post('dfb_save_form', {
    nonce: dfbAdmin.nonce,
    form_id: 0,
    form_name: 'My Form',
    form_fields: JSON.stringify([...])
});

// Get form
wp.ajax.post('dfb_get_form', {
    nonce: dfbAdmin.nonce,
    form_id: 1
});

// Delete form
wp.ajax.post('dfb_delete_form', {
    nonce: dfbAdmin.nonce,
    form_id: 1
});

Frontend AJAX Actions

// Submit form
jQuery.ajax({
    url: dfbFrontend.ajaxUrl,
    method: 'POST',
    data: {
        action: 'dfb_submit_form',
        nonce: dfbFrontend.nonce,
        form_id: 1,
        form_data: {email: 'user@example.com'}
    }
});

Security Features

• ✅ Nonce verification on all AJAX requests
• ✅ Capability checks (manage_options for admin)
• ✅ Input sanitization (sanitize_text_field, sanitize_key)
• ✅ Output escaping (esc_html, esc_attr)
• ✅ SQL injection prevention (prepared statements)
• ✅ XSS protection (wp_kses, escaping)

Database Schema

Forms Table (wp_dfb_forms)

Submissions Table (wp_dfb_submissions)

Extending the Plugin

Add Custom Field Type

1. Update assets/js/admin.js - Add field type to dropdown
2. Update includes/Views/Frontend/FormDisplay.php - Add rendering logic
3. Update validation in FrontendController.php if needed

Add Custom Validation

// In FrontendController::ajax_submit_form()
foreach ($form['form_fields'] as $field) {
    if ($field['type'] === 'email') {
        if (!is_email($sanitized_data[$field['name']])) {
            wp_send_json_error(['message' => 'Invalid email']);
        }
    }
}

Add Email Notifications

// In FrontendController::ajax_submit_form(), after save
$admin_email = get_option('admin_email');
wp_mail($admin_email, 'New Form Submission', 
    print_r($sanitized_data, true));

Troubleshooting

Forms not saving

• Check database permissions
• Verify AJAX URL in browser console
• Check PHP error logs

Shortcode not displaying

• Verify form ID is correct
• Check form status is 'active'
• Ensure plugin is activated

Tests failing

• Verify WordPress test suite is installed
• Check database credentials in wp-tests-config.php
• Run composer install to get dependencies

Contributing

1. Fork the repository
2. Create feature branch: git checkout -b feature/new-feature
3. Write tests for new functionality
4. Ensure all tests pass: vendor/bin/phpunit
5. Commit changes: git commit -am 'Add new feature'
6. Push to branch: git push origin feature/new-feature
7. Submit pull request

Support

For issues and questions:

• GitHub Issues: dynamic-form-builder/issues
• Email: binny.gautam@gmail.com

Changelog

1.0.0 (2025-01-22)

• Initial release
• MVC architecture implementation
• Dynamic form builder
• AJAX submissions
• Comprehensive test coverage
• SOLID principles compliance