Text Input Element
The Text Input element provides a single-line text field for collecting short text responses from users.
Overview
Text Input is ideal for:
- Names (first name, last name)
- Usernames
- Short answers
- Single-line entries
- Search fields
Adding a Text Input
- Open the Website Builder
- Find Text Input in the Elements panel
- Drag it onto your page
- Configure properties in the Floating Design Panel
Properties
General Tab
| Property | Description |
|---|---|
| Question Text | Label displayed above the input |
| Placeholder Text | Hint text shown inside the empty input |
| Default Value | Pre-filled value when the page loads |
Color Tab
| Property | Description | Default |
|---|---|---|
| Panel Background | Container background | Transparent |
| Input Background | Input field background | White (#ffffff) |
| Input Border | Input field border | Transparent blue |
| Input Text Color | Typed text color | Dark gray (#2B2B2B) |
Dimensions Tab
| Property | Description | Default |
|---|---|---|
| Font Size | Text size | 18px |
| Font Family | Text font | Nunito-SemiBold |
| Padding | Inner spacing | 12-15px |
| Border Radius | Corner rounding | 5px |
Database Integration
Text Input can save data to the card database:
- Open the Connect Tab
- Enable database connection
- Choose the target field
Data is saved when users complete the input.
Styling
The default styling includes:
- Clean white background
- Subtle box shadow for depth
- Rounded corners
- Readable font size
Customize in the Color and Dimensions tabs to match your design.
Use Cases
Name Field
Label: "First Name"
Placeholder: "Enter your first name"
Default: (empty)Username
Label: "Username"
Placeholder: "Choose a username"
Default: (empty)Search Box
Label: (empty)
Placeholder: "Search..."
Default: (empty)Pre-filled Field
Label: "Company"
Placeholder: "Your company name"
Default: "Acme Corp"Best Practices
Use clear labels - Tell users exactly what to enter
Provide helpful placeholders - Show the expected format
Set appropriate defaults - Pre-fill when the value is known
Keep it focused - For longer text, use Text Area instead
Consider validation - Mark required fields clearly
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index Text Area - https://help.acenji.com/#/./create-web-application/elements/text-area/index Connect Tab - https://help.acenji.com/#/./create-web-application/website-builder/floating-design-panel/element-section/connect-tab/index
Background image
A Text Input can have a picture behind it: upload it under Color > Container > Background Image, then size it, place it, or drag it into position. See Background Image.