Form design

Your form should look like you. Not like the tool it was built with.

You can spot most funnel builders by their forms. Same tiles, same rounded corners, same button in the bottom right. Convenient for the vendor. Less so for your brand, and for an agency building on a client brief it is often the reason the tool never gets proposed. asksteps offers two ways out of that, and you can take both in the same form.

Both are in every plan, the free one included.

How It Works

How far do you want to go?

  1. 01

    Most of the time, setting is enough

    Colors, typeface, corner radii, border weight, shadow, width, how the answers are arranged, the progress indicator. All of it through color pickers and dropdowns, with a live preview. Thirteen themes are there as a starting point; what you make of them you save as your own.

  2. 02

    And when it is not, write it yourself

    For anything no form element covers, drag a free section into the form and write HTML and CSS into it. Pricing table, comparison grid, callout box, an input layout with a next button of your own.

  3. 03

    Both in the same form

    The free section knows your theme colors. Change the theme and it changes along, instead of sitting there in the wrong shade. Sounds like a detail. It is the difference between hand-built and looks hand-built.

  4. 04

    Again for the next client

    Your theme can be exported as a file and read into another account. Build for several clients and after a few projects you have a small library, instead of retyping the color values from the brand guide every time.

In Betrieb

Theme editor

Forms in the Design of Your Website

You can usually spot an embedded form straight away: different typeface, different colors, different corners from the rest of the page. In the Theme Editor you set that yourself, and the preview alongside follows every change. Thirteen ready-made themes are included, and whatever you make of them you save as your own.

  • Answers as a list or as tiles. With two answers a list looks calmer, with eight a grid does.
  • Progress indicator on or off. On a long application it helps; with three questions, “two more to go” tends to put people off.
  • Included in every plan, including the free one
asksteps studio — theme editor
EIN FUNNEL · DREI THEMES · DIESELBEN FRAGENBeratungBewerbungSonstigesWeiterHELL · LISTE · KARTEBeratungAngebotSupportPresseWEITERDUNKEL · RASTER · PUNKTEBeratungBewerbungSonstigesWeiterPAPIER · BOGEN · SEGMENTE Farben, Schrift, Radien, Anordnung, Fortschritt — eingestellt, nicht programmiert.

Custom HTML

Your Own Sections in HTML and CSS

A section inside the form that you write yourself in HTML and CSS. A price table, a comparison grid, a note box, an input mask that has to look exactly this way and no other. Where the builder stops, you keep writing. Any fields you put in there are real: the answers land in the inbox like all the others.

  • Rebuild an imported PDF form freely without losing the mapping
  • The next button sits wherever you put it
  • No JavaScript, and no fonts fetched from Google
custom html — written, rendered, captured
EIGENES HTML<style> .zeile { display:grid }</style><label>Vorname</label><input data-xm-id="Vorname_1" data-xm-required><input data-xm-qst="Wunsch- termin" type="date"><button data-xm-next> Weiter</button>SO SIEHT ES DER BESUCHERVORNAMENACHNAMEWUNSCHTERMIN▦Gut zu wissenWir melden uns binnen 24 Stunden.WeiterERKANNTE FELDERvornamePflicht→ Vorname_1 (PDF)wunschterminDatum→ Frage im LeadKEIN JAVASCRIPTKEIN FREMD-REQUEST
Features

What that means in practice

Nobody sees what it was built with

Color world, typeface, edge sharpness, arrangement: all interchangeable. Two forms from the same account need not resemble each other, and from the Starter plan on, the "Powered by asksteps" line under the form disappears too.

Without a line of code

The theme editor covers by far the largest part. You only need HTML once something is missing that no form element covers.

One design per client

The appearance belongs to the form, not the account. A team can work for several clients in parallel, each in their own brand design and on their own domain.

No third-party servers

Custom fonts have to sit with you or be embedded; a reference to an external font server gets stripped. Your form loads nothing you do not know about. That question comes up in procurement more often than you would think.

Checked on the phone

The preview shows the same output the visitor gets. What fits there fits on a narrow screen too.

No surcharge for design

Neither the theme editor nor the HTML section is tied to a higher plan. Some competitors unlock custom HTML only from their business tier.

Frequently Asked Questions

Questions about styling

Do I need to know HTML?

Not for the theme editor. It is an interface of color pickers, sliders and dropdowns, and the preview beside it shows every change immediately. You only need HTML once you want to build a section that does not exist as a form element.

Can I change the design of the whole funnel or only single screens?

The theme applies to the whole funnel or form: questions, answers, buttons, progress. Individual questions may deviate. A question with eight answers often works better as a grid while the rest stay a list.

Can I add JavaScript?

No, and that is deliberate. Your form runs embedded on other people's pages. Scriptable third-party HTML would be a permanent security hole there, facing every visitor. Where other vendors allow custom JavaScript, they pass that risk on to you.

Does the design apply to the WordPress embed as well?

Yes. Whether you deliver the form through the embed snippet, the WordPress plugin or your own subdomain: it is the same widget with the same theme.

What happens to my design when asksteps changes?

A theme is a stored record, not a state of the interface. Fields you leave empty inherit their values. That is why a form you create today still looks the way you set it after a later extension.

More on This Topic

Form design in detail

Build a form that looks like you

Create a free account and set the first theme. Takes less time than reading this page.

Create an account now