:

Boolean Attributes

Validation alerts can be specified even if there are no initial constraints. This is to accommodate changes caused by events at "runtime".

Margins

Field Events

WHEN CHANGES...

Please Note: You don't need to use events for basic input validation. This can be done on the field metadata form.

Drag and drop actions or conditions to change the execution order.

Actions can only be applied to fields or containers that have a Friendly ID or Group defined.

If using Custom Functions, the event object and the input object are passed as arguments. When used in Conditions, the function must return true of false. Values returned by functions in Actions are ignored. Custom Function names must be letters only from 5 to 50 characters long.

Welcome to formstrap

formstrap is an online tool for creating dynamic, responsive, standards-compliant and accessible forms compatible with Bootstrap 5.3.

Please note that this version of formstrap is an open beta release. If runtime errors occur, a pop-up form will appear. Please complete it so errors can be fixed. If you enounter other problems, please use the feedback link on the About popup.

You can create forms that use the full range of HTML5 input types and attributes.

  • Create pixel-perfect, complex layouts using the Bootstrap grid system and flexbox.
  • Enclose field groups in colour-coded cards.
  • Add multiple pages to forms to reduce scrolling and to break large forms up into manageable sections.
  • Set up client-side form validation rules and custom validation error messages.
  • Create form events that are triggered by user input. For example: on a job application form you could hide job history questions if the user states that they haven't had a job yet.
  • Create "replicable" containers. For example: create one set of fields for an educational qualification and then let the user replicate the set for each of their qualifications, however many they have.

Registration is not required. You can create one form at a time and download it for "self-hosting" for free without signing up. Everything is provided except the server-side script to process the form data and the success/failure redirect pages. Choose a button below to get started. The Demo Form is an example job application form. The Sampler Form demonstrates all the features of formstrap with annotations.

If you register formstrap will host your form and process and store responses (in our UK data center). There is a small per-form, per-day fee for this service but you only pay for days on which your forms are live.

Registered users can:

  • Manage, edit and host multiple forms on formstrap at the same time.
  • Choose a relevant formstrap top-level domain and specify a custom "folder name" for friendly form URLs.
  • Set a schedule for each form (e.g. for a job application form set it to not be available after the closing date).
  • Download responses as PDFs, Excel or CSV files.
  • Monitor form usage statistics.
  • Enable Google reCAPTCHA v3 on hosted forms to prevent automated/bot submissions (Google Developer Account not required).
  • Limit access to forms by IP ranges, referring page or email invite.
  • Automatically send similarly formatted PDF versions of forms on submission (e.g. to the person completing the form or, if a job application form, directly to the HR department). You can "redact" form sections from the PDF. This is useful in a job application where you may not want the shortlisting panel to see equalities information.
  • Apply custom javascript your form.
Image of a laptop showing a formstrap form in full screen mode Image of a mobile showing a formstrap form in portrait mode Image of a form usage graph on the dashboard Image of a form schedule on the dashboard Image of a table of form responses

Your Form

Right-click on a component to access the context menu for that component. This will enable you to update the metadata for the component. It will also allow you to add additional containers or fields. Click/tap, hold and drag the thick part of the component's border to move or re-order items. To change this text and the form name and logo, click Form Settings in the navigation at the top of the screen.