I recently had to build a site which accepted applications for a medical grant. The three major requirements were:

  1. Create a form to accept applications.
  2. Store the data so each submission is a new post within WordPress.
  3. Grab each post and display the data on a page which can be viewed by a selection of users on the front-end (the page will be password protected).

Before creating the form, I had to decide where the data will go once a user submits the form. I decided on placing the data in a Custom Post Type called Applications. The trick was, to create a bunch of fields within Applications using Advanced Custom Fields and link the input fields in Gravity Forms to each. So when a user fills out each field within the form, the data will be placed in the corresponding field within Applications.

Creating the form was the easy part. I could have used any number of free plugins to build a form, but as it required the data to be also placed in the backend, I went with Gravity Forms as they have an option called Post Fields.

post-fields

After creating a new form, I looked for a box on the right called Post Fields and selected the first Post Field called Title. This allowed me to specify which Post Type to save the fields in. In my case, within a Custom Post Type called Applications. If you’re unsure how to create a Custom Post Type, there are plenty of tutorials available or you could use a free plugin such as Custom Post Type UI.

post-fields-save

From there, additional Post Fields can be created by clicking on Custom Field. Simply select from a drop-down list of existing fields, or select a new field to place the data in. As I had already created my fields using Advanced Custom Fields, it was as simple as selecting the matching field from the drop-down list.

example-post-field-dropdown

Once I had all the fields created, I saved the form and used the shortcode provided by Gravity Forms to display the form on my Apply page, which is where the users will be submitting their applications.

Once the form was displaying correctly, it was time to test. I filled out the form and instantly, I received a copy in my inbox and a new post had been created within my Applications Custom Post Type containing all the data I had just submitted.

The next step was to display the data for each applicant on the front-end. I created a new page within WordPress and assigned it a template I created called Submitted Applications and used the following code to display the data.


<?php $args = array(
  'post_type' => 'applications'
); ?>

<?php $loop = new WP_Query($args); ?>

<?php if ($loop->have_posts()) : ?>

<div class="applications">

  <h1>Submissions</h1>

  <?php while ($loop->have_posts()) : $loop->the_post(); ?>

    <div class="applicant-name">
      Name: <?php the_field('first-name'); ?> <?php the_field('last-name'); ?>
    </div>

    <div class="applicant-email">
      Email: <?php the_field('email-address'); ?>
    </div>

    <div class="applicant-files">
      <a href="<?php the_field("upload-resume") ?>">Application Resume.pdf</a>
    </div>

  <?php endwhile; ?>

</div>

<?php endif; ?>

That should do it. You will see each application displayed on the page. From there, you can style it however you see fit.

Last step was to password protect the page. I kept this simple and used the Password Protection feature within WordPress. If a user is logged in, they will see the page. If not, they will be prompted for their login details. Of course, you can always style the login page to match your design for a nicer experience.

And with that, we had a simple application submission system where the client could view the submissions on the front-end of their website and they would also receive a copy in their inbox.