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 Field Types Integrations

API search field (with suggestions)

This field type will make a GET-call to a specified URL. To then use values ​​returned from the call to fill in fields in the form, it is required that the field has its name set to http_ + a key from the response, e.g. http_user.name. The field will then be filled in with the value of the key.

In the Settings for the field you can choose how many fields (parameters) are needed for the search. When you then choose which URL to search for, you can access the values from the added fields by entering the field parameter name enclosed by { }, for example {example}.

You can also choose values from other added fields by entering the field’s name within { }. If a field is found, the parameter will be replaced with the value of the found field.

You can also get search suggestions that match the entered value presented automatically in the search field.

Categories
Advanced Field Types Integrations

API search field

This field type will make a GET-call to a specified URL. To then use values ​​returned from the call to fill in fields in the form, it is required that the field has its name set to http_ + a key from the response, e.g. http_user.name. The field will then be filled in with the value of the key.

In the Settings for the field you can choose how many fields (parameters) are needed for the search. When you then choose which URL to search for, you can access the values from the added fields by entering the field parameter name enclosed by { }, for example {example}.

You can also choose values from other added fields by entering the field’s name within { }. If a field is found, the parameter will be replaced with the value of the found field.

You can also get search suggestions that match the entered value presented automatically in the search field.

Categories
Actions Advanced

How do I retrieve values from fields in the form into the email responses?

Get field values from fields given names previously in the form

To be able to retrieve values from fields in the form and present them in the email notification sent as Action, you must have the fields set with a name.

All field types have the option to set a name for the field. This is located under Advanced Settings for all fields. The names you give your fields should be unique and not contain Å, Ä, Ö, or other special characters. Dashes and underscores are allowed and the names can have a maximum of 191 characters.

Categories
Actions Advanced Integrations

Create a Lime Case

Contact Lime Gävle to get started with forms integrated with your Lime CRM environment.

Other available Actions for your forms:

Categories
Actions Advanced Integrations

Webhook

Putting a custom 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.

Other available Actions for your forms:

Categories
Actions Advanced

Send a custom email message

To set up your forms to Send a custom email message you navigate to the Actions tab for your form and then select Send a custom email message from the drop down list at the top of the page.

The first thing you can choose to set is Logotype which will be visible at the top of the email sent to recipient when submitting the form. Drag and drop your logotype in the dialog window “Drop files here to upload” or click in the box to select a file from your computer.

Do not use a high-resolution image for your logotype since this could potentially make your emails very large in file size and thus slow to send.

From (name) is filled in with the name you want to be visible as the sender of the email.

From (email) can be set up with an email address you control to send emails from your organizations email instead of having the default setting which will send the email from no-reply@simpliform.se.

To make sure that the email is sent from the correct email address and at the same time don’t end up in recipients spam-filters, janjoo can help you to configure your mailserver. Contact us for further information about synchronizing your mailserver with forms.

Subject is filled in with the topic or heading that you want on the email.

In the Message field, type the message you want to send to the recipient. You can write simpler HTML code to resize headings, set colors, insert links etc.

Get field values

To make emails more dynamic and personal, you can retrieve values from previously filled in fields from the form and present them in the message sent to recipients. To do this you need to name the fields that you want to retrieve in beforehand. Simply click the drop-down list and select the name of the field you want to retrieve in the message.

Example: Hi, {{ name }}! Thank you for your order of {{ product_id }} with the start date: {{ start_date }}

The option to write a shorter Text to show in the email footer is available below the Message field. Here you can write a copyright text or similar.

You can choose between Add a recipient email manually or Get recipient email from a field value.

If you chose to add a recipient manually it is important to first write the email address and then click the Add recipient button before saving the Action.

Most often, you want to retrieve the email address from an email field that the user has filled in in the form previously. To be able to retrieve recipients from a field in the form, that field must be set to required and be an Email field or Hidden field.

Below is an example of when the Email field or Hidden field is not set to required in the form, and therefore not available from the dialog window Send a custom email message.

Finally, you have the options to both Include uploaded files as attachments and Include a link to the BankID transaction receipt in the bottom of the dialog window.

Other available Actions for Lime Forms:

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
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.