Forms

html general form structure submit form fields input fields input fields are used for text based user input, such as email, passwords, and plain text they are styled with the form field class and support validation via data fieldtype and data validation attributes text input used to collect generic text input from users commonly used for names, titles, or other string based inputs attributes attribute description example maxlength maximum number of characters allowed maxlength="100" placeholder placeholder text shown inside the input placeholder="enter name" required marks the field as mandatory if needed required example html name number input used to collect numeric data allows for additional attributes like min, max, and step attributes attribute description example min minimum value allowed min="0" max maximum value allowed max="1000" step increment for valid values (e g , 1 , 0 01 , or any ) 1 = integer, 0 01 = 2 decemal place step="0 01" placeholder placeholder text shown inside the input placeholder="enter age" required marks the field as mandatory required example html age email input used for collecting email addresses attributes attribute description example placeholder placeholder text shown inside the input placeholder="email\@example com" required marks the field as mandatory required data validation enables or disables validation for the field ( true or false ) data validation="true" example html email phone input description our phone input fields are built to provide a seamless user experience, leveraging intl tel input for formatting and validation behind the scenes here’s what you need to know features automatic enhancement any \<input> element with class="form field" and type="tel" automatically gets enhanced by our phone input script country selection & formatting a dropdown is provided for country selection (e g , us, gb, ca), and the phone number is formatted based on the selected country’s rules validation & error messaging the system checks if the number is valid for the chosen country invalid entries are highlighted with a red border and an error message below the field max digit enforcement we maintain a map of how many digits are typically allowed in each country’s local portion users can’t type or paste more digits than allowed live feedback after 1 second of inactivity (debounce), validation automatically runs on successful validation, the error message (if any) disappears attributes attribute description example placeholder placeholder text shown inside the input placeholder="(123) 456 7890" required (optional) marks the field as mandatory required data validation enables or disables validation for the field ( true or false ) data validation="true" example html phone number url input attributes attribute description example placeholder placeholder text shown inside the input placeholder="https //example com" required marks the field as mandatory required data validation enables or disables validation for the field ( true or false ) data validation="true" example html website dropdown field see docid\ kzierermrlfzpvh dmeyh form button(s) the form button container supports the placement of one or more buttons, allowing for consistent styling and spacing between buttons when two buttons are placed, they are spaced evenly, ensuring a clean and intuitive design while the container can support more than two buttons, doing so may overwhelm users and is generally discouraged single button layout single buttons are styled to span the full width of its container while maintaining a clean and centered alignment this design ensures a prominent call to action, making it highly visible and intuitive for users example usage continue two button layout if using a 2 button configuration, the secondary button should be on the left, and the primary button on the right primary button typically represents the main action (e g , “save”) should be on the right side of the form (second \<button> in html) should use type="submit" to submit the form use the button primary class for styling secondary button represents a less prominent action (e g , “cancel”) should be on the left side of the form (first \<button> in html) should have a type="button" attribute to avoid triggering form submission styling use the tertiary modifier class for styling in most cases use the danger modifier class only when appropriate example usage cancel save button styling buttons can be given different colors and sizes using modifier classes see https //factory docs userfirstdigital com/buttons etc e g \<button type="button" class="button danger small">button\</button> buttons can be given a tooltip by adding the data tippy content="{message}" attribute to the button, see https //factory docs userfirstdigital com/tooltips e g \<button type="button" class="button" data tippy content="i'm a button">button\</button> buttons can be given a loading message, spinner, and prevented from being clicked again see https //factory docs userfirstdigital com/buttons etc e g \<button type="button" class="button" data wait="loading ">button\</button>