There are no notes for this item.

<div class="feedback-form box-no-icon accordion {{ modifier }}">
  <h2><button class="accordion--button" aria-expanded="false" aria-controls="feedback-form-content">{{ 'Can we improve something about this page?' }}</button></h2>
  <div id="feedback-form-content" class="accordion--content">
        {% include '@heading' with {
          'type': 'h3',
          'heading_text': 'You can contact Gentinfo for personal questions or complaints.'
        } %}

        {% include '@paragraph' with {
          'text': 'How to reach?'
        } %}

        {% include '@list' with {
          'type': 'icon-list',
          'icon_items': [
            '<i class="icon-phone"></i><span>By phone: <a href="tel: 09 210 10 10">09 210 10 10</a> (from monday till saturday from 08:00 till 19:00)</span>',
            '<i class="icon-envelope"></i><span>Send us an <a href="mailto: info@stad.gent">email</a></span>',
            '<i class="icon-twitter-outline"></i><span>Through the <a href="https://twitter.com/stadgent">Twitter account</a> of the City of Gent (<a href="https://twitter.com/stadgent">@StadGent</a>)</span>',
            '<i class="icon-document"></i><span>Through the <a href="#">contact form</a></span>',
            '<i class="icon-chat-round"></i><span>Through the <a href="#">chat</a></span>',
          ]
        } %}

    <form action="#" class="no-style">
      {% include '@heading' with {
        'type': 'h3',
        'heading_text': 'Do you have suggestions or comments concerning this page?'
      } %}

      {% include '@form-item' with {
        input_component: "textarea",
        textarea_id: "textarea_id",
        id: "textarea_id",
        name: "textarea_name",
        label: 'Message',
        field_description: null
      } %}

      {% include '@button' with {
        'text': 'Send suggestion',
        'type': 'primary',
        'modifier': 'button-large'
      } %}
    </form>
  </div>
</div>
<div class="feedback-form box-no-icon accordion ">
    <h2><button class="accordion--button" aria-expanded="false" aria-controls="feedback-form-content">Can we improve something about this page?</button></h2>
    <div id="feedback-form-content" class="accordion--content">
        <h3>You can contact Gentinfo for personal questions or complaints.</h3>

        <p class="">How to reach?</p>

        <ul class="icon-list ">
            <li><i class="icon-phone"></i><span>By phone: <a href="tel: 09 210 10 10">09 210 10 10</a> (from monday till saturday from 08:00 till 19:00)</span></li>
            <li><i class="icon-envelope"></i><span>Send us an <a href="mailto: info@stad.gent">email</a></span></li>
            <li><i class="icon-twitter-outline"></i><span>Through the <a href="https://twitter.com/stadgent">Twitter account</a> of the City of Gent (<a href="https://twitter.com/stadgent">@StadGent</a>)</span></li>
            <li><i class="icon-document"></i><span>Through the <a href="#">contact form</a></span></li>
            <li><i class="icon-chat-round"></i><span>Through the <a href="#">chat</a></span></li>
        </ul>

        <form action="#" class="no-style">
            <h3>Do you have suggestions or comments concerning this page?</h3>

            <div class="form-item ">
                <label for="textarea_id">Message
                </label>
                <div class="form-columns">
                    <div class="form-item-column">
                        <textarea name="textarea_name" id="textarea_id">
</textarea>
                    </div>
                    <div class="form-item-column">
                    </div>
                </div>
            </div>

            <button type="button" class="button button-primary button-large ">
                Send suggestion
            </button>
        </form>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .feedback-form {
      > * {
        max-width: $six-of-bp-container;
      }
    
      h2 {
        @extend %h3;
    
        margin-bottom: 0;
      }
    
      .accordion--content {
        margin-top: 1rem;
      }
    
      form {
        label {
          @extend %visually-hidden;
        }
    
        textarea {
          min-height: 5.5rem;
        }
    
        .form-item-column {
          flex: 0 0 100%;
        }
      }
    }
    
  • URL: /components/raw/feedback-form/_feedback-form.scss
  • Filesystem Path: components/41-organisms/feedback-form/_feedback-form.scss
  • Size: 336 Bytes