Embedded Form Alignment and Other Formatting Tips

Embedded forms allow Formsite form owners to display forms in their own sites, which creates a more integrated and seamless user experience. The embed code offers variables for sizing the form, prePopulating the embedded form, and various other settings. Embedded form alignment can be tricky, however, and some style settings in the host site may be needed.

The most common way of embedding forms displays the form in the main content area on the host site. The form’s width is set to 100% and the host site’s code sets the container’s position.

Sometimes the form owner wants to display the form smaller, aligned differently, or in a smaller container on the host site. Therefore, custom CSS changes the alignment and position of the form’s container.

Embed Forms

Every form can be accessed by its form link found on the Share page. Embedding forms uses the unique code found on each form’s Share -> Embed Code page. The form owner selects and copies the entire code, then pastes into the code of the host site.

If the form owner uses a site builder like WordPress or Wix, that code may be in a widget or some other code item as part of the site. Aligning items using a site builder typically requires using the tools provided, similar to a document editor like Microsoft Word.

If the form owner has access to the host site’s HTML code, the embed code works by pasting directly into the HTML code.

Embedded Form Alignment

Choosing where to embed the form in the code can be tricky. Most importantly, the embedding container must not have a specified height setting — including ‘auto’.

We recommend setting the form’s Style -> Form Width to 100%, then use the host site to size and align the embedding container.

Center aligned embedded form: 

<div style="width:100%;max-width:900px;margin-left:auto;margin-right:auto;">*embed code*</div>

Left aligned embedded form:

<div style="width:350px;float:left;">*embed code*</div>

Right aligned embedded form: 

<div style="width:25%;min-width:300px;float:right;">*embed code*</div>

Feel free to modify the specific widths to customize the container as needed. Learn more about styling and positioning with CSS at https://www.w3schools.com/css/default.asp.