1

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.

5

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 }}

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

{{ element.actions }}

  1. 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

1
<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>
  • This one work for me as expected. – Shamsher Alam Jun 1 '18 at 15:36
  • Can you explain a little how this is different that the other answers? – mpdonadio Jun 2 '18 at 15:45
  • thanks for your help, this is the same way I figured out using kint. I guess no need for this: {{ element.elements.form_token }} {{ element.elements.form_build_id }} {{ element.elements.form_id }} – Ibrahim Samir Jun 30 '18 at 14:31
0

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.

  • Thanks @jrockowitz for your reply. I have already checked this link before. it is useful when you need to style individual element in the form (e.g email), whereas what I'm seeking is how to theme the form itself and access its elements within the form template. I also want to avoid fields theming (if I have a form with doszens of fields I will end up with dozens of twig files). Anyhow I've figured a solution that I'm going to post it now – Ibrahim Samir Apr 11 '17 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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