Contact Form Component

What it does

Documents the Joomla com_contact email form markup using design system classes. The actual form is rendered by PHP (default_form.php template override); this Nunjucks component mirrors that markup for design system documentation.

Form structure

<form class="contact-form form-validate" novalidate>
  <fieldset class="contact-form__fields flow">
    <div class="control-group">
      <label class="control-label required" for="contact_name">Name *</label>
      <div class="controls">
        <input class="form-control required" type="text" … />
      </div>
    </div>
    <!-- … more fields … -->
  </fieldset>
  <div class="contact-form__submit">
    <button class="btn btn-primary validate" type="submit">Nachricht senden</button>
  </div>
</form>

Fields

Field	Type	Required
`contact_name`	`text`	Yes
`contact_email`	`email`	Yes
`contact_subject`	`text`	Yes
`contact_message`	`textarea`	Yes
`contact_email_copy`	`checkbox`	No

CSS class reference

Class	Element
`.contact-form`	`<form>` root
`.contact-form__fields`	`<fieldset>` wrapping all fields
`.contact-form__submit`	Submit button wrapper
`.control-group`	Row wrapper for each field
`.control-label`	`<label>` element
`.controls`	Input wrapper `<div>`
`.form-control`	`<input>` / `<textarea>`

SCSS

Form base styles live in src/media/templates/site/jcrafts/scss/base/_form.scss. Layout and spacing for .contact-form in scss/components/_contact-info.scss.

HTML Code (Demo)

<form class="contact-form form-validate" novalidate>
  <fieldset class="contact-form__fields flow">
    <div class="control-group">
      <label class="control-label required" for="contact_name">
         Name<span class="star" aria-hidden="true"> *</span>
      </label>
      <div class="controls">
        <input class="form-control required" type="text" id="contact_name" name="jform[contact_name]" required autocomplete="name" />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label required" for="contact_email">
         Email<span class="star" aria-hidden="true"> *</span>
      </label>
      <div class="controls">
        <input class="form-control required validate-email" type="email" id="contact_email" name="jform[contact_email]" required autocomplete="email" />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label required" for="contact_subject">
         Subject<span class="star" aria-hidden="true"> *</span>
      </label>
      <div class="controls">
        <input class="form-control required" type="text" id="contact_subject" name="jform[contact_subject]" required />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label required" for="contact_message">
         Message<span class="star" aria-hidden="true"> *</span>
      </label>
      <div class="controls">
        <textarea class="form-control required" id="contact_message" name="jform[contact_message]" rows="6" required></textarea>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="contact_email_copy">
      Send me a copy</label>
      <div class="controls">
        <input class="form-control" type="checkbox" id="contact_email_copy" name="jform[contact_email_copy]" value="1" />
      </div>
    </div>
  </fieldset>
  <div class="contact-form__submit">
    <button class="btn btn-primary validate" type="submit">
    Send message</button>
  </div>
</form>

Configuration

Component Config: Forms/contact-form/contact-form.config.js

{
  "labelName": "Name",
  "labelEmail": "Email",
  "labelSubject": "Subject",
  "labelMessage": "Message",
  "labelCopy": "Send me a copy",
  "labelSubmit": "Send message"
}