# TemplateForm
The Blazor Form (TemplateForm) builds data-bound forms with built-in validation and submit handling.
Keywords: form, edit, validation, submit, editcontext
> API reference: [RadzenTemplateForm API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenTemplateForm-1.md)
## Examples
## Blazor TemplateForm
The Blazor Form (TemplateForm) builds data-bound forms with built-in validation and a custom EditContext.
### Basic Usage
Bind a model to the form via the `Data` property, add Radzen validators such as `RadzenRequiredValidator` and `RadzenEmailValidator`, and handle the `Submit` and `InvalidSubmit` events.
```razor
@code {
class Registration
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
}
Registration model = new Registration();
EventConsole console;
void OnSubmit(Registration args)
{
console.Log($"Submit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true })}");
}
void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
{
console.Log($"InvalidSubmit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true })}");
}
}
```
### Custom EditContext
Provide your own `EditContext` instead of `Data` for advanced scenarios such as programmatic validation via the `EditContext.Validate()` method.
```razor
@code {
class ContactInfo
{
[Required(ErrorMessage = "Name is required.")]
public string Name { get; set; }
[Required(ErrorMessage = "Phone is required.")]
[Phone(ErrorMessage = "Provide a valid phone number.")]
public string Phone { get; set; }
}
ContactInfo model = new ContactInfo();
EditContext editContext;
EventConsole console;
protected override void OnInitialized()
{
editContext = new EditContext(model);
}
void OnSubmit(ContactInfo args)
{
console.Log($"Submit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true })}");
}
void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
{
console.Log($"InvalidSubmit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true })}");
}
void Validate()
{
var isValid = editContext.Validate();
console.Log($"Validate: IsValid = {isValid}");
}
}
```
### Form Action
Set the `Action` and `Method` properties to perform a traditional HTML form submission to a URL.
```razor
@code {
class SearchQuery
{
public string Query { get; set; }
}
SearchQuery model = new SearchQuery();
}
```