www.tryformly.com Open in urlscan Pro
63.35.51.142  Public Scan

Form analysis
2 forms found in the DOM

Name: wf-form-Formly-Bug-Report — GET

<form id="wf-form-Formly-Bug-Report" name="wf-form-Formly-Bug-Report" data-name="Formly Bug Report" method="get" class="bug-report-form-element" data-wf-page-id="63efa4db12b9a63134d4d92e" data-wf-element-id="7dcc8230-9782-6cbd-3781-5b35296b46fe"
  aria-label="Formly Bug Report">
  <div class="bug-report-item"><label for="email" class="bug-report-label">Your email</label><input class="bug-report-field w-input" maxlength="256" name="email" data-name="email" placeholder="" type="email" id="email" data-ms-member="email"
      required=""></div>
  <div class="bug-report-item"><label for="read-only" class="bug-report-label">Read-only link *</label><input class="bug-report-field w-input" maxlength="256" name="read-only-2" data-name="Read Only 2" placeholder="" type="text" id="read-only"
      required=""></div>
  <div class="bug-report-item"><label for="live-link" class="bug-report-label">Live link * (staging domain is fine) </label><input class="bug-report-field w-input" maxlength="256" name="live-link" data-name="live link" placeholder="" type="text"
      id="live-link" required=""></div>
  <div class="bug-report-item"><label for="loom-video" class="bug-report-label">Loom video / screen recording&nbsp;(highly recommended)</label><input class="bug-report-field w-input" maxlength="256" name="loom-video" data-name="loom video"
      placeholder="" type="text" id="loom-video"></div>
  <div class="bug-report-item"><label for="field-2" class="bug-report-label"><strong>Bug Severity</strong></label>
    <div class="bug-report-radio-wrapper"><label class="bug-report-radio w-radio">
        <div class="w-form-formradioinput w-form-formradioinput--inputType-custom bug-report-radio-bbutton w-radio-input"></div><input id="low" type="radio" name="Severity" data-name="Severity" style="opacity:0;position:absolute;z-index:-1"
          value="low"><span class="bug-report-label hide w-form-label" for="low">Low</span>
        <div>
          <div class="bug-report-label _1"> 😎 Low</div>
          <div>Something's a little off</div>
        </div>
      </label><label class="bug-report-radio w-radio">
        <div class="w-form-formradioinput w-form-formradioinput--inputType-custom bug-report-radio-bbutton w-radio-input"></div><input id="medium" type="radio" name="Severity" data-name="Severity" style="opacity:0;position:absolute;z-index:-1"
          value="medium"><span class="bug-report-label hide w-form-label" for="medium">Low</span>
        <div>
          <div class="bug-report-label _1">🙃 Medium</div>
          <div>Annoying but nothing major</div>
        </div>
      </label><label class="bug-report-radio w-radio">
        <div class="w-form-formradioinput w-form-formradioinput--inputType-custom bug-report-radio-bbutton w-radio-input"></div><input id="high" type="radio" name="Severity" data-name="Severity" style="opacity:0;position:absolute;z-index:-1"
          value="high"><span class="bug-report-label hide w-form-label" for="high">Low</span>
        <div>
          <div class="bug-report-label _1">🔴 Critical</div>
          <div>It completely breaks my forms</div>
        </div>
      </label></div>
    <div class="w-embed"><input type="hidden" id="product" value="Formly"></div>
  </div><input type="submit" data-wait="Please wait..." class="bug-submit button w-button" value="Report Bug">
</form>

Name: email-form — GET

<form id="email-form" name="email-form" data-name="Email Form" method="get" class="saerch-form" data-wf-page-id="63efa4db12b9a63134d4d92e" data-wf-element-id="9c2132a4-546c-e2dd-c103-8f03e71345b9" aria-label="Email Form"><input
    class="search-input w-input" maxlength="256" name="field" data-name="" placeholder="Start searching..." type="text" id="search" required="">
  <div class="search-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ic" width="24" height="24" preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 24 24">
      <path fill="currentColor"
        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0c.41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z">
      </path>
    </svg></div>
</form>

Text Content

PricingShowcaseRelume ComponentsFormlyLogicFormlyPro
Docs

Book A DemoFAQs
LoginSign up



FORMLY BUG REPORT


Please allow 24 hours for a response :)

Your email
Read-only link *
Live link * (staging domain is fine)
Loom video / screen recording (highly recommended)
Bug Severity

Low
😎 Low
Something's a little off

Low
🙃 Medium
Annoying but nothing major

Low
🔴 Critical
It completely breaks my forms

Thank you! Your bug has been submitted!

We will let you know when this bug has been patched
or we will be reaching out if we need more information.

Oops! Something went wrong while submitting the form.



SCRIPTS


 * Production

CORE ATTRIBUTES


 * Enable Formly
 * Steps
 * Nav ButtonsSubmit ButtonCustomisable disabled states (Pro)
 * Disclaimers

POWERUPS


 * Auto indicatorsCheckboxes
 * Custom indicatorsClickable indicators (Pro)
 * CMD + Enter submit
 * Enter progressEmail inputs
 * Intro cards
 * Phone number Formatting
 * Radio Inputs
 * reCAPTCHArequired inputsStep textScroll to top

PRO FEATURES

Upgrade

 * Calling code DropdownCountry DropdownCustom Error MessagesDynamic Form
   FieldsEdit StepsFormlyLogicFormlyUIForm MemoryRemember last
   stepFormlyQuizForm ResetGet User Input DataMinimum CharacterMultiple Success
   MessagesMultiple Submit RedirectsPre-fill inputsUsing Webflow IXWeighted Quiz

INTRO LOOM




UPGRADE TO FORMLYPRO

For just $18/month, you get access to all these features and more!
Use code UPGRADE10 on checkout to get a 10% discount on all plans, including the
lifetime plan!
Get Flowplay+ now

FormlyLogic - Add conditional logic to Webflow Forms


Custom Error Messages


Weighted Quiz


Form Memory


And 25+ Pro features to level your Webflow forms


SEARCH DOCS

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Note: You can click on the attributes to copy to clipboard directly.

JAVASCRIPT FILES


PRODUCTION

Formly leverages JsDelivr as its content delivery network to effectively
distribute its JavaScript code, which serves as the core script for all client
and live sites.

Please add this Before the </body> tag

Javascript
@latest
<script
src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"></script>
Click on the code to copy to clipboard

CORE ATTRIBUTES


ENABLE FORMLY

To enable Formly on your Webflow form, make sure to add this attribute to the
Form element, not the Form Block.

Attribute
@core
Custom <div> attributes
data-form
=
multistep
Click on the attributes to copy to clipboard


INDICATE STEPS

Each step on your form will need to be indicated using this attribute.

For steps without any inputs (ie intro cards or step break cards) add this combo
attribute

Attribute
@core
Custom <div> attributes
data-form
=
step


NEXT & BACK BUTTONS

To indicate your Next and Back buttons, use this attribute and utilize either
the Button element or Link Blocks.

Please refrain from using the Form Submit Button for these two buttons.

It's possible to have multiple instances of this button within the form or
anywhere on the page. Ensure that each button has the same attribute.

Attribute
@core
Custom <div> attributes
data-form
=
next-btn
Custom <div> attributes
data-form
=
back-btn


SUBMIT BUTTON

Indicate your submit button using this attribute.

Only use the Form Submit Button element.‍

Attribute
@core
Custom <div> attributes
data-form
=
submit-btn
PRO 


CUSTOMISABLE DISABLED STATES

Giving you complete control over the disabled states of the button. Just create
a combo class to style your disabled state.

Add a '.disabled'  combo class to your buttons and style them as you wish.

Attribute
@core
Style selector
form-button
disabled


NOTE:

1. You do not need to hide the individual steps in the form. They are
automatically hidden on the published site.If you do hide them, it won't cause
any issues.

2. The next and back buttons can be placed anywhere on the page and not
necessarily inside the Form element. But note that the submit button has to be
inside the Form element.

3. You can have multiple instances of the next and back buttons (for example, a
pair of back and next buttons inside each step-item)

4. You can only have 1 instance of this multi-step form per page. You can not
have multiple instances of a multi-step form at the moment.

POWERUPS


AUTOMATIC PROGRESS INDICATORS


Add the first attribute to the element containing the individual step
indicators.

Add the second attribute to the progress indicator element. Add a combo class
'.current' and add the current state style.



Attribute
@powerup
Custom <div> attributes
data-form
=
progress
Custom <div> attributes
data-form
=
progress-indicator


CHECKBOXES


If you require users to check a certain number of boxes before they can
progress, add this attribute to the step div '.form-step-item'

Attribute
@powerup
Custom <div> attributes
data-checkbox
=
n
n= minimum number of checkboxes needed to be selected



CUSTOM PROGRESS INDICATORS


Add this attribute to each of your custom indicators.

Note:
1. Ensure that the number of custom indicators indicators equal to the number of
steps in your form.

2. You do not need the data-form=progress attribute if you are using custom
indicators.

Attribute
@powerup
Custom <div> attributes
data-form
=
custom-progress-indicator


PRESS "⌘ + ENTER " TO SUBMIT


Add this attribute to the Form element.


Attribute
@powerup
Custom <div> attributes
data-submit
=
true


PRESS "ENTER" TO PROGRESS


Add this attribute to the Form element.


Attribute
@powerup
Custom <div> attributes
data-enter
=
true


EMAIL VALIDATION


Email inputs only allow true email expression (name@realdomain.com) when set to
required.

It doesn't allow numbers in the domain name and doesn't allow for top-level
domains that are less than 2 or more than 3 letters. Rejecting email domains
available as a FormlyPro member.



INTRO CARDS OR STEPS WITHOUT INPUTS


Add this attribute to the '.form-step' element
that will not contain any inputs.

Attribute
@powerup
Custom <div> attributes
data-card
=
true


PHONE NUMBER FORMAT


Automatically format phone number inputs to however you want.
‍
Add this attribute to the Phone Number input.
‍
A number is represented using x. The number of x determines the max number of
digits. You can format the number using brackets, dashes, plus, and spaces. Here
are some examples:
‍
123-456-789
data-phone-autoformat = xxx-xxx-xxxx
‍
(12) 345 6789
data-phone-autoformat = (xx) xxx xxxx

+(44) 1234 1234 23
‍data-phone-autoformat = (+xx) xxxx xxxx xx

+(44)-1234-1234 23
‍data-phone-autoformat = (+xx)-xxxx-xxxx-xx

Attribute
@powerup
Custom <div> attributes
data-phone-autoformat
=
{format -pattern}


RADIO INPUTS


If you want users to progress automatically to the next step, add this attribute
to the element that contains your radio inputs.


Attribute
@powerup
Custom <div> attributes
data-radio-skip
=
true
Custom <div> attributes
data-radio-delay
=
n
n = delay in milliseconds



RECAPTCHA


If you use reCAPTCHA on your forms, please add this attribute to the reCAPTCHA
element

Attribute
@powerup
Custom <div> attributes
data-callback
=
recaptcha


REQUIRED INPUTS


Just check or uncheck the 'required' box on Webflow.

Attribute
@powerup



FORM STEP TEXT


Current Step
Show the current step the user is on. Add the first attribute to any text block
or text span.

Total Steps
Show the total number of steps in the form. Add the second attribute to any text
block or text span.


Attribute
@powerup
Custom <div> attributes
data-text
=
current-step
Custom <div> attributes
data-text
=
total-steps


SCROLL TO TOP OF THE FORM


If you have a long form that requires the user to scroll down to click the next
or back button and want the user to be scrolled to the top on click of the
buttons.

Add this to the Form block (where you have data-form=multistep)

If that doesn’t work, you can use this code:
‍


1function customScrollTop(){
2     $('[data-form="multistep"]').parents().animate({ scrollTop: 0 }, 500);
3}
4$('[data-form="next-btn"]').on('click',customScrollTop)
5$('[data-form="back-btn"]').on('click',customScrollTop)

Attribute
@powerup
Custom <div> attributes
data-scroll-top
=
true
PRO


CALLING CODE DROPDOWN


Add country calling code select inputs easily with no-code. Includes flag emoji,
country shorthand and the ability to search for the country code directly form
the input.


Become a member

PRO


COUNTRY NAMES DROPDOWN


Add country select input easily with no-code. Includes flag emoji and ability to
search through the select input.

Become a member

PRO


CUSTOM ERROR MESSAGES


Show a custom error message when a user tries to move to the next step without
meeting the requirements.
‍
Add this attribute to a Div Block or Text Block


Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


DYNAMIC FORM FIELDS


Allow users to add multiple sets of information within a single form by
dynamically adding and removing input sections.

Example:
Add another email/phone
Add another team member
Add another work experience


Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


EDIT STEPS


Add these attributes to the Button element that will bring the user back to the
step to edit their answers.
‍
Note: This can be also used to bring user back to a previous step, not just to
edit answers.

Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


FORMLYUI


Unstyled formly form components to easily create fully functional multistep
forms in minutes without all the debugging work.

Become a member

PRO


FORMLYLOGIC


Using formlylogic, you can now ask only the right questions and skip the rest,
create quizzes and fun games all using Webflow and no-code! Just 2 attributes
and a bit of grit, you can turn any normal form into a logic form.

Become a member

PRO


FORM MEMORY


Automatically saves user input for forms as you type and restores it once the
page is reloaded.

Add this attribute to the Form element.

Attribute
@pro
Custom <div> attributes
pro-only
=
🔒


REMEMBER LAST STEP


Automatically jumps user to the last step where they left off.
‍
Add this attribute to the Form element.

Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


FORMLYQUIZ


You can show a different final result based on the user's answers.

Use cases include quizzes, personality tests, eligibility checkers, lead
qualifiers or product/service recommendations.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


FORM RESET


Add this attribute to the Submit Button element to trigger a reset after
submission.
‍

Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


GET INPUT DATA


Get and display all user-inputted data anywhere on the page or form by adding
attributes to Text Blocks or Text Spans.
‍
Add this attribute to the Form element.
‍


Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


MINIMUM CHARACTER


Add a minimum character validation to your inputs to ensure the input data meet
this this threshold.

It works with text inputs, number fields and text areas.
‍
Add this attribute to any Input element.

Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
FORMLY LOGIC


MULTIPLE SUCCESS MESSAGES


Display different success messages for users who took different logic paths.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
FORMLY LOGIC


MULTIPLE SUBMIT REDIRECTS


Redirect users to different links based on the branch they selected after
submitting the form.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


PRE-FILL INPUTS


Pre-fill inputs using query parameters. Useful to speed up the form-filling
process for users by dynamically populating form fields with information from
another page or source.

Add this attribute to the Form element.
‍

Notes: 

1. HTML input names are case-sensitive. Meaning if your input name on Webflow
has capital letters, your query param would need to follow that.

2. Try to avoid spaces when naming your inputs. Use dashes (-) instead.



Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


USING WEBFLOW IX


Add this attribute to the Form element.
‍
Please note that this resets every interaction on the page. We only recommend
using this if your form is on a dedicated page with no other Webflow IX other
than just the scroll-into-view interaction

Attribute
@pro
Custom <div> attributes
pro-only
=
🔒
PRO


WEIGHTED QUIZ


With weighted quiz logic, you assign a numerical value or weight to each
possible answer in a multiple-choice question, and then use those weights to
determine the outcome of the conditional logic rule.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
Hmm.. we couldn't find what you're searching for.
Reach out to us on Slack, maybe?

Slack support
Copied to clipboard