Submission Behaviors

Control what users see after they submit a form: a confirmation in place of the form, an empty form to start again, or another page.

Default behavior

After a successful submission, a green message appears at the top of the page, and the entered data stays in place. Selecting Submit again creates another, separate submission.

On a long form, users submit from the bottom of the page and often don't see the message. They may think nothing happened and submit again. Unless users are entering batches of records, give the form a clear confirmation using one of the options below.

Show a confirmation in the form

Replace the form with a thank-you message as soon as the submission is saved. Users stay on the same page. If the submission fails, for example because the server rejects a value, the form stays as it was and shows the error.

1. Add an HTML Element component at the top of the form, and put this CSS in its content. See Using Custom CSS.

   HTML

   <style>
   form.formio-form .form-confirmation { display: none; }
   form.formio-form.submitted > * { display: none; }
   form.formio-form.submitted > .form-confirmation { display: block; }
   form.formio-form .form-confirmation { border: 1px solid #e5e7eb; border-radius: 12px; padding: 36px 28px; text-align: center; background: #fff; }
   form.formio-form .confirmation-icon { font-size: 48px; color: #16a34a; }
   </style>
   

2. Add a Content component directly on the form, not inside a Panel, Columns or other layout component, and write your message. Say what happens next, for example who reviews the submission and how users will hear back. On the Display tab, set Custom CSS Class to form-confirmation.

   To show a check mark and the submission ID as a reference number, use the editor's source view:

   HTML

   <div class="confirmation-icon"><i class="fa fa-check-circle"></i></div>
   <h2>Thank you</h2>
   <p>Your request has been received. IT will contact you within two business days.</p>
   <p>Reference: <span class="confirmation-ref"></span></p>
   

3. Open the Submit button and add this to Button Custom Logic:

   JavaScript

   if (!window.confirmationHooked) {
     window.confirmationHooked = true;
     $scope.$root.$on('formSubmission', function (event, saved) {
       var form = document.querySelector('form.formio-form');
       var ref = form.querySelector('.confirmation-ref');
       if (ref) ref.textContent = saved._id;
       form.classList.add('submitted');
       var alerts = document.querySelectorAll('.alert-success');
       for (var i = 0; i < alerts.length; i++) alerts[i].style.display = 'none';
       window.scrollTo(0, 0);
     });
   }
   

4. Save the form, open its view link and submit it once to check the message.

The message stays hidden while users fill in the form. After a successful submission, the rest of the form is hidden and the message appears at the top of the page. To keep a header visible as well, give it a class and add a rule like form.formio-form.submitted > .my-header { display: block; }.

Clear the form after each submission

Add clearonsubmit=true to the form's link:

https://forms.example.com/view/#!/form/<form ID>?clearonsubmit=true

Send users to another page

Add return= and an address to the form's link. After submitting, users go to that page:

https://forms.example.com/view/#!/form/<form ID>?return=https://www.example.com/thank-you

To use the built-in success page, use return=success.html.

Set the destination in the form

To choose the destination based on the user's answers, set form.returnUrl in the Submit button's Button Custom Logic:

form.returnUrl = (data.department === 'HR')
  ? 'https://www.example.com/hr-thanks'
  : 'success.html';

Include the submission ID

Add {{ _id }} anywhere in the return address. It is replaced with the new submission's ID, every time it appears:

form.returnUrl = 'https://forms.example.com/view/#!/form/<confirmation form ID>?submission={{ _id }}';

Build a custom confirmation page

For a branded confirmation, create a confirmation form in GlobalForms with no Submit button. Have it read the submission ID from its link and show a message such as "Thank you. Your reference number is …". Point return= or form.returnUrl to it. You can change the message at any time in the form builder, with no files to manage on the server.

Related pages

• Using Buttons for Custom Actions

• Form Link Display Options (such as header=0)

• Pre-filling Fields From the Form Link