Categories
Appearance and Styling

Hide label CSS

It is possible to hide labels (and other HTML elements) in Forms with CSS.

When having saved your form, navigate to the Settings tab and click the URL link to open the form in a new tab.

Note!

Following instructions applies to users with Google Chrome, but you can inspect and find the Selector in similar ways in other web browsers as well.

When you have your form open in a new tab, right-click on the form and choose Inspect from the list. The Inspector window appears.

Press the arrow icon (1) in the top left corner of the Inspector window to be able to select an element in the page to inspect it (or keyboard shortcut CTRL / ⌘ + ⇧+ C).

Select the element you want to hide or edit by clicking on it. The element will then become highlighted in the page (2).

In the Inspector window you will now see the same element you just selected highlighted, right-click on the element and choose Copy > Copy selector.

With the selector copied, open the tab where you are editing your form and create a new Custom HTML field in any Step of your choosing.

Name your field (eg. CSS) and then enter Source-mode by clicking the </> Source-mode button to be able to write HTML/CSS.

Enter the following code in the Custom HTML field (in Source-mode):

<style type="text/CSS">

</style>

Paste the Selector that you copied from the form when inspecting it in-between the <style>-tags.

<style type="text/CSS">#YourUniqueAndProbablyCopiedSelector > form > div.form-field.col-sm-12.field-soon-with-hidden-label\? > div > div.label-wrap > label
</style>

Now you just need to declare how you want to style your element. To achieve this you need to declare a property with a value for your selector. The declaration block containing the properties and values are surrounded by curly braces.

<style type="text/CSS">#YourSelector {
property: value; }
</style>

In our example we want to hide a label for a field in the form. With the correct elements’ selector pasted in-between the <style>-tags, followed by an opening curly brace ( { ) we then write our desired property and a colon followed with a value that is ended by a semi-colon. Example below:

<style type="text/CSS">#YourUniqueAndProbablyCopiedSelector > form > div.form-field.col-sm-12.field-soon-with-hidden-label\? > div > div.label-wrap > label {
display: none; }
</style>

In the example above we have made the label for the selected element hidden by adding the declaration { display: none; } to the copied selector (#YourUniqueAndProbablyCopiedSelector > form > div.form-field.col-sm-12.field-soon-with-hidden-label\? > div > div.label-wrap > label), all within the <style>-tags in the Custom HTML field.

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.

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
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
Advanced Appearance and Styling

How do I remove 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 code 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.