> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Contact form

> Example code for a WEBSALE contact form: build a customizable contact.htm template that extends the base layout and renders form fields.

Example code for a contact form

In the template views\contact.htm

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ extends "layouts/layout.htm" }}

{{ block content_main }}

  {{ var $formId = "contact"}}
  {{ var $action = $wsActions.create('InquirySend') }}
  
  <form method="POST" id="contact" action="{{= $wsViews.current.url() }}">
    <input type="hidden" name="wscsrf" value="{{= $action.csrf }}">
    <input type="hidden" name="wsact" value="{{= $action.id }}">
    <input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
    <input type="hidden" name="wscaptchatoken" id="recaptchaToken">

    {{# Pass the form ID so the configuration can be identified #}}
    <input type="hidden" name="formId" value="{{= $formId }}">

    <label for="email">Email</label>
    <input type="text" name="email" value="{{= $action.params.email | ifNull('') }}" class="form-control">

    <label for="firstName lastName">First name / last name</label>
    <input type="text" name="form.firstName" value="{{= $action.params.form.firstName | ifNull('') }}" class="form-control">
    <input type="text" name="form.lastName" value="{{= $action.params.form.lastName | ifNull('') }}" class="form-control">

    <label for="subject" class="col-sm-3 control-label">Text</label>
    <textarea name="form.text" class="form-control">{{= $action.params.form.text | ifNull('') }}</textarea>

    <button type="submit">Submit</button>
  </form>
{{ /block }}
```

In this code example, we show which data was successfully submitted. If submission failed, we display the corresponding error messages.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $action.success }}
    {{ var $inquiry = $wsForm.load($action.successInfo.inquiryId) }}
    Thank you for your inquiry.
    Here is your data:

    <label for="email">Email</label>
    {{= $inquiry.submitter.email }}


    <label for="email">IP address</label>
    {{= $inquiry.submitter.ipAddress }}

    <label for="email">Inquiry number</label>
    {{= $inquiry.id }}

    <label for="email">Form</label>
    {{= $inquiry.formId }}
    
    <label for="firstName lastName">First name / last name</label>
    {{= $inquiry.form.firstName.value }}
    {{= $inquiry.form.lastName.value }}

    <label for="subject">Customer number</label>
    {{= $inquiry.form.customerNumber.value }}

    <label for="subject">Subject</label>
    {{= $inquiry.form.subject.value }}

    <label for="subject">Text</label>
    {{= $inquiry.form.text.value }}
    
  {{ else }}

  {{ if $action.globalErrors }}
    {{ foreach $err in $action.globalErrors }}
      {{ if $err.text }}
        {{= $err.text }}
          {{ else }}
          {{= $err.code }}
        {{ /if }}
      {{ /foreach }}
    {{ /if }}
  
    {{ if $action.errors }}
      {{ foreach $err in $action.errors }}
        {{ if $err.text }}
          {{= $err.field }} - {{= $err.text }} - {{= $err.subCode }}
          {{ else }}
            {{= $err.field }} - {{= $err.code }} - {{= $err.subCode }}
        {{ /if }}
      {{ /foreach }}
    {{ /if }}
{{ /if }}
```

## Variables/fields

The following variables are available for this form. The values of the variables can be accessed via the `.value` operator.

| **Variable**                        | **Function**                         |
| ----------------------------------- | ------------------------------------ |
| \$action.params.email               | Field for the email address          |
| \$action.params.form.firstName      | Field for the first name             |
| \$action.params.form.lastName       | Field for the last name              |
| \$action.params.form.customerNumber | Field for the customer number        |
| \$action.params.form.subject        | Field for the subject of the message |
| \$action.params.form.text           | Field for the message                |
| \$action.params.form.text.value     | Text of the message                  |
| \$inquiry.id                        | ID of the inquiry                    |
| \$inquiry.formId                    | ID of the form                       |