Make your own sign-up form with Gravity Forms and Gravityview

(This post assumes you already own and have installed both Gravity Forms and Gravityview plugins)

For sometime now, I’ve been looking for a way to replace third party signup apps such as Signup Genius and Volunteer Spot on my site.

The task was the following:

  1. Create a form to generate the sign-up slots
  2. Generate the list of signups slots  and include a signup button for each.
  3. Allow users to see which spots are available for signup and which have been taken
  4. Send a reminder email of the sign-up task to the user.
  5. Allow the user to edit/delete their signup
1
 

 To begin, include the following custom code (which should be inserted into your functions.php file in your child WordPress theme):

//shortcode for displaying signup buttons
    function signup_f($atts = array()) {
    $details = shortcode_atts( array(
        'form_id' => '', 
        'field_num' => '',
        'field_val' => '',
        'wanted' => '',
        'f_name_field'=>'',
        'l_name_field'=>'',
        'u_name_field'=>''
    ), $atts );
    $form_id = $details['form_id'];
    $search_criteria['field_filters'][] = array( 'key'  => $details['field_num'],
                                                         'operator' => "is",
                                                         'value'    => $details['field_val']
    );
    $f_name=$details['f_name_field'];
    $l_name=$details['l_name_field'];
    $u_name=$details['u_name_field'];
    $countentries = GFAPI::count_entries( $form_id, $search_criteria );
    $html = '<button style="margin:10px;background:#008080">Sign Up</button>';
    $amount = $details['wanted'] - $countentries;
    $entries         = GFAPI::get_entries( $form_id, $search_criteria );
    $signup_name=array();
    foreach ($entries as $entry){
        if (!empty($details['f_name_field']) && !empty($details['l_name_field'])){
            $signup_name[] = $entry[$f_name] . ' ' . $entry[$l_name];
        }else if (!empty($details['u_name_field'])){
            $signup_name[] = $entry[$u_name];
        }else{
            $signup_name[] = 'SPOT TAKEN';
        }
    };
    $conf = implode("<br>",$signup_name);
    for($n=0;$n < $amount; $n++){
        $conf .= do_shortcode('');
    }
    //$conf .= do_shortcode(' .'" search_field="'. $details['field_num'] .'" search_value="'. $details['field_val'] .'" search_operator="contains"]');
    return $conf;
}
add_shortcode( 'signupform', 'signup_f' );
2
 

Start by creating a Gravity Form to create the Sign-up slots:

This form should include the following fields:

  • Slot Name (Single Field Type)
  • Date (Date Field Type)
  • Start time of slot (Time Field Type)
  • End time of slot (Time Field Type)
  • # of Signup slots (Number Field)

3

Next, create a Gravity Form that the user will fill out when signing up for a slot.

This form should include the following fields:

  • Name of User (Name Field Type)
  • Slot Name (Single Field Type)
  • Date of slot (Date Field Type)
  • Start time of slot (Time Field Type)
  • End time of slot (Time Field Type)
  • User Phone (Phone Field Type)
  • User Email (Email Field Type)
  • Unique ID (hidden)
** Important: Each field should be given a parameter name so that it can be dynamically populated from the details of the submitted task. (Click ‘Allow field to be populated dynamically’ under the advanced tab in the Gravity Forms field. Make note of the names you choose for the ‘Parameter Name’ as they will be needed later).

4

Create a Gravityview table to display the list of sign-up slots.


Add columns using the data source from your initial Gravity Form that created the slots.

Add a custom content field for the last 2 columns in the Gravityview table. The second to last column is reserved for the time slot (if applicable). Here, you can use merge tags to combine the start and end time with a dash in between.

The last column is reserved for the shortcode that will utilize the [signupform] custom shortcode added from the beginning of this post.  This column will contain a sign up button if the slot is available.  It will display the user name if the slot has been signed up for.

The  shortcode utilizes the following attributes from the initial two forms created in this post:

form_id – (a number value) This should equal the id # of the gravity form used to collect user sign-up info (uses the second form created in this post) My example uses a form who’s id is 237.

field_val (a string value) This should equal the entry id # of the gravity form used to create the slots (uses the first form created in this post). This will utilize the merge tag generated from the Gravityview custom content field. My example uses the merge tag {entry_id}.

field_num (a number value) This should equal the field id # that contains the ‘Unique Id’ from the gravity form used to collect user sign-up info (uses the second form created in this post). My example uses my ‘Unique ID’ field who’s id is 24.

wanted (a number value) This should equal the field id # of the ‘# of Signup slots’ field from the gravity form used to create the slots (uses the first form created in this post). This will utilize the merge tag generated from the Gravityview custom content field. My example uses the merge tag ‘{# Wanted:2}’.

f_name_field (a number value) This should equal the field id # of the first name from  the gravity form used to collect user sign-up info (uses the second form created in this post). Gravity Form’s first name field id will contain the field id # with the addition of the decimal ‘.3’.  My example uses my form’s name field who’s id is 1 therefore my  first name value is “1.3”

l_name_field (a number value) This should equal the field id # of the last name from  the gravity form used to collect user sign-up info (uses the second form created in this post)Gravity Form’s first name field id will contain the field id # with the addition of the decimal ‘.6’.  My example uses my form’s name field who’s id is 1 therefore my  first name value is “1.6”

My full shortcode looks like this:

[signupform form_id=”237″ field_val=”{entry_id}” field_num=”24″ wanted=”{# Wanted:2}” f_name_field=”1.3″ l_name_field=”1.6″]

5

Next we need to use the Gravityview Single Entry tab to store our User Sign up Form

Add your User Sign Up Gravity Form into a custom content field using the Gavity Form shortcode.

Here’s where you can take advantage of the Gravity Forms shortcode field_values attribute to pre-fill the user sign up form with details from the task. You will need to remember the parameter names set up in step #3 of this post.

The gravityforms id should equal the form id of the User Sign Up form (the second form created in this post).  The field_values will equal the parameter names form your form. In my example below, I used the parameter names ‘unique_id‘,’date‘,’starttime‘, and ‘endtime‘:

Gravityview provides merge tags of each entry’s field value that you can use by clicking on the icon to the right of the custom content field  
To create a unique id for each sign-up, we will utilize the ‘entry id’ of the entry created in the Sign-up Slots Gravity Form. Just assign the parameter name of the Unique ID field to the Gravityview merge tag {entry_id}

Use the Gravityview merge tag for the date and time fields for the remaining parameters.

Here’s my example:

Oops! We could not locate your form.

6
 Lastly, set up email notifications for the 

User Sign-up Gravity Form.

I suggested sending a notification to both the sender and the coordinator of the signup.



I also recommend the plugin called Delayed Notifications if you’d like to send a reminder close to the sign-up date.

Here is an example of a signup form with multiple sign-up opportunities per/slot