0

The YAML below represents a webform. Theming is simple using the twig template also found below, but the label for email is inline with the input field by default. How can the labels in the webform be accessed through twig for further theming?

Webform YAML

name:
  '#title': Name
  '#type': textfield
  '#required': true
  '#default_value': '[current-user:display-name]'
email:
  '#title': Email
  '#type': email
  '#required': true
  '#default_value': '[current-user:mail]'
subject:
  '#title': Subject
  '#type': textfield
  '#required': true
  '#test': 'Testing contact webform from [site:name]'
message:
  '#title': Message
  '#type': textarea
  '#required': true
  '#test': 'Please ignore this email.'
actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#submit__label': 'Send message'

webform--contact.html.twig

<div class="container">
    <form{{ attributes }}>
        <div class="row">
            <div class="col-md-6">
            {{ element.elements.name }}
            {{ element.elements.email }}
            {{ element.elements.subject }}
            </div>
            <div class="col-md-6">
            {{ element.elements.message }}
            {{ element.form_token }}
            {{ element.form_build_id }}
            {{ element.form_id }}
            {{ element.elements.actions }}
            </div>
        </div>
    </form>
</div>

3 Answers 3

3

Your last comment:

Well that isn't very intuitive. It would be nice to just access everything directly in the twig template.

OK, then try different templates:

When the form theme wrapper is executed the inside of the wrapper is already rendered in {{ children }}. Don't try to render the form again, use this template only for the form tag and the outside container:

webform--contact.html.twig

<div class="container">
   <form{{ attributes }}>
   {{ title_prefix }}
   {{ children }}
   {{ title_suffix }}
   </form>
</div>

Use for the inside of the form the #theme template itself:

webform-submission-form--contact.html.twig

    <div class="row">
        <div class="col-md-6">
        {{ form.name }}
        {{ form.email }}
        {{ form.subject }}
        </div>
        <div class="col-md-6">
        {{ form|without('name', 'email', 'subject') }}
        </div>
    </div>

Finally you can theme the form element in form-element--webform-email.html.twig

1
  • For webform 6.2, I had to add it as {{ form['elements']['full_name'] }} to get the fields, Is that normal?
    – Zuhair
    Commented Sep 21, 2022 at 7:43
1

you are very close !

all you need to do is this

<label>
  {{ element.elements.name["#title"] }}
</label>

// just run to get all possible element, array values  {{ dump(element.elements.email) }} 
4
  • This works, although the label is printing twice now. Tried to see what other variables are available by using the dump function that you provided. But it doesn't print or render anything.
    – crayden
    Commented May 11, 2020 at 0:14
  • Was able to turn debugging on and see the dump output, but I can't seem to find the correct variable for the form input. ["#input"] is just a boolean that prints "1" (true).
    – crayden
    Commented May 11, 2020 at 0:52
  • no all that stuff is the render array, you cant get an straight up html input from this array you should look into creating a pre possessor to make new array or pass what you need to the template, @see template_preprocess_webform()
    – taggartJ
    Commented May 11, 2020 at 3:47
  • Well that isn't very intuitive. It would be nice to just access everything directly in the twig template.
    – crayden
    Commented May 11, 2020 at 4:26
0

Create a tempalte

webform-submission-form--{webform_machine_name}.html.twig 
Ex. webform-submission-form--contact-us.html.twig

{{ form.elements.field_machine_name }}
Ex. {{ form.elements.your_name }}
    {{ form.elements.email_address }}

    {{ form.elements.actions }}
    {{ form.form_build_id }}
    {{ form.form_token }}
    {{ form.form_id }}
  

Make sure that you added also form_token, form_build_id and form_id

    {{ form.form_build_id }}
    {{ form.form_token }}
    {{ form.form_id }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.