Appearance
Field Types
Krafter Forms supports all standard HTML input types and provides a visual form builder in the dashboard. This page covers supported field types, special fields, and how to use the form builder.
Supported Input Types
The following HTML input types are supported as form fields:
| Type | HTML Element | Description |
|---|---|---|
text | <input type="text"> | Single-line text input |
email | <input type="email"> | Email address with validation |
textarea | <textarea> | Multi-line text input |
number | <input type="number"> | Numeric input |
tel | <input type="tel"> | Telephone number |
url | <input type="url"> | URL with validation |
select | <select> | Dropdown selection |
checkbox | <input type="checkbox"> | Boolean toggle or multi-select |
radio | <input type="radio"> | Single selection from options |
hidden | <input type="hidden"> | Hidden value (not shown to user) |
date | <input type="date"> | Date picker |
TIP
You do not need to define fields in advance. The public endpoint accepts any field name. Defining fields is optional and mainly used for the form builder, HTML snippet generation, and validation.
Form Builder
The dashboard includes a visual form builder for configuring fields without writing HTML.
Features
- Add fields -- Select a field type and give it a name and label
- Remove fields -- Delete fields you no longer need
- Reorder fields -- Drag and drop to change field order
- Configure options -- Set required, placeholder, and default values
- Select/radio options -- Define the list of options for dropdown and radio fields
HTML Snippet Generation
Once you have configured your fields in the builder, click HTML Snippet to generate a ready-to-use HTML form. The generated snippet includes:
- Correct
actionandmethodattributes - All configured fields with labels and attributes
- A honeypot field for spam protection
- A submit button
You can copy the snippet directly into your website.
Special Fields
Field names prefixed with _ (underscore) have special behavior and are not stored as part of the submission data.
_honeypot / _gotcha
Hidden fields for spam detection. If a bot fills in these fields, the submission is flagged as spam.
html
<!-- CSS-hidden honeypot field -->
<div style="position: absolute; left: -9999px;">
<input type="text" name="_honeypot" tabindex="-1" autocomplete="off">
</div>See Spam Protection for details.
_redirect
URL to redirect the user to after a successful submission. Only used for HTML form submissions (not JSON).
html
<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you">_subject
Override the default email notification subject line. The default subject is "New submission: {form name}".
html
<input type="hidden" name="_subject" value="New contact request">_replyto
Specify the form field name whose value should be used as the reply-to address in notification emails. This is the field name, not the email address itself.
html
<!-- When the user fills in the "email" field, that value becomes the reply-to address -->
<input type="hidden" name="_replyto" value="email">_cc
Comma-separated list of additional email addresses to CC on notification emails.
html
<input type="hidden" name="_cc" value="manager@company.com,support@company.com">Automatically Stripped Fields
The following fields are automatically stripped from submission data and are never stored:
| Field | Purpose |
|---|---|
_csrf_token | Phoenix/Rails CSRF tokens |
_utf8 | UTF-8 encoding markers |
Example: Full HTML Form
Here is a complete example using multiple field types and special fields:
html
<form action="https://app.krafter.dev/f/contact" method="POST">
<!-- Honeypot (hidden from real users) -->
<div style="position: absolute; left: -9999px;">
<input type="text" name="_honeypot" tabindex="-1" autocomplete="off">
</div>
<!-- Redirect after submission -->
<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you">
<!-- Custom notification subject -->
<input type="hidden" name="_subject" value="New contact request">
<!-- Use the email field as reply-to -->
<input type="hidden" name="_replyto" value="email">
<!-- Visible fields -->
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">
<label for="subject">Subject</label>
<select id="subject" name="subject">
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="sales">Sales</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<label>
<input type="checkbox" name="newsletter" value="yes">
Subscribe to newsletter
</label>
<button type="submit">Send</button>
</form>