CarpeMessaging
Request early access

Help · Content

How a form looks

How it looks

Style shows how anything you pick in the form looks right now, in the numbers your shop is actually drawing. Each card governs one thing — Text, Block, Placement, and Focus outline and Hover where they apply — and the Block card reads a block's whole look at a glance.

Style is the second half of the editor. Pick anything in the form and it shows what that thing looks like right now — never an empty box where a real value is, and never a word standing in for a number. A field that says 10 and 12 for its padding is a field with ten pixels above and twelve at the side, because that is what your shop is drawing today.

The pane is a stack of named cards, top to bottom, and everything that governs one thing sits in one card under that thing's name: Text · Focus outline · Block · Placement, and Hover on a button. A card a block has no use for is simply not there.

The Block card is one line per setting: Background, Border, Corners, Shadow, Box, Padding and Margin. Each line says what it is set to before you open it — None or Color · #fbf5ec, 1 px solid · #e6d6c4, 8 px, Soft, 100% · no minimum height, 16 top and bottom, 24 left and right — so you can read a block's whole look at a glance. Click a line to open its controls in place, and click it again to close it; open as many as you like. It is the same card the email editor draws for a block, so the two editors work the same way. On a panel the card is called Panel, and on the teaser Teaser. Words have no border or shadow, so their card has five lines.

Text. Every heading, paragraph, label and button carries a Size, a Line height, an Alignment, a Text color and a Typeface — in that order, the order the email editor's Text card uses — and then what a form adds: a Text weight, italics, an All capitals switch and Letter spacing. Line height and letter spacing are offered only on words that can run to a second line. The first font in the list is your store's own, named for what it is — Helvetica (default) — the one your theme already uses, so a form looks like the shop it opens on, and it costs your page nothing at all.

Under it are the ones we serve ourselves, drawn in themselves so you can see them before you choose: Inter, Montserrat and Nunito for something plain and modern, Playfair Display, Lora and Cormorant Garamond where you want serifs. They come from our servers, not from a font service, so nobody else learns who visited your shop — and a form only fetches the ones it actually uses, while it is waiting to open, so it is already there when it appears.

Sixteen pixels is where a field starts, and going below it is your call. Set a field or a button smaller than that and the editor tells you what happens: on iPhone, Safari zooms the page in when someone taps a field smaller than 16px, your form jumps, and part of it ends up off-screen. Most of the people who visit your store are on mobile. It is a warning and not a wall — you can publish it — but that is the trade you are making.

Background, Border, Corners, Shadow, Box — the first five lines of the Block card. Behind anything you can put a color, an image or a gradient. A gradient is an angle and two or three colors, each with a place on the line; an image behind a box can fill the frame, fit inside it, or be left at its natural size. Around it goes a Border — a width, which kind of line, and a Border color — and Corners, one number for all four or a different number on each, which is how you round the top of an image and leave the bottom square. Under it goes a Shadow: soft, medium, strong, or the exact numbers if your brand has a particular one. Box is the last of them: Opacity fades the whole thing, and Minimum height is the shortest it may ever be drawn.

Padding and margin. These are the two questions people usually mean when they say "spacing", and this is the difference: Padding is the space inside, between a block's own edge and what it holds, so it moves the words away from the border and the background around them. Margin is the space outside, between that block's edge and whatever is next to it, so it is how you give one row room underneath without moving anything else. Both take one number for all four sides or a number per side, and the small link between them says which sides move together. A third one, Gap, lives on a box and spaces everything inside it evenly — reach for that when it is all of them you want moved, and for Margin when it is one. They are the same two words the email editor uses, and they mean the same two things there.

Placement. Where a box sits in the row or column that holds it (Box alignment), how much of that row it takes (Width), how far apart the things inside it sit (Gap), how those are spread along it (Distribute), and whether it reaches past the form's own edge (Edge to edge). Where an answer cannot change anything — the tallest block in a row cannot be moved up or down, and a row that has already shared its columns out decides their widths itself — the control is still there, disabled, with the reason behind the i beside its name.

Edge to edge. A box — or an image — sitting directly in the form can reach past the form's own padding and run to the edge, and to the top or the bottom when it is the first or the last thing in the form. That is how you get a band of color across the top, a photograph with no gap around it, or a footer strip. It is offered only on things that sit at that level, because that is the only place it can mean anything.

It has its own answer on mobile. Switch the preview to On mobile and enable it there and it is on for mobile alone — an image beside the words on desktop, a band across the top on mobile, from one form. See Edge to edge on mobile only, under Making it look right on mobile below.

Images. An image's frame is landscape or square, and there is no tall one, because a tall image pushes your button off the bottom of a mobile screen. A border and rounded corners are drawn on the image itself, and the corners cut it — so the padding on an image block sits outside that frame, between the image and the block's own edge, with the block's background behind it. Choose whether the image is cropped to fill that frame, fitted inside it, or left at its own shape — and when it is cropped, say which part to keep, so a face is never the bit that gets cut off.

Natural size removes the frame, so while it is chosen the Aspect ratio control is shown disabled with the reason beside it. An image left at its own shape has no frame to be landscape or square, and a control that looks like a choice while changing nothing is worse than one that says why it cannot.

Words over an image you build by putting an image behind a box and placing your words inside it, or by starting from Image behind the words. The Tint — a color laid over the image, on the image block's own card — is what keeps words readable over a busy photograph.

Fields and buttons. A field carries its own background, border, corners and padding, plus a Placeholder color for the hint inside it. Both a field and a button carry a Focus outline card — the outline that shows where somebody using a keyboard has got to. That outline cannot be disabled — you choose its color and nothing more, because it is the only way somebody using a keyboard can see where they are. A button adds a Hover card — a Button color, a Text color and a Border for when the pointer is over it — and a choice between running the full width of the form and fitting its own words.

The shape it takes, and how it closes

Format is four cards. Form is where you say what the form is on your storefront — Popup, Corner card, Bar, Full screen, or Embedded — how wide it is, and how it behaves. It is one question with one answer, and it is not about who sees the form — that is Shown to. Dim behind the form, Close button and Teaser are the three below it.

The dim behind it. A popup and a full-screen form darken the page behind them, which is what makes them read as something to answer rather than something beside the shop. You choose the color and how strong it is: 20 is barely there, 80 is heavy. A corner card, a bar and an embedded form do not dim anything, because they never took the page over.

One height on every panel. A form that grows and shrinks as somebody steps through it is unsettling to fill in, so a popup, a corner card and a bar take the height of whichever panel needs the most room and hold it all the way through. The shorter panels keep their own spacing and the extra room is the form's own background. Extra room says where that room goes: Center the content puts it above and below in equal measure, which is what happens unless you say otherwise, and Below the content leaves it all at the bottom. With Height on Auto the form is as tall as the panel that needs the most room. Type a number and the form is exactly that tall, whatever is on the panel; clear it and it goes back to Auto. Disable Keep one height on every panel if you would rather each panel be its own size. A full-screen form already fills the screen, and an embedded one is as tall as its content, so neither is asked. And whatever you set, a form is never taller than the screen it opens on — on mobile especially, where being taller than the screen is how a sign-up button ends up somewhere nobody can reach.

Clicking outside closes a popup, and you can disable that. It is what almost everybody expects, so it is on to start with; disable it when you want the form closed deliberately rather than by a stray click.

Nobody can be trapped in your form. The close button and the Esc key always work, whatever else you set, and there is no switch anywhere that disables them. That is not a setting we forgot — a form somebody cannot leave is a cost paid by a shopper who never agreed to bear it. Whichever way somebody closes it, it counts as them saying no, so how long to wait after somebody closes it means what it says.

The close button is yours. Every shape has one except Embedded, which sits in the page rather than over it and so has nothing to close. Give it a color, a background, a border, rounded corners, and a size. Where it sits is two numbers rather than one — From the side and From the top — so you can hold it tight to the top edge and still keep it clear of the side, or the other way round. On a popup and a corner card you can also put it outside — just beyond the top-right corner, over the dim — which is what you want when the form itself is a photograph and a mark on top of it would be lost; the same two numbers place it there. However small you make it, the area somebody can tap stays at least 44 pixels, so it is still easy to hit on mobile.

Marking required fields with a star is on by default, and you can disable it. It only changes the star: a field that has to be filled in still has to be filled in either way, and anybody using a screen reader is told so regardless.

If somebody leaves a required field empty and presses the button, your form says so itself — a short line in your form's own error color, under the field it is about, using the label you gave it: "Please add your first name."

A teaser you leave behind

A teaser is a small button left on the page when somebody closes your form, and pressing it brings the form back where they left it. Enable Leave a teaser that reopens the form on the Teaser card under Format, then design it on the Teaser row. A bar and an embedded form cannot leave one.

Somebody who closes your form can be given a small button in the corner of that page — a teaser — and pressing it brings the form back exactly where they left it: the same panel, and whatever they had already typed. Leave a teaser that reopens the form is the switch, on the Teaser card under Format — and it is the only teaser setting there. A popup, a corner card and a full-screen form can leave one. A bar is already on the page and an embedded form sits in the page rather than over it, so neither is asked — and changing Form type to either one asks you first, because the teaser would go with it. Changing between the other three keeps it.

Everything about how it looks is on the Teaser row, above your panels — Design it on the Teaser row, under the switch, takes you straight there. Open it and the first thing on it is Text: a big box holding the teaser's words. Type in it and the teaser changes as you type. Text style, just under the box, is where the words' typeface, size, weight and color are. Below that, Shape and position sets its shape, where on the screen it sits, its width and whether it has a close button of its own, and under that is its look — background, border, corners, shadow. A teaser is its words and nothing else, so there are no blocks to add to it. It starts out looking like your form's own button, and it is yours from there. The preview shows the teaser, not the form, while that row is open, so every change is in front of you.

Shape is asked twice, once for desktop and once for mobile, so a wide tab on a desktop can be a slim handle on the edge of a mobile screen — or nothing at all there, if you would rather. Position is one answer for both: the teaser sits in the same place on every screen. A new teaser starts on the right edge of a mobile screen, away from the bottom where many themes put their own buttons, and the Teaser row says so; choose a position and that one holds everywhere. Rectangle tab is a small labeled rectangle; round its corners and you have a bubble. Corner ribbon is a band drawn on the diagonal across the corner you chose, running off both edges of the screen with your words centered on it. It is pinned to its corner, so it takes no distances and no width, and it only sits in one of the four corners. Its words are on the diagonal, so it holds 24 characters at most — with longer words it cannot be chosen until you shorten them, and if the words grow past 24 after you chose it, your changes still save but the form will not publish until they are shorter. Corner triangle fills the corner you chose with your background color, its long side facing into the page and your words centered in the middle of it. Pick it over the ribbon when your words need two lines: it holds one block of words of up to two lines — press Enter where you want the second line to start, or let the words wrap on their own. The Line height on the words' Text style sets how close the two lines sit. Like the ribbon it is pinned to one of the four corners and takes no distances and no width. Instead it has a Size for desktop and one for mobile: the length of each of its two edges along the screen, from 110 to 260 pixels, with 120, 140 and 160 offered beside the box. It starts at 140 on desktop and 120 on mobile. If your words look as though they may not fit the size you chose, the Teaser row says so and so does the list of things worth knowing before you publish — but the form still publishes: the preview shows exactly what your shoppers will see, so check it there, and if they do not fit, shorten them, make the triangle larger or make the text smaller. Edge handle is a slim tab hugging the left or right edge, and it is what mobile gets unless you say otherwise. Icon bubble is a round button with an image in it — choose one with Which image, which appears under the teaser's text when this shape is picked, or your words are drawn in the circle instead, and the checks say so before you publish.

A teaser needs a name. If it is only an image, give the image a description in Images & media — a teaser with neither words nor a description is never shown, so the form will not publish until it has one. The same goes for mobile: if you hide its words on mobile, something with a name has to be left there. If the teaser shows a different image on mobile, that image is described by its own words there, so give it a description too — or choose Use the desktop image for mobile. Once the form is live, that image cannot be marked decorative in Images & media until the teaser has words of its own.

Six places, and the middle of the top and bottom edges is not one of them: a thing in the middle of the bottom edge is a bar, which is a shape of its own. Each place takes a distance from the edges it sits against, in pixels or as a share of the screen, so you can move the teaser clear of a chat button or a cart tab your theme already put there. A corner ribbon and a corner triangle are the exceptions: each sits in one of the four corners and nowhere else, pinned to the corner itself.

Leave Width empty and the teaser is as wide as its own words. A corner ribbon has no width to set: its band is as long as the corner needs. You can also give it a close button of its own, which it does not have unless you ask for one; if you do, the area somebody can tap stays at least 44 pixels however small you draw it. Once you ask for one, you style it with the same controls as your form's own close button — its X color, background, border, corners, size and two distances — whatever the teaser's shape. On a corner ribbon the close button sits in the corner itself, below the band. On a corner triangle it is a small circle, black with a white border and a white X until you change them, at the triangle's tip along the edge of the screen, just touching it and clear of your words; its two distances move it from there toward the page.

Closing your form is still an answer. Leaving a teaser does not change that, and it does not change Frequency: if your form waits 30 days after somebody closes it, it still waits 30 days, and the form itself will not open again until then. What the teaser gives them is a quiet way back in the meantime — on that page and on the next one — which they have to press. Somebody who signs up gets no teaser at all, and neither does anybody your form was not going to be shown to in the first place. Somebody who closes the teaser itself has closed it until your form is free to ask them again — the same wait Frequency sets.

An automation that starts when somebody closes your form starts once. If they close the form and then close its teaser too, that counts as one close: the automation starts for the first and not again for the second. Your metrics still show both closes.

Making it look right on mobile

Switch the preview to On mobile and the appearance controls change with it: you are now setting the mobile values. Anything you do not change there stays the same as it is on desktop, and a value you have changed offers to go back. That is how one form covers both screens instead of becoming two designs that drift apart.

A closed line says whether mobile is different. On mobile each line of the Block card says Same as desktop under its name, or Mobile only when you have given it a value of its own there — so a difference is never hidden behind a closed line. Open the line and the desktop value is beside the field, with Use the desktop value to take yours back off.

Zero is a value on mobile. Setting a mobile margin to 0 does not mean "the same as on desktop" — it means no space at all, on mobile, whatever desktop says. Use Use the desktop value when you want the desktop number back.

An image edge to edge is one switch. Choose the Image on top layout and the Layout card offers Let the image touch the edges:

The image stretches to the panel’s edges instead of sitting inside the panel’s padding.

It starts on, and it is one answer for both screens — the image runs the full width of the form, and to the top as well, on desktop and on mobile alike. That is the whole of it on the layouts, and it is what most forms want.

Edge to edge on mobile only is a job for Advanced layout, because it is a value set on a box while you are looking at mobile. Three steps, and the third is the only one that touches mobile:

  1. Put the image in a box that sits directly in the panel — a Columns row, or a column of its own. An image on its own line is already in one. Edge to edge reaches past the panel's padding and no further, so it is offered on boxes at that level and nowhere deeper.
  2. Switch the preview to On mobile.
  3. Pick that box and enable Edge to edge.

The image then runs the full width of the form on mobile — while desktop keeps whatever it had. It is one way only: mobile can enable edge to edge where desktop does not have it, and cannot disable it where desktop does. If the row you took edge to edge also holds your words, they come out to the edge with it; give the column holding them some Padding to bring them back in.

You can hide a line of copy on mobile where it is genuinely too long. You cannot hide a field, the consent line, a button or a discount code — what a form asks for and what it gives are the same on every device — and hiding an image is never the way to make a mobile layout work. If it does not fit, change how the panel is arranged.

An image the size of the whole form

Put an image inside a layer and leave it where it is — behind everything else — and it becomes the layer's ground: the image fills the whole box, and whatever else is in that layer sits on top of it at one of nine positions.

The image decides how tall the form is. A layer with an image behind it takes that image's own proportions, so the space is reserved before a single byte of the image has arrived and nothing on the page jumps as it loads. Put more words in it than the image has room for and the box grows to hold them — nothing is ever cut off — but the image is then cropped to the taller shape, so short copy is what this arrangement is for.

Words on an image are hard to read, and we say so. We look at the part of the image each block of words sits over and compare it with the color of those words. If they are too close, the check under the preview says which words and which way round it is — and the same sentence appears under the Tint itself, so what is wrong and the control that answers it are in one place. It is never a refusal: a quiet caption over a photograph is a real design, and this is your call.

Tint is the answer that takes one press. It lays a color over the image, under the words: pick the color, then the strength. Pick the image block in your form and you will find it on that block's own card, under Content — beside the image it is over, which is what it acts on.

0% leaves your image exactly as it is, and that is what a new form starts with — your photograph, untouched. 45% black is the strength that makes white words readable over any photograph, and it is one of the quick presses under the slider along with 0, 25 and 60. A light tint at the same strength does the opposite job: it lifts a dark photograph so dark words can be read on it.

The tint is one answer for the whole layer, at every width — there is no separate mobile setting for it. The other two answers to hard-to-read words are a background behind the words, or a different image.

On mobile, choose what happens to the image. Pick the layer and answer On mobile:

If you choose Image above the words, look at your text colors on mobile. White words written for a dark photograph are white words on a white panel once the image moves out from behind them. Switch the preview to On mobile, pick each block, and set a color that works there; the value you set applies on mobile only, and desktop keeps its own.

Things worth knowing before you build

A few rules hold whatever you build. Anything side by side says what it does on mobile, images sit in a landscape or square frame, every field has a label or placeholder text, every image has a description, and the consent line stays. A field asking for a mobile number needs text messages enabled and your number approved.

Anything that sits side by side has to say what it does on mobile. On the Layout card that is the Arrangement line with the preview on On mobile, and each layout offers the two or three answers that make sense for it — an image above the words or below them, the words over the image or under it, a line that stacks or stays a line. Answering switches the preview to mobile so you can see what you just chose; switch it back whenever you like.

In Advanced layout, a row you drew yourself asks the same question, in its own On mobile control: Stack top to bottom, Wrap, or Stay side by side. There is no default there, deliberately — a row that has not decided is a row that will surprise you on the device most of your visitors are using.

Lining things up inside a row is a top-to-bottom question. Pick something in a row and the Style pane's Box alignment offers Top, Middle, Bottom or Stretch. It moves whatever is shorter than the row: a button beside fields with labels is the usual case, and it starts at the bottom, level with the boxes. On the tallest thing in the row there is nowhere to move it to, and the pane says so instead of offering four answers that would all be the same one.

A form that is too narrow cannot put things side by side. Below about 440 pixels wide, a row folds into a column on every screen — so if you make a row in a narrow form, the editor either widens the form for you or tells you plainly that it cannot. A corner card is always narrow; if you want two columns, use a popup.

A button beside a field sits level with the box, not with the label. A field in a row is a label with a box under it, so a button next to it starts lower than you would expect and ends level with where somebody types. That is what it does on its own, and you can say otherwise: pick the button, and Style offers Box alignment — Top, Middle, Bottom or Stretch.

Box alignment and Distribute answer in the direction they act. Box alignment is where a box sits inside the one around it; Distribute is how the things inside a box are spread along it. Both name the direction they actually move something, so a row offers Left, Center and Right and a column offers Top, Middle and Bottom — and a row you told to stack on mobile offers the up-and-down words while you are looking at mobile, because on mobile that row is a column. A stack of things one on top of another has no direction to spread along, so it is not offered Distribute at all; position each thing in it instead.

Your images are shown in a landscape or a square frame, and never a tall one. An image that does not fit is cropped rather than allowed to stretch the form, because a tall image pushes your button off the bottom of a mobile screen. Say which part of it to keep in Style and the crop keeps that part.

A field needs a label, placeholder text, or both. The label is the words above the box. The placeholder is the words inside it, which disappear the moment somebody types — so it is a hint, never a substitute for a label, and a field carrying only a placeholder is asking somebody to remember what was asked while they answer it. Leave the label empty if you want the tidier look; the placeholder then names the field for anybody using a screen reader. A field with neither will not publish, and the editor says so under the two boxes while you are still there.

Every image needs a description. It is read aloud to anyone who cannot see it — say what is in the image. An image with no description will not save, and the editor says so while you are still looking at it rather than when you press Save.

The consent line stays. A form that asks for an email address has to say what signing up means, so that block cannot be removed: Delete in its ⋮ is grayed and says why. The words are yours — write them however your shop sounds.

Your policy pages are linked for you. Where the consent line says "Privacy Policy" (or "Privacy Statement" or "Privacy Notice") or "Terms of Service" (or "Terms and Conditions", "Terms & Conditions" or "Terms of Use"), your shoppers see it as a link to your store's own policy page, the one Shopify publishes from Settings → Policies. Capital letters don't matter. Only the first mention of each is linked, and it opens in a new tab so nobody loses what they typed into the form. There are no addresses to type, and the links stay right if your domain changes. A policy you have not published stays plain words, so nobody lands on a missing page. The consent line's card in the editor tells you which of your words will link.

A mobile-number field needs text messages enabled, and your number approved. The switch is in Settings → Text messages. With it off the form will not publish, and the editor says which panel is asking for a number and names the switch to enable — or take the field out instead. With it on, your number approval form publishes straight away; every other form that asks for a number says This cannot be published until after your phone number is approved. and publishes once a carrier has approved a number of your own, which is a separate step on that same screen and usually takes a few days, sometimes a week or more. Nothing is ever texted to anybody until then. The Text messages help page is the whole story.