OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 bindex.php	5.85 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 createForm.php	4.21 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 function.php	1.11 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 index.php	5.67 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 save-form.php	2.13 KB	05/19/2025 10:07:19 AM	rw-r--r--

Editing: createForm.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form Builder</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        .container {
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
        }
        .form-builder, .form-preview {
            width: 45%;
        }
        .form-builder input {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <div id="step-1">
            <h1 class="text-center mb-4">Dynamic Form Builder</h1>
            <h3 class="text-center">What do you want to build?</h3>
            <form id="form-type-form" onsubmit="startCustomForm(event)">
                <div class="mb-3">
                    <input type="text" id="form-type" name="formType" class="form-control" placeholder="Enter form type (e.g., Registration Form)" required>
                </div>
                <button type="submit" class="btn btn-primary mt-3">Next</button>
            </form>
        </div>

<div id="step-2" class="form-builder d-none">
            <h1 class="text-center mb-4">Dynamic Form Builder</h1>
            <h3>Enter form attributes:</h3>
            <form id="field-form">
                <div class="mb-3">
                    <input type="text" id="field-name" class="form-control" placeholder="Field Name" required>
                </div>
                <div class="mb-3">
                    <input type="text" id="field-type" class="form-control" placeholder="Field Type (text, email, password, etc.)" required>
                </div>
                <button type="button" class="btn btn-success mt-3" onclick="addField()">Add Field</button>
            </form>
        </div>

<div class="form-preview">
            <h3>Preview of Your Form:</h3>
            <form id="generated-form">
                
            </form>
        </div>
    </div>

// Step 1: Capture the form type input and move to next step
        function startCustomForm(event) {
            event.preventDefault();
            formType = document.getElementById('form-type').value;
            // Hide step 1 and show step 2
            document.getElementById('step-1').classList.add('d-none');
            document.getElementById('step-2').classList.remove('d-none');
        }

// Function to add a new field based on user input
        function addField() {
            const fieldName = document.getElementById('field-name').value;
            const fieldType = document.getElementById('field-type').value;

if (!fieldName || !fieldType) {
                alert("Please enter both field name and field type.");
                return;
            }

// Create the field label and input based on user input
            let label = document.createElement('label');
            label.textContent = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
            label.classList.add('form-label');

let input = document.createElement('input');
            input.type = fieldType;  // Use the user-specified type
            input.name = fieldName;
            input.classList.add('form-control');
            input.placeholder = `Enter your ${fieldName}`;

let formGroup = document.createElement('div');
            formGroup.classList.add('mb-3');
            formGroup.appendChild(label);
            formGroup.appendChild(input);

// Append the new field to the generated form on the right side
            document.getElementById('generated-form').appendChild(formGroup);

// Clear input fields for next entry
            document.getElementById('field-name').value = '';
            document.getElementById('field-type').value = '';
        }
    </script>
</body>
</html>