Make a form-builder with the tech functions already built in PHP, Bootstrap & Javascript more beautiful and easy to use design-wise by rearranging layout primarily and some slight alterations of functions

Make the design and layout of the Form Builder more beatiful

BACKGROUND

We have a Marketing tool called Otto that should get an updated form-builder since the current is too rudimentary and doesn't fit with the new bootstrap layout of Otto.

One developer has made a terrific job in setting up all the technical functions in PHP & javascript needed to make it technically work already also for the most advanced functionality. Unfortunately, he is not available to carry on the job by rearranging where everything appears etc in order to make it more user-friendly, though, so this will be your job.

PURPOSE

The purpose of the current task is to use the developed code that works and make it as easy as possible for both a NEWBIE user and a more advanced user to get started with the webform, and that they'll find all the most common functions in an as intuitive way as possible.

Therefore, it's likely important to "hide" the more advanced features like loading and editing previous forms and css and seeing source, embed-codes etc behind other tabs, but also some of the not-mandatory settings like ref, width, height etc.

The only "new" functionality (slight changes from the current working functions) is that:

* the page should likely auto-build the form preview using onBlur or similar rather than the current click of a button to build it, sincee it would be more user-friendly

* instead of just one image to the right, the user should be able to upload also another image to the top (if you're familiar with the MoxieCode filemanager, we have it implemented elsewhere in the system, and you could use that, OR, you can just make a copy of the current functionality for ONE image to the right.

* There are going to be two drop-downs (sequence and sender chooser) that we will fill with info from our database, so you just need to make the design for these two.

* One of these dropdowns (sequences) will have a slightly different handling if the user chooses multiple options under advanced mode, see further instructions further down).

* You will likely make a copy of the current function to save the form to a repository to also save it to another repository to make it useful also as a landing-page including adding basic header information according to the spec below.

See the attached jpg and .txt full spec.

CSS JavaScript PHP

Nº del proyecto: #5974880

Sobre el proyecto