Create WordPress Forms With Save & Continue – WS Form

Save & ContinuePRO

The WS Form save & continue feature allows someone completing a form to save their progress and then continue the form later. Each submission record has a hidden anonymized value called a ‘hash’ that is used to identify the submission. It is this hash that WS Form uses to retrieve the submission in order that the user can continue their submission.

WS Form PRO - Save & Continue

WS Form has two save & continue methods:

  • Cookie (Default)
  • Link

The cookie method is silent and allows someone to continue their form by simply returning to the original  web page containing the form. This must be done on the same device.

The link method provides a link to the user, typically in an email, that they can click to continue their form. The advantage of this method is that they can click the link on any device at any time to recall their form submission.

You can also use a combination of the cookie and link method if you wish.

This tutorial explains how to set up both save methods. By default, new forms are configured to use the cookie method.

The Save Button

They key to the WS Form save & continue feature is the Save button.

To enable the save feature you simply need to add a save button to your form. To do this, drag or click the save button from the toolbox to your form. You can place the save button anywhere you wish on your form. You can also add as many save buttons as you wish.

The Cookie Method

New forms are configured to use the cookie save & continue method, so by adding the save button your form will already allow progress to be saved.

If you do not wish to have the cookie method enabled, you can disable it from the Global Settings page under the ‘Advanced’ tab. Simply uncheck the ‘Enable Save Cookie’ setting and click ‘Save’.

The Link Method

An easy way of seeing a demo of the link method is to try the ‘Save & Continue’ demo template. To do this:

  1. Click on ‘Add New’ in the WS Form administration menu.
  2. Click on the ‘Demo’ tab.
  3. Hover over the ‘Save & Continue’ template and then click ‘Use Template’.

Demo

Tutorial

The most common way of providing a user with their save & continue link is to send an email. This provides them with a point of reference with which to retrieve the link to continue their form. You could also use other actions to inform the user about their link, such as showing a message. In this tutorial, we’ll send the link to the user in an email.

Add an Email Field

To do this you will require an Email field on your form which will be used to provide the email address the notification will be sent to. We recommend putting this field as early in your form as possible.

To add the email field, simply click or drag an Email field to your form. Click on the Email field settings and set it to ‘Required’, then click ‘Save & Close’.

Add a Save Button

You will also need to add a Save button to your form. When this is clicked, WS Form will create an ‘In Progress’ submission record.

To add the save field, simply click or drag a Save field to your form.

Create a ‘Save Email’ Action

When a form is saved or submitted, one or more actions can run. Actions allow you to send emails, show a message, redirect to another page or even integrate with third party systems such as MailChimp, Slack or Zapier.

For this tutorial we are going to create a ‘Save Emailaction that runs when the ‘Save’ button is clicked. The email will contain the link to return back to the form so that it can be continued.

  1. Click¬†the ‘Actions’ icon at the top of the page.
  2. In the sidebar, click the add icon below the action list to add a new action.
  3. Choose ‘Send Email’ from the dropdown.
  4. Name the action ‘Send Email (Save)’.
  5. Under ‘When should this action run?’, uncheck ‘Submit’ and then check ‘Save’. This tells WS Form that this action should run when the ‘Save’ button is clicked, but not for the ‘Submit’ button.
  6. In the ‘To’ setting, enter #field(123) in the ‘Email Address’ column and replace ‘123’ with the ID of the email field you added previously. Optionally, you could also add fields for the name of the user and add those to the ‘Display Name’ column if you wish.
  7. In the ‘Message’ visual editor, click the ‘Text’ tab and then copy and paste the following email message HTML:
    Your #form_label submission has been successfully saved!
    
    <a href="#submit_url" target="_blank">Continue your submission</a>

    You are welcome to change this as you wish, but the essential part here is the #submit_url variable. It injects the required URL for returning to the saved form. In this HTML example we’re using that in an anchor tag to provide a convenient clickable link for the user. Optionally, you can use the #submit_link variable which will inject the full URL into your email message as a link.

  8. Click ‘Save & Close’.
Disable the Cookie Method (Optional)

If you do not wish to have the cookie method enabled, you can disable it from the Global Settings page under the ‘Advanced’ tab. Simply uncheck the ‘Enable Save Cookie’ setting and click ‘Save’.

All Done!

Your form will now email the user completing the form each time they click the ‘Save’ button. When they click the ‘Continue your submission’ link it will take them back to their form as they left off.

Variables

The following submission related variables can be used in actions.

Name / VariableAdditional Information
Admin Link
#submit_admin_link
Link to submission in WordPress admin.
Admin URL
#submit_admin_url
URL to submission in WordPress admin.
Hash
#submit_hash
Returns the anonymized hash ID of the submission.
ID
#submit_id
Returns the numeric ID of the submission.
Link
#submit_link
Link to recall form with submission loaded. Used in conjunction with the 'Save' button.
Status
#submit_status
draft = In Progress, publish = Submitted, error = Error, spam = Spam, trash = Trash.
Status Label
#submit_status_label
Returns a nice version of the submission status.
URL
#submit_url
URL to recall form with submission loaded. Used in conjunction with the 'Save' button.
User ID
#submit_user_id
Returns the ID of the user who completed the form.