A form that looks like a different website makes people pause. The page and the form should feel like one screen. Stripe and Cognito both warn that a frame can block your styles or fight your layout. A clean form embed is a design job and a code job.
This guide is general education. It is not legal advice. Stripe says payment pages must follow card-security rules. Those rules sit apart from how the form looks.
Key Takeaways
- Nielsen Norman Group says what people see before they scroll gets far more attention than what sits below. Amy Schade's 2015 article puts the average gap at 84 percent. A form on landing page needs a reason to scroll if it starts lower.
- Cognito Forms says its forms scale to the device. If your site does not, the responsive form embed will not either. Use the public link or make the page flexible.
- Stripe renders embedded Checkout in a frame it owns. Your page CSS does not cross that frame. Branding settings do. Do not put that Checkout inside a second frame.
- NN/g cites a 2014 study: 78 percent of people submitted a guideline-compliant form with no errors on the first try. The share was 42 percent when the form broke the guidelines.
- Cut fields before you style the frame. NN/g says each field you remove raises the conversion rate. It cut one of its own forms from 6 fields to 2.
Table of Contents
Put the form where the decision happens
The fold is the line of the screen before a scroll. Schade writes that the line moves with the device. A responsive page can have several folds. People scroll when the top of the page promises more. They do not scroll out of habit. A big empty hero with no hint of the form below can act as a false floor. People think the page has ended.
NN/g’s eyetracking set had 57453 fixations. The 100 pixels above the fold were viewed 102 percent more than the 100 pixels below it. A Google ad study that Schade cites found 73 percent viewability above the fold and 44 percent below it. Viewability there means half the ad’s pixels were on screen for one second. The drop from above to below was 66 percent. Schade averages that 66 percent with the 102 percent look-rate gap and calls the result 84 percent. Treat the first screen with care. A lower form can be seen. People look at it less.
A website lead form can sit in the content or at the top. NN/g’s article on gating says to show enough value before you ask for a name or an email. A list of tips can stay public. The last critical tip can sit behind the form. A landing page can tell people they are in the right place and set the expectation. Locking your best page behind a form can hurt search. NN/g says that trade is real.
Keep the ask short. NN/g says studies find higher conversion on shorter forms and that a single email question is a low-risk start. Ask for what you can use now. Leave out curiosity. You can ask a new question on the next visit. That is progressive profiling in that article. After they trust you with an email, send what they need. Do not fill the inbox with what you wish they wanted.
A website contact form and an embed survey on site follow the same placement rule. If the person came to talk or to answer, the form can lead. If they came to learn, show the point first. Then show the form.
The practical way to embed form on website pages is to paste the publish code into the HTML where that decision happens. Website form embedding fails when the frame and the page disagree on width.
Let the page and the frame share one width
Cognito says a coding clash between the form and the site can stop the form from loading. When a seamless embed fails, switch to the responsive iframe. The sample iframe sets the border to 0 and the width to 100 percent. It sets a height as well. Cognito’s sample uses 1035. A fixed height can clip a long form or leave a tall empty band. Check the live page. Do not trust the sample number.
Cognito says the form itself scales to phones and desktops. The page has to scale with it. If the site is a fixed width, the embed stays stuck. Cognito’s advice is to make the site responsive or to place the public link on the page in place of the embed. A link is plainer. It leaves your layout alone.
If the form is hidden when the page first loads, Cognito measures the width before the form is visible. A tab or a popup that appears after a click is the case it names. Call Cognito.resize() when the form becomes visible. Otherwise the size can jump after the form appears.
Two Cognito forms can share a page. Give each iframe its own id. Style and prefill scripts then point at that id. Cognito can prefill a name or a phone or an email from JSON under the embed code. Use that when you know the person. Do not prefill a field you hope they will confirm by accident.
Stripe’s embedded Checkout lives in an iframe. The frame sends card data to Stripe over HTTPS. Load Stripe.js from js.stripe.com. Do not bundle that script or host a copy. Stripe says that keeps card data off your server. Do not place Checkout inside another iframe. Some payment methods must redirect to another page to confirm. A frame inside a frame can block that redirect.
Match the look without painting over the frame
Stripe’s appearance docs say the embedded form sits in a Stripe-owned iframe on js.stripe.com. The browser’s same-origin rule blocks your stylesheets and CSS variables and component styles. They do not change the form. Set colors and type in the Dashboard branding settings or with the branding settings on the Checkout Session.
Cognito gives you a bridge. After the iframe and its script, a setCss call can pass rules into the frame. Cognito says to keep that CSS on one line. You can point setCss at a stylesheet URL as well. A button color is the example in its iframe guide. You can style two forms by calling setCss on each iframe id.
Cognito’s Publish tab is the other path. Upload a logo. Change fonts. Change the color of text and buttons and backgrounds. The site’s CSS can drive the form when you use the seamless embed. If that clash breaks the page, go back to the iframe.
NN/g’s homepage guidelines say high contrast keeps type readable. Limit the number of font styles. Text that looks like a graphic gets skipped because people treat it as an ad. Jakob Nielsen’s homepage guidelines warn that horizontal scrolling hides content. People miss the scrollbar. A form wider than the phone is that failure. A form design website match is shared type and shared color and a width that fits.
Stripe’s embedded-form docs describe two layouts. Expanded is one step and sits on the page. Compact is a shorter multi-step layout for a modal or a popup or a chat. Compact was in private preview when that page was written. If you leave the layout unset, Stripe says it renders the layout it judges best for conversion. It does not publish the test behind that choice.
Design the fields people complete
Kathryn Whitenton’s 1 May 2016 NN/g article is the practical checklist. The best layout depends on length and context and the data. Start here. Leave a rule when you have a reason.
Keep it short. Whitenton quotes Pascal: “I have made this longer than usual because I have not had time to make it shorter.” Drop a field you can derive or collect on the next visit or leave out. NN/g cut one form from 6 fields to 2. Whitenton says each cut raises the conversion rate. A 2014 CHI paper by Seckler and colleagues that NN/g cites found the 78 percent and 42 percent first-try gap. Compliant forms took less time to finish.
Group the label with the field. Put the label above the field on a phone and on a shorter desktop form. Put it beside the field on a very long desktop form. Do not leave a label the same distance from two fields. Add the label attribute for screen readers. Two topics mean two groups. Tag the groups for screen readers.
Use one column. A second column breaks the downward path. City and state and postal code can share a row because they are short and related. Test the Tab key so the keyboard follows that order.
Follow a familiar sequence. Card number then expiration then security code. List the common choice first when you can.
Skip placeholder text as the label. NN/g says placeholders cause problems even though they look tidy. Cognito lets you override placeholder text and error text in the embed. Use a real label. Use the override for an error sentence people can understand.
Size the box to the answer. Among 2130 people at an NN/g conference, city names ran from 3 characters to 22. 99.9 percent were 19 characters or shorter. A tiny box hides the entry and invites mistakes. For 2 or 3 options, use radio buttons. A dropdown costs an extra tap.
Mark the rare optional field. Cut optional fields first. If one or two remain, label them optional. Do not make people discover the rule by failing the submit.
Show the format before the error. Password rules that appear after a failure set people up to miss. Say the rule next to the field. Accept a phone number without forcing parentheses.
Do not offer Clear or Reset. People hit it by mistake and lose the form. For financial data, a Cancel button can wipe the entry for someone who wants to leave. Make Cancel much quieter than Submit. NN/g’s TSA example put Clear closer to the fields than the real action. Proximity pulled the mis-click.
Make errors obvious and specific. Color is not enough. Outline the field and use red text and a heavier weight. Keep what they typed. Say what is wrong.
That checklist is form conversion website work. The frame can be beautiful and the form can fail these tests.
Know whether this embed is the one that converts
Stripe’s Checkout Session can take an integration identifier. Stripe says to use it so you can measure this embed apart from your other Checkout setups. A popup and a full-page checkout are different products. A blended rate will hide which one people finish.
Cognito will not show a form outside the dates you set under public links. An unverified account email blocks publishing. A browser Cognito does not support will fail as well. Check those before you blame the theme. If the site and the embed clash after the iframe switch, Cognito says to file a help request.
A page you can ship this week
- Decide the job. Contact or lead or payment or survey. Write the one outcome on the page near the form.
- Cut the form to the fields you will use now. Label what remains. One column. No Clear button.
- Place the form where the first screen either shows it or shows why the scroll is worth it.
- For a payment embed, use Stripe’s placeholder and branding settings. Do not nest a second iframe. Do not host Stripe.js yourself.
- For a Cognito embed, start with the iframe at full width if the seamless code clashes. Pass button and type colors with setCss on one line, or set them in Publish.
- Open the page on a phone. If the site is fixed-width, use the public link until the page can shrink.
- If the form starts hidden, resize it when it appears.
- Submit once with a good entry and once with a bad entry. Confirm the error stays next to the field and the other answers remain.
You can build the form and place it on the page with Jotform. The page layout and the field list stay your work.
Pitfalls
Your CSS does not reach a Stripe frame. The same-origin rule blocks it. Use branding settings.
The iframe height is the sample number. Cognito’s 1035 can clip your form. Look at the real page.
The site is a fixed width. Cognito says the embed will not become responsive on its own. Fix the page or use the link.
Checkout sits inside another frame. Stripe says some payment methods must leave the page to confirm.
You styled the button and left the extra fields. NN/g’s case for conversion is the cut.
Placeholder text stands in for the label. NN/g says to avoid that pattern. Put a label above the field.
Clear sits next to Submit. People wipe the form.
The form is in a closed tab at load. Cognito may measure the wrong width. Call resize when it opens.
Availability dates or an unverified email hide the form. That is a Cognito publish rule, not a theme bug.
You gate the whole article. NN/g says people need proof before they trade an email, and search can suffer if the useful page is locked.
Trade-offs
Embed versus a public link. An embed keeps people on your page. A link is Cognito’s fallback when the site cannot flex. The link is a second visual system. The embed can break if the frames fight. Pick the link until the page is responsive. Then embed.
Seamless code versus an iframe. Cognito’s seamless path can share the site’s CSS. It can clash. The iframe is the compatibility option. You style it through setCss or Publish, not by hoping the theme leaks in.
Stripe branding versus a custom form. You give up page-level CSS. You keep card data off your server and you keep redirect-based payment methods working. A hand-built card field on your own HTML is a different security job. Stripe tells you not to take that data onto your server.
Top of the page versus after the story. The fold research says the first screen wins attention. The gating article says a cold ask with no proof gets a weaker yes. Show the offer and the form in the first screen when they arrived to make a request. Show the proof and then the form when the visit is a first look.
One email versus a full profile. NN/g says a single email is a low-risk start and that extra questions belong on the next visit. You learn less today. You keep more people. A quote form may need the city and the service. Those fields earn their place. A newsletter box does not need a phone number.
What you do next
Open the page on your phone and on a laptop. Confirm the form fits and the button color matches the site. Submit a test entry. Break one field and read the error.
If you want the form hosted and linked from the page, Jotform can hold it. The first screen and the field list stay yours to decide.
