Markup Details
                            <div class="paragraph--modal {{ wrapperClasses|join(' ') }}">
  <div class="pm__wrapper p__wrapper {{ contentOptions }}">
    <div class="pm__content">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal{{ id }}">
        {{ button }}
      </button>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="modal{{ id }}" tabindex="-1" role="dialog" aria-labelledby="modalDescription{{ id }}"
       aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title sr-only" id="modalDescription{{ id }}">{{ description }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'Close' | t }}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{ content }}
          {{ customBlock }}
        </div>
      </div>
    </div>
  </div>
  {% if isContactForm == 'true' %}
  <script type="application/javascript">
    window.addEventListener('load', function() {
      jQuery('#modal{{ id }}').on('show.bs.modal', function (e) {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({'event': 'modalFormOpen'});
      })
    });

  </script>
  {% endif %}
</div>