Text Field

Text Options

• Input Validation (Field Restriction):
  • The Input Validation setting controls what type of content customers can enter in the text field. This helps ensure data quality, prevents invalid submissions, and guides customers to enter the correct type of information.
  • Available Options:
    • Allow All (No Restrictions): Customers can enter any combination of letters, numbers, and special characters. This is the default option and provides maximum flexibility. Use this when you need to accept varied content without restrictions.
    • Text Only (No Numbers): Restricts input to letters and spaces only. Numbers and special characters are not allowed. Use this for name fields or when you need to prevent numeric input.
    • Numbers Only (No Text): Restricts input to whole numbers only. Letters and special characters are not allowed. Use this for quantity fields, numeric identifiers, or when you need pure numeric input.
    • Numbers with Decimals: Allows numeric input including decimal points. Useful for prices, measurements, or any decimal values. Use this for fields requiring decimal numbers like weights, dimensions, or prices.
    • Text and Numbers: Allows both letters and numbers but restricts special characters. Useful for alphanumeric codes, product codes, SKUs, or identifiers that need both text and numbers but no special characters.
    • Email Address Only: Validates that the input is a properly formatted email address. The plugin checks for the standard email format (text@domain.com). Use this for email collection fields, newsletter signups, or contact information forms.
    • URL/Website Only (Premium): Validates that the input is a properly formatted website URL. Ensures the URL follows standard format requirements. Use this for website URL collection, social media profile links, or any field requiring valid URL format.
  • Choose validation that matches your actual data requirements. Test validation on different browsers to ensure it works correctly. Provide clear labels and placeholders that indicate the expected format.
• Default Value
  • The Default Value setting allows you to pre-fill the text field with a specific value when the form loads. This value appears in the field before the customer types anything, and they can either keep it, modify it, or delete it entirely.
  • Enter the exact text you want to appear in the field by default
  • Use defaults to provide examples, show format, or pre-fill common values
  • Defaults are editable – customers can change or delete them
• Placeholder
  • The Placeholder setting allows you to add hint text that appears inside the text field when it’s empty. This text disappears when the customer starts typing and reappears if they clear the field. Placeholders provide guidance without pre-filling the field with actual values.
  • Enter hint text that guides customers (e.g., “Enter your name”, “e.g., John Smith”)
  • Provide format examples or brief instructions
  • Keep placeholders short and concise
  • Examples of Effective Placeholders:
    • Enter your full name” – Clear instruction
    • “e.g., John Smith” – Format example
    • “Maximum 50 characters” – Constraint information
    • “Enter personalization text here” – Purpose clarification
  • Keep placeholders short and concise. Use clear, simple language. Provide format examples when helpful. Don’t use placeholders as the only source of important information (they disappear when typing).
• Readonly Field
  • The Readonly Field setting makes the text field display-only, meaning customers can see the value but cannot edit it. The field appears normal but is non-interactive, and the value cannot be changed by customers on the frontend.
  • Enabled (ON): Check the box to make the field read-only. Customers can see the field and its value, but cannot edit it.
  • Disabled (OFF): Leave unchecked for normal editable fields.
  • Use readonly fields when you need to display but not allow editing. Make it visually clear that the field is read-only (may require custom CSS). Consider using readonly for calculated or system-generated values.
• Max Length (Premium)
  • The Max Length setting limits the maximum number of characters customers can enter in the text field. This prevents overly long input and helps ensure data fits within your system’s constraints or business requirements.
  • Enter the maximum number of characters allowed (e.g., 50, 100, 200)
  • Consider typical input lengths for your use case
  • The plugin enforces this limit through HTML5 `maxlength` attribute and JavaScript validation
  • Set realistic limits based on actual data requirements. Consider typical input lengths for your use case. Test that limits work correctly across different browsers. Provide clear guidance about character limits in labels or placeholders.
• Field Restrictions
  • Field restrictions help ensure inputs remain valid and consistent. The Input Validation setting (covered in Text Options above) allows you to control what type of content can be entered. You can limit input to specific formats, set character limits (Premium), or restrict input to letters, numbers, or specific patterns.
  • Defining allowed characters prevents errors and maintains data quality, helping customers receive clear guidance while submitting correct and usable information. The plugin implements both HTML5 validation attributes and JavaScript validation to enforce these restrictions across different browsers and devices.
  • Available Restriction Types:
    • None (Allow All): No restrictions, accepts any text – maximum flexibility
    • Email: Only valid email addresses – ensures proper email format
    • URL (Premium): Only valid URLs – ensures proper website address format
    • Number: Only numeric values – whole numbers only
    • Numbers with Decimals: Numeric values including decimal points
    • Text Only: Letters and spaces only, no numbers or special characters
    • Text and Numbers: Alphanumeric input, no special characters