Should form elements work in a form creation application?

Question

I am building a part of an application where users will be able to create and edit existing forms:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The submit button is for demonstration purposes. Add a new field creates a new field in a new row.

Users can drag the fields to rearrange them vertically.

Currently, clicking a field or the row it is contained in would open a small panel to edit that field. I have also made textfields unfocusable and readonly as it is obvious without any interaction what the field is suppose to do.

Should the same be done to dropdowns, checkboxes and radio buttons?

Answer 1

The other types of inputs should not be interactive aswell. It's important to keep things consistent so that the user is not confused when different form elements act differently.

A good source of inspiration might be how you used Balsamiq to create to create the form mockup in the first place - see how well that process works and think if your application needs to do things differently for any reason, or if you can do it better.

Answer 2

I assume you won't allow the user to add a new disabled field?

Otherwise it may be a case of writing some JavaScript to prevent all fields from being interactive, while at the same time appearing as they would for end-users (users who will be actually using the form).

Answer 3

Yes the form should behave be exactly like it would when deployed just add a fun, seamless message like "The form is not active yet. Finish building the form first!" when the user clicks the submit button of the form.

After he clicks 'Done' you can send him to a second page and have him confirm the layout of the form and go back if he wants to make changes to it.