Form creation application: how to differentiate the "save form" button from the "submit button" in the form

Question

I have a web application for creating forms.

Currently, the create form interface looks like so:

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

The interface is designed so that what the user sees while creating the form would be what the user of the form sees. The form that is being designed here will be used within the application by users.

There are a few consistencies across the whole application:

• All submit buttons are styled in a consistent manner and are aligned to the left of the form.
• All form fields are styled in a consistent manner as well.

Problem: Since submit buttons are styled in a consistent manner, the "submit" and "save form" buttons would be styled the same way. The form submit button needs to be there so that users can customize the submit button's text.

What can be done to differentiate those buttons while maintaining consistency across the whole application? There should be no ambiguity so that users will not mistake the "form submits" button with the "save form" button.

Answer 1

If I understand you correct, this is a form builder where the submit button is part of the form. If that's the case, I would group the form in a container which would effectively separate the form building activity from the save activity.

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

I would also group the "Add a new field" section of its own with a label text input and a drop down of field input type. The label input would be where you add your "Some field" text and the drop down control would let you select (1) text input, (2) Drop down input, (3) check box list input, (4) radio button input and a (5) date time picker. More controls could be added if you need them.

When the user selects which input type to use, the view changes to display the options (if there are any) and editable text input labels for the controls different options.

I would also align the submit button to the other controls and not their label. It makes readability easier for the user of the form.

To save the complete form, I would use two buttons; Save and Cancel. But this is optional and their are different meanings of wheather a cancel button do any good on a web form. But my reason for having it refers to the accepted answer of the question Is a cancel button necessary in a windows form.

But the main part is to group the form builder into one container.

Answer 2

Since both the buttons looks the same, it will be a mistake to place them next to each other.

Best thing to do is to create explicit, even obvious spatial partition between form zone and form editing zone. Use background color to make distinction even more obvious: