Web development - Portal Creation - Form creation

Project: FORMS

This project will involve updating our current form system and creating a portal where customers can view all outstanding orders that are personalized. They will be able to personalize their items from this portal, and additionally approve and view them.

FIRST STEP: PORTAL

The portal will look like this (on PC):

http://worldsafar.co.uk/form2018/PORTAL3.png

The portal will look like this (on mobile):

http://worldsafar.co.uk/form2018/PORTAL-MOBILE1.png


The majority of the backend development will be done in-house by our development team. However your work should achieve the following (along with the frame work and implementation of design):

- A customer goes to portal page
- Portal page checks 8 digit code contained in unique customer URL against an external database – example:
www.lordfox.com/12345678
- The external database will reference what forms and amount of forms should be populated for the customer to complete (there will be other forms that are not referenced in this project that will have to be populated in the same way – this project should be expandable and allow us to plug in some of our older forms that do not require any development due to this).
- input function() -> decodes previously made JSON variable -> form is filled in from data
- The form is able to save information for the customer to review, approve and edit.
- When the data is complete – logs this onto external data base and output function() -> encodes all forms inputs into JSON variable, callback to the function our team will add

Additional features:

1 )
- The input of form function will change from “customize” (editable) to either “Preview” or “Review” (based on product) after 30 minutes (this time frame should be editable) – multiple orders are contained within the same order, this countdown will begin once all forms have been completed.

“Review” state will have a different function which will be discussed later.
“Preview”, these forms will not be editable.

As you can see from the interface example, depending on what state the order is in – will change information displayed below it. For example “Review” state will have:

“Click review to see a preview of your product for approval Your item will not be dispatched until it’s approved”

2 )
- Admin control – Being able to completely erase the information completed in a form and return the form to the original state of “customize”. Being able to edit details of a completed form in any state.

3 )
The titles – section “Item - title generated by SKU from external database” – This will do what it states. The “Product image” next to it will also be generated from this database.

4 )
The top left hand section of the page will hold a series of generic videos and/or images.

5 )
The bottom section of the page will contain general information. This information should change when you click on the appropriate links – T&C, Shipping, etc.

6)
All forms should be mobile compatible – with the preview at top and the entry fields below

SECOND STEP: FORMS



There are 4 forms that will be created. Forms consist of the following -

- Text input
- Image upload (and manipulation)
- Optional drop down boxes
- A mix of all of the above

The forms should open and overlay the background as shown in the examples below.

The forms will consist of previews for some products. Where the customer can see how their final product will look.

The forms will also contain a section “How to customize my product” and a button “VIDEO” – a video viewer should pop open and be easily closable. We will create the videos in-house.


PLEASE SEE THE ATTACHED DOCUMENT FOR THE FULL SPEC AND THE FORM INFORMATION -THIS MUST BE READ BEFORE PLACING YOUR INTEREST IN THE ROLE