Simple Form Builder Web App using PHP and jQuery with Source Code

Introduction

This is a simple PHP and jQuery Project that allow the users to create a dynamic form. This project is was inspired and works such as Google Forms though this web app has only the basic feature of the said existing application. This project can be used to conduct surveys, online job application forms, and etc.

About the Web Application

This Simple Form Builder Web App has the CRUD (Create, Read, Update, and Delete) Operation for the form. In creating the form, the user can set the form title, description, multiple questions, and a specific type of choice for the answers to questions. This form builder handles 4 different types of input fields for the type of answers/choices which are the paragraph, file input/upload, checkboxes(multiple choice / can select more than 1 in the choices), and radio button (can select only 1 in the choices). After the form has made, the system will provide a link of the form which can the creator/author of the form can share to gather responses. The web application also stores the responses of the users who answered/filled up the form.

Features

• Create Form
• View Form
• Update Form
• Delete Form
• View the list of Responses
• View the user Response
• Downloadable link for the file uploaded

The Form Builder Web App was Developed using the following

• PHP
• jQuery
• Ajax
• Bootstrap

Images

Create Form Page

Form View

Response View

The source code is free to download and was made for educational purposes only. You may download the source code below and modify it the way you wanted.

How to Run

Requirements

• Download and Install any local web server such as XAMPP/WAMP. ( PHP version should be at least 7+ )
• Download the provided source code zip file. (download button is located below)

Installation/Setup

1. Extract the downloaded source code zip file.
2. Open your XAMPP/WAMP's Control Panel and start Apache and MySQL.
3. Copy/Paste the source code folder in your htdocs directory if you are using XAMPP and www directory if you are using WAMP.
4. Locate the SQL the file inside the database directory in the extracted source code folder. The file is known as form_builder_db.sql
5. Open a browser and browse the PHPMyAdmin. http://localhost/phpmyadmin
6. Create new database naming form_builder_db and import the provided SQL file.
7. Browse the Form Builder Web App. i.e. http://localhost/form_builder

DEMO

That's it! You can now explore the features and functionalities of this Simple Form Builder Web Application that was developed using PHP and jQuery. I hope this will help you with what you are looking for and for your future Web/PHP Projects.

Explore more on this website for more Free Source Codes and Tutorials.

Enjoy Coding :))