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
Advanced Appearance and Styling Create Forms Field Types

Custom HTML field

The Custom HTML field allows for simpler HTML code with a smart WYSIWYG editor. You can embed different elements such as:

  • Bullets
  • Hyperlinks
  • Pictures
  • Tables
  • Etc.
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
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.