<header class="header section--wrapper">
    <div class="content-container">

        <nav class="hamburger-menu visible-mobile header-component">
            <button class="hamburger-menu__toggle">Menu</button>
            <div class="hamburger-menu__overlay"></div>
            <div class="hamburger-menu__drawer" tabindex="-1">
                <a href="javascript:void(0);" class="close">Sluit menu <i class="icon-cross"></i></a>
                <ul class="no-style">
                    <li><a href='javascript:void(0);'>Menu item 1</a></li>
                    <li><a href='javascript:void(0);' class='active'>Menu item 2</a></li>
                    <li><a href='javascript:void(0);'>Menu item 3</a></li>
                    <li><a href='javascript:void(0);'>Menu item 4</a></li>
                </ul>
            </div>
        </nav>
        <div id="logo" class="header-component">
            <div class="site-logo">
                <a href="#" title="Home" rel="home">
      <img src="/styleguide/img/svg/logo.svg" alt="Home"  />
    </a>
                <div class="site-name">
                    <div>
                        <p class="">City of Ghent Sitename</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="profile" class="header-component right">
            <div class="mijn-gent-block">

                <div class="toggle">
                    <div class="label">
                        <a href='javascript:(void);' class="toggle" title="">Username</a>
                    </div>
                    <div class="picture">
                        <img src="https://via.placeholder.com/32x32" alt="Username" />
                    </div>
                </div>

                <div class="content">
                    <div class="mijn-gent-component">
                        <header>
                            <h3>Mijn Bibliotheek Gent</h3>
                        </header>

                        <section>
                            <ul class="no-style">
                                <li><a href='javascript:(void);'>Overzicht</a></li>
                                <li><a href='javascript:(void);'>Leestips</a></li>
                                <li><a href='javascript:(void);'>Mijn profiel</a></li>
                            </ul>
                        </section>

                    </div>
                    <div class="mijn-gent-component">
                        <header>
                            <h3>Mijn Gent</h3>
                        </header>

                        <section>
                            <ul class="no-style">
                                <li><a href='javascript:(void);'>Mijn profiel</a></li>
                                <li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
                                <li><a href='javascript:(void);'>Historiek</a></li>
                            </ul>
                        </section>

                    </div>
                    <footer>
                        <a href='javascript:(void);' title="">Afmelden</a>
                    </footer>
                </div>

            </div>
        </div>

        <div id="header-search-mobile" class="header-search-mobile header-component right">
            <form class="form form-search">
                <div class="form-label">
                    <label for="">
</label>
                </div>
                <input type="search" name="header-search-mobile" id="header-search-mobile" placeholder="What are you looking for?" class="inline">
                <input type="submit" value="Search" class="btn btn--inline" />
            </form>
            <a href="javascript:(void);" class="close">Sluiten</a>
        </div>
        <div id="header-search" class="header-search header-component right">
            <form class="form form-search">
                <div class="form-label">
                    <label for="">
</label>
                </div>
                <input type="search" name="header-search" id="header-search" placeholder="What are you looking for?" class="inline">
                <input type="submit" value="Search" class="btn btn--inline" />
            </form>
        </div>
    </div>

    <nav class="header--main-menu">
        <div class="content-container">
            <ul class="no-style">
                <li><a href='javascript:void(0);'>Menu item 1</a></li>
                <li><a href='javascript:void(0);' class='active'>Menu item 2</a></li>
                <li><a href='javascript:void(0);'>Menu item 3</a></li>
                <li><a href='javascript:void(0);'>Menu item 4</a></li>
            </ul>
        </div>
    </nav>
</header>

<nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
    <ol class="content-container breadcrumb">
        <li><a href='#'>Stad.gent</a></li>
        <li><a href='#'>Overview</a></li>
        <li><span>Overview</span></li>
        <li><span>Overview</span></li>
        <li><span>Page title</span></li>
    </ol>
</nav>

<section class="page-container section--default">
    <div class="content-container">
        <div class="row">
            <div class="col-desktop-7">
                <h1>Reserveer Balkonzaal - CityRoom</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-desktop-3">
                <div class="form-progress">
                    <ul class="no-style">
                        <li class="progress progress-previous">
                            <a href="javascript:(void);" class="indicator">
          <span class='count'><i class="icon icon-check"></i></span>
          <span class="label">Describe your activity</span>
        </a>
                        </li>
                        <li class="progress progress-active">
                            <a href="javascript:(void);" class="indicator">
          <span class='count'>2</span>
          <span class="label">Plan your activity</span>
        </a>
                        </li>
                        <li class="progress">
                            <span class='count'>3</span>
                            <span class="label">Fill in your personal information</span>
                        </li>
                        <li class="progress">
                            <span class='count'>4</span>
                            <span class="label">Enter your billing information</span>
                        </li>
                        <li class="progress">
                            <span class='count'>5</span>
                            <span class="label">Questions or remarks</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-desktop-9">
                <fieldset class="form-item">
                    <legend>
                        1. Describe your activity
                    </legend>

                    <div class="fieldset-wrapper">
                        <div class="form-item">
                            <div class="form-label">
                                <label for="">Activity name
</label>
                            </div>
                            <div class="form-columns">
                                <div class="form-item-column">
                                    <div class="field-description">We can identify you better through the name of your activity.</div>
                                </div>
                                <div class="form-item-column">
                                    <input type="text" name="" id="" />
                                    <div class="description">Enter a name for your activity.</div>

                                    <div class="field-error">Please enter a valid name for your activity.</div>
                                </div>
                            </div>
                        </div>

                        <div class="form-item">
                            <div class="form-label">
                                <label for="">Describe your activity and it's purpose
</label>
                            </div>
                            <div class="form-columns">
                                <div class="form-item-column">
                                    <div class="field-description">A short and simplified description of your activity.</div>
                                </div>
                                <div class="form-item-column">
                                    <textarea name="" id="">
</textarea>
                                    <div class="description">Describe your activity and it's purpose.</div>

                                    <div class="field-error">Please shortly describe your activity.</div>
                                </div>
                            </div>
                        </div>

                        <fieldset class="form-item">
                            <legend>
                                2. Is this a profit-oriented activity?
                            </legend>

                            <div class="fieldset-wrapper">
                                <div class="field-description">For profit purposes = the applicant of the room strives to make a profit, i.e. the proceeds of the activity exceed the costs associated with it.</div>

                                <div class="form-item">
                                    <div class="form-label">
                                        <label for="">
</label>
                                    </div>
                                    <div class="form-columns">
                                        <div class="form-item-column">
                                        </div>
                                        <div class="form-item-column">

                                            <input type="radio" id="radio-1" name="radiogroup" class="radio " />
                                            <label for="radio-1">Ik reserveer deze zaal als particulier of feitelijke vereniging
</label>

                                            <input type="radio" id="radio-2" name="radiogroup" class="radio " />
                                            <label for="radio-2">Ik reserveer deze zaal als vennootschap of een vereniging met rechtspersoonlijkheid
</label>

                                            <div class="description"></div>

                                        </div>
                                    </div>
                                </div>

                                <fieldset class="inline-form-elements address-component">
                                    <legend>
                                        Personal information.
                                    </legend>
                                    <div class="fieldset-wrapper">
                                        <div class="form-item address-name">
                                            <div class="form-label">
                                                <label for="address-name">Name
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="text" name="address-name" id="address-name" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-firstname">
                                            <div class="form-label">
                                                <label for="address-firstname">Firstname
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="text" name="address-firstname" id="address-firstname" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-street">
                                            <div class="form-label">
                                                <label for="address-street">Street
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="text" name="address-street" id="address-street" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-number">
                                            <div class="form-label">
                                                <label for="address-number">Number
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="number" name="address-number" id="address-number" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-box-number">
                                            <div class="form-label">
                                                <label for="address-box-number">Box number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="number" name="address-box-number" id="address-box-number" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-postal-code">
                                            <div class="form-label">
                                                <label for="address-postal-code">Postal code
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="number" name="address-postal-code" id="address-postal-code" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-city">
                                            <div class="form-label">
                                                <label for="address-city">City
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="text" name="address-city" id="address-city" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-country">
                                            <div class="form-label">
                                                <label for="address-country">Country
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <select name="address-country" id="address-country">
  
          <option>Country 1</option>
    
  
          <option>Country 2</option>
    
  </select>
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-item address-nim">
                                            <div class="form-label">
                                                <label for="address-nim">National Insurance Number
</label>
                                            </div>
                                            <div class="form-columns">
                                                <div class="form-item-column">
                                                </div>
                                                <div class="form-item-column">
                                                    <input type="text" name="address-nim" id="address-nim" />
                                                    <div class="description"></div>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </fieldset>

                            </div>
                        </fieldset>

                    </div>
                </fieldset>

                <div class="form-actions">
                    <input type="submit" value="Submit" class="btn " />
                    <a href='' title="">Cancel</a>
                </div>

            </div>
        </div>
    </div>
</section>

<div class="section--accent newsletter-block">
    <div class="content-container">
        <div class="newsletter-block__image">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/500x250" alt="Newsletter image" />
            </div>
            <div class="island section--wrapper">
                <h2>Don't miss the latest news of Ghent.</h2>
            </div>
        </div>
        <div class="island section--default newsletter-block__content">
            <div>
                <h3>Subscribe to the newsletter of the City of Ghent.</h3>
                <ul class="">
                    <li>Receive weekly updates of the City of Ghent.</li>
                    <li>Be the first to discover new events.</li>
                    <li>Already more then 12.0000 subscribers.</li>
                </ul>
            </div>

            <div class="newsletter-block__form">
                <input type="email" name="newsletter-email" id="newsletter-email" />

                <input type="submit" value="Subscribe" class="btn " />
            </div>
        </div>
        <div class="island section--wrapper newsletter-block__social-media">
            <h3>Follow us on:</h3>
            <ul class="no-style">
                <li><a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a></li>
                <li><a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a></li>
                <li><a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a></li>
                <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a></li>
                <li><a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a></li>
            </ul>
        </div>
    </div>
</div>

<footer class="footer section--wrapper" role="contentinfo" data-columns="4">
    <div class="content-container">
        <div class="row">
            <div class="footer--column">
                <div class="section--accent island dg-default-block">
                    <h3>Gentinfo</h3>
                    <ul class="no-style">
                        <li><a class="phone" href="tel:+3288888888">08 888 88 88 - mo - sat from 8-19u</a></li>
                        <li><a class="email" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
                        <li><a class="link" href="">Contact form</a></li>
                        <li><a class="btn textballoon">Online Chat</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer--column">
                <div class="dg-block-post-address island">
                    <h3>Mailing address</h3>
                    <p class=""><span>City of Ghent</span><br>
                        <span> Botermarkt 1</span><br>
                        <span>9000 Ghent</span></p>
                </div>
                <ul class="dg-block-links island">
                    <li><a href='https://stad.gent/werken-ondernemen/werken/werken-bij-de-stad-gent/vacatures-en-solliciteren'>Vacancies</a></li>
                    <li>
                        <a href='https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan;>City plan</a></li>
            <li><a href=' http://persruimte.stad.gent/ '>Press room City of Ghent</a></li>
            <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info-en-privacy '>Legal info and privacy</a></li>
    </ul>
      </div>
      <div class="footer--column">
        <div class="dg-blocks-social island">
  <h3>Volg Stad Gent op</h3>
  <ul class="no-style">
            <li><a href="https://www.facebook.com/stadsbestuurgent" class="facebook">stadsbestuurgent</a></li>
            <li><a href="https://twitter.com/stadgent" class="twitter">@Stadgent</a></li>
            <li><a href="https://www.linkedin.com/company/stad-gent" class="linkedin">Stad Gent</a></li>
            <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" class="youtube">YouTube Stad Gent</a></li>
            <li><a href="https://www.instagram.com/stadgent/" class="instagram">@stadgent</a></li>
    </ul>
</div>
      </div>
      <div class="footer--column">
        <div class="db-block-partnership">
  <p class="">In cooperation with <i class="icon-digipolis"></i> Digipolis</p>
</div>
      </div>
    </div>
  </div>
</footer>
{% include '@header--with-menu' with {
  "section": "section--wrapper",
  "hamburger_menu_items": [
    "<a href='javascript:void(0);'>Menu item 1</a>",
    "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
    "<a href='javascript:void(0);'>Menu item 3</a>",
    "<a href='javascript:void(0);'>Menu item 4</a>"
  ],
  "mijn_gent_block_items": [
    "<a href='javascript:(void);'>Mijn profiel</a>",
    "<a href='javascript:(void);'>Nieuwsbrieven</a>",
    "<a href='javascript:(void);'>Historiek</a>"
  ],
  "header_search_mobile_id": "header-search-mobile",
  "header_search_mobile_name": "header-search-mobile",
  "header_search_mobile_placeholder": "What are you looking for?",
  "header_search_mobile_modifier_search": "inline",
  "header_search_mobile_text": "Search",
  "header_search_mobile_modifier_submit": "btn--inline",
  "header_search_id": "header-search",
  "header_search_name": "header-search",
  "header_search_placeholder": "What are you looking for?",
  "header_search_modifier_search": "inline",
  "header_search_text": "Search",
  "header_search_modifier_submit": "btn--inline",
  "main_menu_modifier": "no-style",
  "main_menu_items": [
    "<a href='javascript:void(0);'>Menu item 1</a>",
    "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
    "<a href='javascript:void(0);'>Menu item 3</a>",
    "<a href='javascript:void(0);'>Menu item 4</a>"
  ],
  "breadcrumbs_section": "section--default",
  "breadcrumbs_items": [
    "<a href='#'>Stad.gent</a>",
    "<a href='#'>Overview</a>",
    "<span>Overview</span>",
    "<span>Overview</span>",
    "<span>Page title</span>"
  ]
} %}

<section class="page-container section--default">
  <div class="content-container">
    <div class="row">
      <div class="col-desktop-7">
        {% include '@h1' with { 'h1_text': 'Reserveer Balkonzaal - CityRoom'} %}
      </div>
    </div>

    <div class="row">
      <div class="col-desktop-3">
        {% include '@form-steps' with {
          'step1_title': 'Describe your activity',
          'step2_title': 'Plan your activity',
          'step3_title': 'Fill in your personal information',
          'step4_title': 'Enter your billing information',
          'step5_title': 'Questions or remarks'
        } %}
      </div>
      <div class="col-desktop-9">
        <fieldset class="form-item">
          <legend>
            1. Describe your activity
          </legend>

          <div class="fieldset-wrapper">
            {% include '@textfield'
              with {
                'label': 'Activity name',
                'description': 'Enter a name for your activity.',
                "field_error": 'Please enter a valid name for your activity.',
                "field_description": 'We can identify you better through the name of your activity.'
              }
            %}

            {% include '@textarea'
              with {
                'label': 'Describe your activity and it\'s purpose',
                'description': 'Describe your activity and it\'s purpose.',
                "field_error": 'Please shortly describe your activity.',
                "field_description": 'A short and simplified description of your activity.'
              }
            %}

          <fieldset class="form-item">
            <legend>
              2. Is this a profit-oriented activity?
            </legend>

            <div class="fieldset-wrapper">
              {% include '@field-description'
                with {
                  "field_description": 'For profit purposes = the applicant of the room strives to make a profit, i.e. the proceeds of the activity exceed the costs associated with it.'
                }
              %}

              {% include '@radio' with {
                "label": "",
                "label_optional": "",

                "field_description": "",
                "field_error": "",
                "description": "",

                "label_radio1": "Ik reserveer deze zaal als particulier of feitelijke vereniging",
                "radio1_name": "radiogroup",
                "radio1_id": "radio-1",

                "radio1_label": "Ik reserveer deze zaal als particulier of feitelijke vereniging",
                "radio1_label_for": "radio-1",
                "radio1_label_optional": "",

                "label_radio2": "Ik reserveer deze zaal als particulier of feitelijke vereniging",
                "radio2_name": "radiogroup",
                "radio2_id": "radio-2",

                "radio2_label": "Ik reserveer deze zaal als vennootschap of een vereniging met rechtspersoonlijkheid",
                "radio2_label_for": "radio-2",
                "radio2_label_optional": ""
              } %}

              {% include '@address' %}

            </div>
          </fieldset>

          </div>
        </fieldset>

        {% include '@form-actions--default' %}

      </div>
    </div>
  </div>
</section>

{% include '@newsletter-block' with {
  "newsletter_image_src": "https://loremflickr.com/500/250/ghent",
  "newsletter_image_alt_text": "Newsletter image",
  "newsletter_image_title": "Don't miss the latest news of Ghent.",
  "newsletter_content_title": "Subscribe to the newsletter of the City of Ghent.",
  "newsletter_content_list_items": [
    "Receive weekly updates of the City of Ghent.",
    "Be the first to discover new events.",
    "Already more then 12.0000 subscribers."
  ],
  "newsletter_form_name": "newsletter-email",
  "newsletter_form_id": "newsletter-email",
  "newsletter_form_submit_value": "Subscribe",
  "newsletter_social_title": "Volg ons op:",
  "newsletter_social_modifier": "no-style",
  "newsletter_social_items": [
    "<a href='https://www.facebook.com/stadsbestuurgent' title='Facebook'><i class='icon-facebook'></i><span class='element-invisible'>Facebook</span></a>",
    "<a href='https://twitter.com/stadgent' title='Twitter'><i class='icon-twitter'></i><span class='element-invisible'>Twitter</span></a>",
    "<a href='https://www.linkedin.com/company/stad-gent' title='LinkedIn'><i class='icon-linkedin'></i><span class='element-invisible'>LinkedIn</span></a>",
    "<a href='https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw' title='Youtube'><i class='icon-youtube'></i><span class='element-invisible'>Youtube</span></a>",
    "<a href='https://www.instagram.com/stadgent/' title='Instagram'><i class='icon-instagram'></i><span class='element-invisible'>Instagram</span></a>"
  ]
} %}

{% include '@footer' %}
/* No context defined for this component. */
  • Content:
    .multistepform {
      .form-sidebar  {
        width: span(3);
        margin-right: gutter();
      }
    
      .form-content {
        width: span(9);
      }
    }
    
  • URL: /components/raw/form-with-steps/_form-with-steps.scss
  • Filesystem Path: components/61-layouts/forms/form-with-steps/_form-with-steps.scss
  • Size: 133 Bytes

There are no notes for this item.