Gravity Forms Multiple Save and Continue

I was tasked with building a form that workers could fill out throughout the day. They would need to start several of the same form per day and add information to it throughout the workday before submitting them at closing time. Gravity Forms doesn’t have this sort of capability out of the box, but it does have a Save and Continue Later option. With this snippet below, we can hijack that functionality to allow for multiple Save and Continue Later buttons per form. Here’s how it works:


This solution is only meant to work with logged on users. The Save and Continue data is saved to the user meta

  1. The user begins the form
  2. The user selects a save button at the bottom labelled One, Two, Three ….
  3. The user selects that save profile from a page you designate to reload the form

The new Save and Continue buttons will appear at the bottom of the form like this:

Setup

Add a Hidden Field

  • Add a single hidden field, name it whatever you’d like, and take note of the field number

    When the user clicks one of the Save and Continue buttons, the hidden field is populated with the corresponding number. This number is used when the save link is being generated to save it to right place in the user meta.

Configure Form Options

  • Enable Save and Continue on the form and type the label you want displayed to the left of the buttons into the Link Text box

Install this Snippet

Add the following code to your functions.php
The code does the following:

  • Replaces the Save and Continue Later button with the seperate save options
  • Saves the resume url to the user meta of the currently logged in user

Configuration Options

At the bottom of the code, under Configuration, you need to set the options for your form. You can copy the Configuration section to use for as many forms as you’d like.

Parameters
  • form_id(int)(required)

    Specify the form by id that you’d like the code to apply

  • field_id(int)(required)

    Specify the field by id of the hidden field you configured for this form

  • choices(int)(required)

    Specify the number of Save and Continue buttons that you’d like to display

  • button_class(string)(optional)

    Specify a class to add to the buttons. This is used both for JQuery and manipulation of the buttons through CSS. You may add multiple classes by separating them with a space. Defaults to gformmultisave

Add the Resume Form buttons

The above snippet adds a shortcode gformcontinue to WordPress. Place this shortcode anywhere on your website to add buttons to resume your form.

Parameters
  • choices(int)(required)

    Specify the number of Save and Continue resume buttons that you’d like to display

  • classes(string)(optional)

    Specify a class to add to the buttons. You may add multiple classes by separating them with a space. Defaults to gformmultiresume

  • label(int)(optional)

    Specify the label displayed next to your buttons. Defaults to 'Resume:'

  • form_id(int)(required)

    Specify the form by id that you’d like the code to apply

Example
[gformcontinue choices="3" classes="gformmultiresume" label="Resume:" form_id="12"]

Resume:

OneTwoThree

Configure CSS

I purposefully did not style the buttons since styling varies so incredibly between themes. However, adding the following to your theme’s stylesheet will make your buttons look like mine pictured above:


.gformmultisave, .gformmultiresume {
    margin-right: 10px;
}
.gformmultiresume {
    display:inline-block;
    position:relative;
    border:1px solid #ac1100;
    padding:0.563em 1.125em 0.813em;
    cursor:pointer;
    font-size:16px;
    font-weight:inherit;
    line-height:1.3;
    text-align:center;
    vertical-align:middle;
    color:#fff;
    background-color:#ff2a13;
    -webkit-transition:all 0.15s linear;
    transition:all 0.15s linear;
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
    border-radius: 0.25em;
}

.gformmultiresume:hover{
    text-decoration:none;
    color:#fff;
    border-color:#600900;
    background-color:#df1600;
}

.gformmultiresume:focus{
    outline:thin dotted #333;
    outline:5px auto #ff2a13;
    outline-offset:-1px;
}

.gformmultiresume:hover,.gformmultiresume:active{
    outline:0 !important;
}

However you choose to style the buttons, I recommend at least adding this to your stylesheet so that the buttons aren’t squished together:


.gformmultisave, .gformmultiresume {
    margin-right: 10px;
}
You can style the buttons however you like by targeting the css class which defaults to gformmultisave for the Save and Continue buttons and gformmultiresume for the resume buttons. Alternatively, you can simply add the class already used by your theme’s buttons. Additionally each individual Save and Continue button has a unique id. Button ‘One’ has an id of btn1, button ‘Two’ has an id of btn2, etc.

Comments 1

  1. Hi – Is there a way to generate a save and continue “Saved” partial entry status for imported entries? This allows me to preload info we know and then let the user continue to submission after entering rest of data. Need a fix! Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *