Workflow Short – Position Forms at Y=Top, X=Center

The two settings Workflow provides for the position of your forms is handled here:

2015-01-12_18-33-25

When the checkbox is selected, your form turns out like this:

2015-01-12_18-32-03

being both centered vertically as well as horizontally.

If the checkbox is unchecked, your form ends up in the corner:

2015-01-12_18-36-01

In many of my forms, the UI flowed much better if the form were actually centered horizontally, but topped-out vertically.

2015-01-12_18-41-25

To achieve this effect, leave this box checked:

2015-01-12_18-42-34

Then, we’ll add a bit of CSS to the page by adding an IncludeHTML component.  Use a Merge Text component to build the CSS ahead of the form, like so:

2015-01-12_18-43-40

The guts of the Merge Text component:

2015-01-12_18-44-31

And the IncludeHTML component on the form designer:

2015-01-12_18-45-02

That should do it.  At runtime, the form should be centered as expected.


Featured Components

IncludeHTML

Merge Text


Further Reading

CSS and Workflow


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s