Page tree
Skip to end of metadata
Go to start of metadata


This step-by-step tutorial will show you how to get your first form up and running in 10 mins.


Although SmartForms is platform-independent (it looks and works the same in any environment), the installation process varies between web platforms. 


Don't see your specific web platform? We are working on it! Contact us to register your interest in integrating SmartForms with your platform. Meanwhile use "Other Websites" option to embed SmartForms into your website. Once plugin for your platform is available, no migration will be required, just connect it to your current SmartForms service to continue using your forms.



Step 1. Install SmartForms

This step is platform-dependent. Please select the web platform you are using.




Installation MethodDownload LinkInstructions
Liferay Marketplacehttps://web.liferay.com/marketplace/-/mp/application/106661792Downloading and installing applications from the Liferay Marketplace
Direct Downloadsmartform-cloud-liferay61-portlet-1.0.3.0.warCopy the downloaded package to the `/deploy` directory of your portal installation.

The following video is available: Enabling SmartForms on Liferay Portal


Installation MethodDownload LinkInstructions
Liferay Marketplacehttps://web.liferay.com/marketplace/-/mp/application/106661792Downloading and installing applications from the Liferay Marketplace
Direct Downloadsmartform-cloud-liferay62-portlet-1.0.3.0.warCopy the downloaded package to the `/deploy` directory of your portal installation.

The following video is available: Enabling SmartForms on Liferay Portal


Installation MethodDownload LinkInstructions
Liferay Marketplacehttps://web.liferay.com/marketplace/-/mp/application/106661792Downloading and Installing Applications from Marketplace
Direct Downloadsmartform-cloud-liferay7-portlet-1.0.3.jarCopy the downloaded package to the `/deploy` directory of your portal installation.

The following video is available: Enabling SmartForms on Liferay Portal


Installation MethodDownload LinkInstructions
Liferay Marketplacehttps://web.liferay.com/marketplace/-/mp/application/106661792Downloading and Installing Applications from Marketplace
Direct Downloadsmartform-cloud-liferay71-portlet-1.0.3.jarCopy the downloaded package to the `/deploy` directory of your portal installation.

The following video is available: Enabling SmartForms on Liferay Portal

You can download the SmartForms plugin for WordPress here.

Installation MethodDownload LinkInstructions
Direct Downloadsmartforms.zipInstall using the WordPress Dashboard → Plugins → Add New → Upload

The following video is available: Enabling SmartForms on WordPress

There is no client software to install. Form creation and maintenance is done from SmartForms Account. A code snippet is generated for each form to be embedded into a web page. 

Step 2. Connect your SmartForms service






1. Navigate to SmartForms in your Website's Control Panel

This step is platform-dependent. Please select the web platform you are using.


1. Navigate to SmartForms in Liferay's Control Panel

As the Portal Administrator, navigate to Control Panel > Portal > SmartForms. You will be presented with the 'Get Started With SmartForms' interface:


If you see the SmartForms Administration console, you can skip directly to Step 3.

2. Connect your SmartForms Service

If you already have a SmartForms account:

  1. Navigate to your SmartForms service on your Account Dashboard and take note of the the listed Client ID and Region.
  2. Generate a Secret Key for your service using the provided interface. Take note of the Secret Key - this is the only time you will be able to see it!
  3. Enter these details on your web platform to continue setup.

If you don't have a SmartForms account yet

Proceed with the Create SmartForms Account link. You will need to provide your Email Address (so you can manage your service later on)




You will receive an email with details of your SmartForms account in case you would like to continue using it after the trial period. 

As soon as your service is activated (it will only take a few seconds) you should see SmartForms Administration Console, which indicates that everything is working:




1. Navigate to SmartForms in Liferay's Control Panel

As the Portal Administrator, navigate to Control Panel > Portal > SmartForms. You will be presented with the 'Get Started With SmartForms' interface:



If you see the SmartForms Administration console, you can skip directly to Step 3.

2. Connect your SmartForms Service

If you already have a SmartForms account:

  1. Navigate to your SmartForms service on your Account Dashboard and take note of the the listed Client ID and Region.
  2. Generate a Secret Key for your service using the provided interface. Take note of the Secret Key - this is the only time you will be able to see it!
  3. Enter these details on your web platform to continue setup.

If you don't have a SmartForms account yet

Proceed with the Create SmartForms Account link. You will need to provide your Email Address (so you can manage your service later on)




You will receive an email with details of your SmartForms account in case you would like to continue using it after the trial period. 

As soon as your service is activated (it will only take a few seconds) you should see SmartForms Administration Console, which indicates that everything is working:



1. Navigate to SmartForms in Liferay's Control Panel

As the Portal Administrator, navigate to Control Panel > Configuration > SmartForms. You will be presented with the 'Get Started With SmartForms' interface:


If you see the SmartForms Administration console, you can skip directly to Step 3.

2. Connect your SmartForms Service

If you already have a SmartForms account:

  1. Navigate to your SmartForms service on your Account Dashboard and take note of the the listed Client ID and Region.
  2. Generate a Secret Key for your service using the provided interface. Take note of the Secret Key - this is the only time you will be able to see it!
  3. Enter these details on your web platform to continue setup.

If you don't have a SmartForms account yet

Proceed with the Create SmartForms Account link. You will need to provide your Email Address (so you can manage your service later on)




You will receive an email with details of your SmartForms account in case you would like to continue using it after the trial period. 

As soon as your service is activated (it will only take a few seconds) you should see SmartForms Administration Console, which indicates that everything is working:



1. Navigate to SmartForms' Settings in your WordPress Dashboard

After opening the WordPress Dashboard, navigate to Settings → SmartForms.

You will be presented with the 'Get Started With SmartForms' interface:

If, instead, you see the "You're all ready to go" message along with advanced settings, then you should navigate to "SmartForms" and skip directly to Step 3:

2. Connect your SmartForms Service

If you already have a SmartForms account:

  1. Navigate to your SmartForms service on your Account Dashboard and take note of the the listed Client ID and Region.
  2. Generate a Secret Key for your service using the provided interface. Take note of the Secret Key - this is the only time you will be able to see it!
  3. Enter these details on your web platform to continue setup.

If you don't have a SmartForms account yet

Proceed with the Create SmartForms Account link. You will need to provide your Email Address (so you can manage your service later on)




You will receive an email with details of your SmartForms account in case you would like to continue using it after the trial period. 

As soon as your service is activated (it will only take a few seconds) you should see SmartForms Administration Console, which indicates that everything is working:



If you already have a SmartForms account:

Login into your SmartForms account, navigate to your SmartForms service on your Account Dashboard and click on Open SmartForms Admin Console button.


If you don't have a SmartForms account yet:

    1. Sign Up for SmartForms account, go to https://account.smartfor.ms/login/ and click Sign Up button.


      Enter your email address and password, you will be using this credentials to login and access SmartForms Administration Console. An email will be sent to the address you have just entered asking you to activate your SmartForms account by clicking on the link provided in the email.

    2. Once you clicked the link you will be redirected to the following screen



    3. Click Get Started button to finish the SmartForms account sign up: give the service a name and select the region closest to you.



    4. When you finish you will see the following screen.



      Your SmartForms service will be activated in a matter of seconds, refresh the screen to see that it is active.

    5. Click on the service link, to get to the following screen.


      Click the Open SmartForms Admin Console button to start using SmartForms.


      SmartForms Administration Console is the place where you create and manage your forms.


      s


Step 3. Add your first SmartForm

The following video is available: Creating your First SmartForm

  1. While still on the SmartForms Administration Console, select Add New Form.
  2. Find and select a form template to base your new form on. For the purpose of this tutorial, select "Change of Address Notification".
  3. Choose "My Forms" as the destination for this form, and select Create New Form.

Step 4. Open the SmartForms Designer


Your new form will now appear in the "My Forms" folder on the Manage SmartForms Library screen. Select Open in Designer.


Step 5. Add a new field

1. Navigate to a page

This form has 5 pages. Navigate to "Applicant Details"




2. Create a new Text Field

    1. Drag a Text Field component from the Toolbox panel (left side) and drop it into the "Your Details" section on the Display panel (center).
    2. In the Properties panel (right side), add some details to your field:
        • For the Field Name: "customerId"
        • For the Label: "Customer ID"
        • For Description: "You find the Customer ID on your bill in the top right corner."
    3. Save your changes in the Properties panel (right side):

3. Style your new field

Let's add a style to this field to make its description appear as a help bubble (hint).



    1. On the Properties panel (right side), select:

      followed by:
    2. In the Style Management screen that will open, drag the "descr-as-hint-for-label" style from Available Styles, drop it under Selected Styles and save.




Step 6. Preview the change


  1. Select Commit (top-right of the designer) and wait a second for the changes to be committed.
  2. Once complete, select Preview Form (next to Commit). Your modified form will open in a new tab, ready for you to preview.

The new "Customer ID" field is ready to accept user entry, and selecting the hint beside the field label will display the description we setup in Step 5..



Step 7. Make a field optional


At the moment the "Phone" field must be filled in. Let's make it optional.


  1. Remaining in the Visual Designer, select the "Phone" field and select More Settings and then Dynamic State Management in the Properties panel (right side):
  2. A Dynamic State Management interface will appear. Select Make component OPTIONAL as the Initial state. Save your change.

  3. Commit and preview your changes once more. This time, the Phone field is optional and no longer has an orange outline.

Step 8. Enable email notifications using Workflows


Your form already has the Email Notification Workflow as part of the template the form is based on. To enable it you need to finish its configuration.

  1. Return back to the SmartForms Administration Console and navigate to your form (Manage Form). The Manage Form screen will open displaying your form details.
  2. Select the Workflows tab.
  3. In the Workflows interface, select Details for the Email Notification workflow.
  4. Let's include our newly created "Customer ID" field in the body of the message. In the Message Body, insert a new line (highlighted in yellow below) containing ${customerId} . Take note, this is case sensitive.
  5. For Send To, enter the email address of the person who should receive the email notification.
  6. Save your changes. Your workflow is now enabled!

Step 9. Publish the form


Before you can deliver the new form to your users you need to publish it.

  1. Navigate to the Status tab of the Manage Form interface for your form.
  2. Click Publish new version.

Step 10. Deploy Form Display to a page


To show your form to your end users, add a Form Display to any page on your website.

This step is platform-dependent. Please select the platform you are using.


You can add the Form Display to any page as any other portlet, through the Add→Applications item in the side menu. All SmartForms portlets are located under SmartForms category.


Select Edit Configuration. On the Display Configuration screen, select Select a Form.

Select your form and then click Save Selection.


You can add the Form Display to any page as any other portlet, through the Add→Applications item in the side menu. All SmartForms portlets are located under SmartForms category.


Select Edit Configuration. On the Display Configuration screen, select Select a Form.

Select your form and then click Save Selection.


You can add the Form Display to any page as any other portlet, through the Add→Applications item in the side menu. All SmartForms portlets are located under SmartForms category.


Select Edit Configuration. On the Display Configuration screen, select Select a Form.

Select your form and then click Save Selection.

You can add a Form Display to any WordPress Post using something called a shortcode.

Shortcodes in WordPress allow you to embed all kinds of content into posts and pages using short tags. https://en.support.wordpress.com/shortcodes/

SmartForms provides three kinds of shortcodes:

  • smartorms_viewer - Embeds a Form Display into a post, for completing the form.
  • smartforms_datalist - Embeds a Form Data List into a post, for viewing form submissions.
  • smartforms_admin - Embeds the SmartForms administration console into a post (usually not needed, you can always access it via the WordPress Dashboard)

To add a Form Display onto a page, create or modify a page with the shortcode, along with any other content you want to include around it:

This is my first form!
[smartforms_viewer]

As it should look in the WordPress content editor:

Select Edit Configuration. On the Display Configuration screen, select Select a Form.

Select your form and then click Save Selection.

Save the page, and navigate to it in the front-end.

To add Form Display to a page follow these steps:

Go to Deploy to Website tab of the Manage Form screen for a selected form.

In Step 1 select "Any HTML / Javascript website".



In Step 2 select the application type you are creating embed for, for example, Form Display.

And then follow instructions in Step 3.




Your form is now live!


Run it!

The form is fully functional. Complete the form and you should receive email notification at the address you provided in the Email Notification workflow.

  • No labels