Front End Submission with Gravity Forms

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

Create a form to accept applications.
Store the data as a Custom Post Type in WordPress
Display the applications on a password protected page

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.

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.

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.

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 application submission page.

Next, 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 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 used the following code to display the data.

<?php 

$args = array("post_type" => "applications");
$loop = new WP_Query($args);

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 now see each application displayed on the page.

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.

Update [2022]: An old tutorial and since moving to a new platform, I no longer have the screenshots to go with it. Apologies if it’s difficult to follow without. Feel free to reach out if there’s any questions.

Front End Submission with Gravity Forms.