Gravity event RSVP form and pull the data with tangible blocks

Final form product

Live Demo


Displaying collected data


Full code used

<div class="tt-section tt-section-collapse" id="CollapseSection">
  <div class="tt-section-heading">
    <button id="CollapseTrigger">
      <span><span id="CollapseText">Hide</span> Form</span>
      <i class="icon-chevron-down"></i>
    </button>
  </div>
  <div class="tt-section-content">
    <div>
      <Shortcode gravityform id="5" title="false" description="false" ajax="false" tabindex="32" />
    </div>
  </div>
</div>
<If loop type=gravity_form_entry form_id=5>
  <Table per_page=9 sort=title sort_order=desc>
    <Filter>
      <div>
        <input type="text" action="search" columns="fname,lname,attendance" placeholder="Search">
      </div>
    </Filter>
    <Head>
      <Col name=fname sort_type=string>First Name</Col>
      <Col name=lname sort_type=string>Last Name</Col>
      <Col name=attendance sort_type=string>Attending</Col>
      <Col name=guests sort_type=number>Guests</Col>
      <Col name=details>
      </Col>
    </Head>
    <RowLoop type=gravity_form_entry form_id=5 orderby=date_created order=desc>
      <Col>
      <GField select id=1 value_key=text />
      </Col>
      <Col>
      <GField select id=2 value_key=text />
      </Col>
      <Col><span class="tt-event-attendance" value="{GField select id=3 value_key=value}">
        <GField select id=3 value_key=text />
      </span></Col>
      <Col>
      <GField id=4 />
      </Col>
      <Col>
      <button onclick="MicroModal.show('modal-{Get loop=count}')">Details</button>
      <!-- Modal powered by Micromodal.js -->
      <div class="modal micromodal-slide" id="modal-{Get loop=count}" aria-hidden="true">
        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
          <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-{Get loop=count}-title">
            <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
            <header class="modal__header">
            </header>
            <main class="modal__content" id="modal-{Get loop=count}-content">
              <dl>
                <dt scope="row">First Name</dt>
                <dd>
                  <GField select id=1 value_key=text />
                </dd>
                <dt scope="row">Last Name</dt>
                <dd>
                  <GField select id=2 value_key=text />
                </dd>
                <dt scope="row">Attending</dt>
                <dd><span class="tt-event-attendance" value="{GField select id=3 value_key=value}">
                    <GField select id=3 value_key=text />
                  </span></dd>
                <dt scope="row">Number of Guests</dt>
                <dd>
                  <GField select id=4 value_key=text />
                </dd>
              </dl>
            </main>
          </div>
        </div>
      </div> <!-- / .modal -->
      </Col>
    </RowLoop>
  </Table>
  <If check="{Get loop=previous_total}" more_than value=9>
    <PaginateButtons />
  </If>
  <Else />
  No listings yet. Add one with the form!
</If><br>

Explaining the L&L code we wrote

Was this article helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us