Cognito Forms logo

How do I center an embedded form?

Thursday, July 21, 2016 10:01:00 AM

To center your embedded form on your webpage:

Iframe

1. Start by copying your form's Iframe embed code from the Publish page in your builder.

2. Underneath the embed code, add a short script block that allows you to pass through your own CSS. 

<iframe src="https://services.cognitoforms.com/f/yourform?id=1" style="position:relative;width:1px;min-width:100%;*width:100%;" frameborder="0" scrolling="yes" seamless="seamless" height="552" width="100%"></iframe>
<script src="https://services.cognitoforms.com/scripts/embed.js"></script>
<script>
Cognito.setCss('.c-forms-form { margin: 0 auto; }');
</script>

3. This CSS snippet will center your form on your webpage:

Seamless

1. Start by copying your form's Seamless embed code from the Publish page in your builder.
‚Äč

2. Paste your embed code into your website's HTML. Then, insert the following code into your style sheet, or within a <style> block on the page:

.cognito .c-forms-form{margin:0 auto;}

3.  This CSS snippet will center your form on your webpage.

Printable View