Interactive forms that change as the visitor answers

Interactive forms are forms that answer back: the choice of a service reveals its questions, the quantity changes the total in front of the visitor, the progress bar moves, and the error is shown beside the field and not after the send. None of that needs a developer; all of it is settings in a form that was designed to be interactive from the first field. This page is how to create an interactive form on a small business site in four moves, in the order they matter, with the arithmetic of each on the free sheets here: the request a quote form sheet for what conditional logic hides, and the payment form calculator for the total the form shows before the card.

The answer reveals the next question

The first interaction is conditional logic: the service picked shows that service's questions and hides the others. On the request a quote form sheet a four-service form built with 17 fields shows 8 to any one visitor, which is the whole reason to do it. The revealed fields sit directly under the field that revealed them, so the change is seen, and a required mark on a hidden field is conditional on the same answer, so the form can always be sent.

The total updates as they type

The second interaction is the running total: a quantity changed moves the subtotal, the tax and the charge in front of the visitor, before the card is asked for. On the payment form calculator two of a $45 line and one of a $120 line with a $15 option shows $225, then $243.56 with the tax, and that figure on the form is what stops the confirmation from being a surprise. A form that computes the total only on the server is a form that shows it too late.

Errors beside the field, and the confirmation that says what is next

The third interaction is the error shown as the field is left, beside the field, in words that say what to type: an email needs an at sign, a phone needs ten digits. The fourth is the confirmation that names what happens now and when. Together the four are what interactive means on a small site, and each entry from the form is kept in Shortcodo Pro with the branch taken and the total shown, so what the visitor saw is on the record.

Questions people ask about interactive forms

Do interactive forms need JavaScript?

The reveals and the running total do, and every form builder ships it. The form should still send without it, with the total computed on the confirmation.

How to create an interactive form without a developer?

In the builder's settings: conditional logic on the fields, a calculated field for the total, inline validation, and a confirmation message. The arithmetic is worked first on the sheets here.

Is a multi-step form an interactive form?

Yes, and the steps are the fifth interaction. The multi step form examples page on this site covers where to break the steps.

Sources

Related answers

Keep this form and its entries in Shortcodo Pro, $9 a monthEvery form, every entry, every payment in one register. $9 a month.