How to access webform elements in webform.html.twig

Question

I'm trying to figure out a way to access webform elements from webform.html.twig.

I need to style the form; wrapping some elements and adding bunch of styles all I have in the webform.html.twig is "children" variable which renders the whole form, whereas I need to access every element individually.

I found a link on the web for webform-form.html.twig which might do what I need, however I can't find it in webform template folder

http://cgit.drupalcode.org/webform/tree/templates/webform-form.html.twig?id=1135b65031cd6cd195c2e638300e5ef945a6f652

Any help with this matter is much appreciated.

Answer 1

I have figured out a solutions for this situation.

1. create a tempalte file for your form (ex. webform--newsletter.html.twig)
2. there is a variable (element) where you can access each field of the form like this:

{{ element.elements.YOUR_FIELD_NAME }}

3. you need to output the form action (submit) at the end of the form link this:

{{ element.actions }}

4. the trick with this solution is that you need to output a couple of hidden form elements that is required for the form to be submitted properly:

{{ element.form_token }}

{{ element.form_build_id }}

{{ element.form_id }}

My final form template looks like this:

<div class="request-form">
  <div class="form-wrap clearfix">
    <div class="col-md-4 form-desc">
      {{ element.elements.form_description }}
    </div>
    <div class="col-md-8">
      <form{{ attributes }}>
        {{ title_prefix }}
        <div class="row">
          <div class="col-md-6">
            {{ element.elements.name }}
            {{ element.elements.email }}
            {{ element.elements.phone }}
          </div>
          <div class="col-md-6">
            {{ element.elements.message }}
            {{ element.form_token }}
            {{ element.form_build_id }}
            {{ element.form_id }}
            {{ element.actions }}
          </div>
        </div>
        {{ title_suffix }}
      </form>
    </div>
  </div>
</div>

Hope that helps anyone else

Update: I forgot to mention that you also need to print out the following element:

{{ element.form_token }}

Credit goes to maestrojed Webform twig template causes “the form has become outdated” error

Answer 2

I know this is a late reply, but I haven't seen the following approach mentioned anywhere else. I think the above answers are a bit hacky. What I do is edit the webform submission html twig file with my own markup, right above the {{form}} line. So in essence, I would access the name input and label by typing {{form.elements.name}} between my html tags, and then between my markup and the {{form}} line type this {% set form =form|without('elements') %}

This keeps the form token, the form id, the form build id so the form can submit

Answer 3

<div class="contact-box">
  <div class="wrap">
    {{ element.elements.form_token }}
    {{ element.elements.form_build_id }}
    {{ element.elements.form_id }}
    <div class="request-form">
      <div class="form-wrap clearfix">
        <div class="col-md-4 form-desc">
          {{ element.elements.form_description }}
        </div>
        <div class="col-md-8">
          <form{{ attributes }}>
            {{ title_prefix }}
            <div class="row">
              <div class="col-md-6">
                {{ element.elements.salutation }}
                {{ element.elements.company }}
                {{ element.elements.first_and_last_name }}
                {{ element.elements.phone_number }}
                {{ element.elements.phone_number }}
                {{ element.elements.e_mail }}
                {{ element.elements.theme }}
                {{ element.elements.meeting }}
              </div>
              <div class="col-md-6">
                {{ element.elements.message }}
                {{ element.form_token }}
                {{ element.form_build_id }}
                {{ element.form_id }}
                {{ element.elements.actions }}
              </div>
            </div>
            {{ title_suffix }}
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

Webforms in Drupal 8 are basically just FAPI render arrays with a UI plus some enhancements. To learn how to theme a Webform and its elements, you should search for articles about theming forms in Drupal 8 which will return some useful blog posts like this one.