Categories
Create Forms Get Started Guides Steps

Steps

In Lime Forms you can build your user-friendly forms in what we call Steps. Often with user information at the first step (name, email etc.) followed by a step where the user make its selections (products, services etc.). Lastly Lime Forms have a confirmation step per default, containing a summary of chosen fields.

Shortcuts

Add new step

To add a new step, navigate to the Steps tab in the top left corner and then click the Add Step button.

Step settings

Name for your steps is required, but step names are not visible in the form for the users. For each step you have the option (not required) to write a Heading and a Description that will be visible in the header of the form.

Step settings

Change step order

Click the Change step order button to open the modal and drag and drop the steps in any order you like. Then click the Save button.

Change step order

Set the next step in order

To set The next step in order click the Next step selection when located on the step you want to change from.

Set next step

Confirmation/Thank you step

Require a confirmation before being able to submit the form

Go to the Settings tab and open the Confirmation/Thank you tab. Tick the box Require a confirmation before being able to submit the form and Enter confirmation text (1500 characters) before clicking the yellow Save button to save the form.

Skip the Confirmation step

You can choose to Skip the Confirmation step from the Settings tab for the form.

Skip the confirmation step

Redirect the user to a different URL when the form has been submitted

Enter redirect URL in the required field, to send the user to a different site when the form is sent in.

Provide the form submission data via the URL (as query string parameters)

Select this option to Provide the form submission data via the URL (as query string parameters).

Note!

Note that some browsers allow max 2048 characters in a URL, which means that a form contaning many steps and fields may exceed this number.

Success message

Activate the Success message by clicking the box and Enter a success message then click the yellow Save button to save the form.

Edit Confirmation/Thank you text

Navigate to the Steps tab and then click the Confirmation step button. Write your Confirmation/Thank you text and click the yellow Save button to save you changes.

Note!

If the Confirmation step is set to disabled when you want to edit its content, you will be alerted.

Press the link in the yellow alert message Click here to enable to enable the Confirmation step again directly from the Steps tab, as shown in the picture below.

Click the link to enable the confirmation step again if you have disabled it from the Settings earlier.
Tip!

It is possible to write simpler HTML with the smart WYSIWYG editor for the confirmation/thank you text.

Confirmation step with heading and a link added with WYSIWYG editor.

Remove step

To remove a step click the red Remove this step button.

Choose Yes to permanently remove the step, or press Cancel if you changed your mind.

Are you sure? This action cannot be undone

Categories
Actions Advanced Get Started Guides Integrations

Actions

What will happen when a form is filled in and the user clicks on Send we have chosen to call Actions.

For your forms you can choose from four different Actions:

If you, as a customer, want customized Actions for your form, you are more than welcome to contact us with your wishes!

For your forms you can choose to have multiple Actions if needed.

For example, it could be that a confirmation email goes out to the user who completed the form, while at the same time an email is sent to the company customer service alerting them that a user just completed the form.

Automating predictable processes

If you can identify predictable processes that forces the user to take unnecessary detours through customer service before ending up in your internal systems, there are a lot of time and energy to be saved if you can make theses processes digitally with smart integrated forms.

This is made possible through the ActionCreate a Lime Case“, which lets users handle errands through forms placed on your website writing data directly to your Lime CRM, signed and ready with BankID and receipt.

Webhook

Putting a Webhook as Action on your form means that when someone completes the form, a POST call will be made to the specified URL with the form’s data sent as JSON.

In other words, webhooks are a useful way to get data sent to an external system in near real time. Thus, with webhooks you can build integrations with other systems to get even more functionality via your forms.

The call will be server-side, if you want to secure your endpoint, it is possible to enter a key which will then be sent with the call under the name simpliform_auth and can then be validated on the receiving side.

Categories
Appearance and Styling Guides

How do I remove unwanted visible scrollbars in the form?

In some browsers, a scrollbar pops up in unwanted places. To get these removed, there is a simple fix:

Add a new Custom HTML field somewhere in the form, with the following content in </> Source mode.

<style type="text/css">#confirmation .panel {
overflow: auto !important;
}
</style>
NOTE!

If you are editing a Custom HTML field in </> Source-mode and hit the Save button without leaving </> Source-mode (by clicking the button again), these changes will not be saved!

Try to always remember to click the </> Source button when leaving this mode, before saving the field. Otherwise the risk is that the changes will be lost.

Tip!

If you want to see more of the source-code when editing you can drag the corner of the box to increase the height of it.

There is also an easy way to implement predefined Alerts to your forms available from Bootstrap that you could put in the Custom HTML field.

Categories
Advanced Appearance and Styling Create Forms Get Started Guides

How do I get the form on our own website?

Embedding a form on your own website is easy!

Navigate to the form you want to embed, and scroll to the bottom of Settings.

Script and code snippet to copy and paste into the place on your web where the form should appear

Click </> Embed, too see the short code snippets that you should copy and paste into the place you want the form to be visible on your web.

The first code snippet for the JavaScript is preferably pasted between the <head>-tags on your website.

If you plan on placing multiple forms the same page, you only need to put the JavaScript snippet once in the <head>-tag.

This code needs to run only once. Try to put it in a master template that is loaded for all pages, preferably between the <head></head>-tags.

<script src="https://demo.lime-forms.se/js/ce/latest"></script>

This code should be placed where the form should be generated, and are unique for each form.

<simpli-form form-id="YourUniqueFormID"></simpli-form>

Categories
Appearance and Styling Get Started Guides

Why can I not see “Live preview”?

If you can not see “Live preview” when creating and editing your forms, it is probably because the browser window is too small. When getting below half of the screens width the “Live preview” will disappear since there simply isn’t enough space to display it.

Enlarge the browser window and all functions will be displayed.

Categories
Advanced Appearance and Styling Create Forms Guides

Dividing form fields into columns with Bootstrap CSS classes

The forms uses Bootstrap 3.3 and its grid system can be used for this. In order to make the fields fall next to each other, you need to enter the fields Settings (the cog link in the list of fields).

With the help of Bootstraps predefined CSS classes, you can easily divide your forms into columns to make the forms clearer and more user-friendly. The example below sets the field to occupy half of the screen width (two columns) with the CSS class col-sm-6.

If you have started using these CSS classes then you must continue to put CSS classes on the remaining fields also so that they do not end up skewed due to mismatching CSS rules for margins etc.

In an example below you can see the heading have less margin than the other elements in the form. This is because the heading is added through Lime Forms interface, and thus lack the same CSS properties as the classes for dividing into columns added to the other fields in the example seen here.

Skewed margin since the two Text fields have Bootstrap CSS classes but not the heading and horizontal line

To work around this issue, simply remove the standard heading and add the same heading but in a Custom HTML field instead, and there be sure to add the correct CSS-class to get the same margins etc.

There is detailed documentation on Bootstrap and how to use the framework here.

Categories
BankID Guides

How many characters can I use in the Text to sign for BankID signings?

Write texts with up to 4000 characters in the BankID Text to sign

You can write agreement texts with up to 4000 characters in the Text to sign for BankID.

Tip!

If your text should exceed 4000 characters, a link can be inserted in the text leading to the full text or contract (often as a PDF or on an external website).

Categories
Advanced BankID Guides

Create dynamic texts for BankID signings

To retrieve information from the form and present it in the Text to sign for the user to see when they sign the form with their BankID, you simply click the drop down ‘Get field value‘ and select from your previously named fields.

The values from the fields you select will be visible in the Text to sign as follows {{ personalnumber }}

You can write agreement texts with up to 4000 characters in the Text to sign for BankID.

Tip!

If your text should exceed 4000 characters, a link can be inserted in the text, leading to the full text or contract (often as a PDF or on an external website).

Which field in this form will contain the users personal number?

We recommend you to set this setting to the field containing the value with the personal number. This makes for a more user-friendly and secure form.You can leave it for the users themselves to fill this when signing, but selecting a specific field will retrieve and lock the signing to the personal number provided by the user in the form.

The value from the field named personalnumber will be presented for the user when they sign with their BankID, locked by Settings.
Note!

To be able to Get field values from a form field presented in the Text to sign, the field must be named. This setting is located under the Advanced Settings for all fields.

Naming field

You can also see directly in the list of fields which have a name set or not. The fields without a name are marked in red. You can click ‘Add name‘ directly from the list of fields to access the fields Advanced Settings and enter a name before saving the field.

Access Advanced Settings and name fields directly from ‘Add name‘ link in the list of fields
Categories
BankID Guides

Activate Electronic signature via BankID

For each form, it is possible to activate Electronic signatures via BankID as a final step when the form is submitted. This is activated by checking the box “Require this form to be signed using BankID” located at the bottom left of the Settings tab.

Choose your certificate and select Which field in this form will contain the users personal number? You can leave it for the user to fill this when signing, but it is not recommended.

Tip!

If you have named your fields when creating them, you can call for that field and get the value entered there by adding it from the drop down list ‘Get field value‘ containing all available fields. You find the drop down in the box ‘Text to sign’ in the Settings for BankID.

Missing BankID for your Lime Forms?

If you can not see the alternative for Electronic signature via BankID for your forms, it is because you lack a BankID module license. Contact support@lime.tech for more information about BankID cloud service and BankID certificates, or read more at www.janjoo.se/bankid

Categories
BankID Get Started Guides Submissions

Manage received submissions

There are several useful alternatives when it comes to managing received submission through forms. Read more about them below.

Export all

You can download all received submissions that have been stored in the database by clicking the “Export All” button located at the page for Received submissions. This will save all submissions to a CSV file. With this file you can compile data from the form and see statistics linked to the answers.

For each individual submission that is stored in the database, there is a public link that can be shared to end users.

Show BankID receipt

If BankID has been activated for the form, a link to the BankID receipt will be displayed below details for received submissions.

See Managing BankID Signatures and Receipts for more information on Submissions to forms with BankID activated.

Show submission as JSON

If you want to display the submission as a JSON file, it is possible to do so. This can be a good option to get all fields and the complete submission forwarded to other systems.

Save a single submission as JSON

To save a single submission as a JSON file, simply press the Save submission button located below the JSON data presented in the Details for submission.

Remove submission

You can delete individual submissions by clicking the red Remove Submission button located at the bottom right of the page, shown in example above.