Design and Preview Modes
The Form Studio workspace has two modes of operation:

This is the default mode and is used to design your forms and allows you to add items to a page and configure them. In this mode, the different sections of a page, Header, Body and Footer, are indicated by the use of dotted line borders around each section.
You can hide the Header and Footer sections, if you prefer, e.g. to be able to see more of the Body section whilst creating or editing a form. To hide or reshow Headers and Footers use the Show Headers and Footers button on the Ribbon's View tab or the Headers/Footers check box in the Show group on the Home tab.

If you turn Design Mode OFF, the form runs in Preview Mode. In this mode the form runs within the browser without the design features being available. You can use Preview Mode to check some aspects of how your form will perform when running in a user's browser. For example, the form is displayed without the design overlays (the dotted line borders) and you can test enabling, disabling, showing and hiding fields on your form. Page navigation doesn't work in this mode, and Datasource actions won't be performed so you won't see data read in from a database or be able to submit the form. Nor can you edit the Elements on the page, you will need to turn Design Mode back ON to continue editing the form.

You can switch between the two modes using the Design Mode option in the Editor group on the Ribbon's Home or Developer tab. Select the option to work in Design Mode and deselect the option to work in Preview Mode.