Yes, you can do this by adding a web component to the form. Read more about the Condition web component here.
Category: Web Components
Is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Yes, you can do this by adding the web component Compare. Read more about the Compare web component here.
Yes, you can do this by adding the web component Reset. Read more about how to use the Reset web component here.
Yes you can hide the Next-button and the Send-button. To do so you need to add the web component HideButtons. Read more about the HideButtons web component here.
The Condition.Vue web component will search for the “example1” field and try to set the value of “example1” to the “example2” field.
<condition-component searchfield="example1" setfield="example2"></condition-component>Example:
https://demo.simpliform.se/forms/iBqVu48QSAs2D9YZ7dii
Other available web components to equip your forms with:
- Compare.Vue – Compare two fields, true or false (example)
- ConcatFields.vue – Merge content from multiple fields into a new field (example)
- HideButtons.Vue – Hide buttons (example)
- Reset.Vue – Reset/clear field (example)
- TodaysDate.vue – Sets text fields or calendars to today’s date (example)
- SumFields.vue – Add multiple fields (example)
A simple web component that sets a Text field or a Date field to todays date when the form is opened.
To set a Text field or a Date field to todays date you need to name the Text field (thisone and thisone2 in the example) and then add a Custom HTML field and click the </> Source button and fill in the following code:
<todays-date setfield="thisone"></todays-date>If you were to add a Date field to the same form as well, you need another Custom HTML field specifying the name of the Date field.
<todays-date setfield="thisone2"></todays-date>
Example:
https://dev.simpliform.se/forms/k0TP5QFIBNvvxKEku7yV
Other available web components to equip your forms with:
- Compare.Vue – Compare two fields, true or false (example)
- ConcatFields.vue – Merge content from multiple fields into a new field (example)
- Condition.Vue – Search value from field and write value to new field (example)
- HideButtons.Vue – Hide buttons (example)
- Reset.Vue – Reset/clear field (example)
- SumFields.vue – Add multiple fields (example)
The SumFields.Vue component adds values from up to ten fields and presents the total sum of them in the text field ‘setfield’ (which in the example below is named “sum”)
<sum-fields field1="sum1_checkbox" field2="sum2_radiobutton" setfield="sum"></sum-fields>
Value is filled in the example above with the price (without SEK) and will be added to the values of the other selected fields and finally summed in the field “sum”.
It is possible to use a mix of field types (eg. Checkbox field and Radio button field) to summarize.
Should you as a customer need to be able to add more fields than ten, please contact Lime Gävle and we will help you with the configuration of this.
Example:
https://janjoo.simpliform.se/forms/rjsr3vB9pAa2AHsnnwR6
Other web components that are available for your forms are:
- Compare.Vue – Compare two fields, true or false (example)
- ConcatFields.vue – Merge content from multiple fields into a new field (example)
- Condition.Vue – Search value from field and write value to new field (example)
- HideButtons.Vue – Hide buttons (example)
- Reset.Vue – Reset/clear field (example)
- TodaysDate.vue – Sets text fields or calendars to today’s date (example)
This web component will set the value of the specified fields (value1 to value5) to an empty string. The parameter linktext will be the name of the clickable URL, if it is not specified, it will be set to “Clear”.
Example usage, how to declare in your form as “Custom HTML“:
<reset-component value1="example1" value2="example2" linktext="Clear fields"></reset-component>Example:
https://demo.simpliform.se/forms/ILUxb2Q2CJ0U0sZC7cyr
Other available web components to equip your forms with:
- Compare.Vue – Compare two fields, true or false (example)
- ConcatFields.vue – Merge content from multiple fields into a new field (example)
- Condition.Vue – Search value from field and write value to new field (example)
- HideButtons.Vue – Hide buttons (example)
- TodaysDate.vue – Sets text fields or calendars to today’s date (example)
- SumFields.vue – Add multiple fields (example)
This web component will hide/show the next button or send button depending on whether this component is activated by conditions or not.
The parameter “eventtype” can be set to load, which will hide button on load instead of being activated by conditions.
Example usage, how to declare in your form as “Custom HTML“:
<hide-buttons-component button="next"></hide-buttons-component>
<hide-buttons-component button="next" eventtype="load"></hide-buttons-component>
<hide-buttons-component button="submit"></hide-buttons-component>Example:
https://demo.simpliform.se/forms/9weuF5mIreVMexyIcVOC
Other available web components to equip your forms with:
- ConcatFields.vue – Merge content from multiple fields into a new field (example)
- Condition.Vue – Search value from field and write value to new field (example)
- Compare.Vue – Compare two fields, true or false (example)
- Reset.Vue – Reset/clear field (example)
- TodaysDate.vue – Sets text fields or calendars to today’s date (example)
- SumFields.vue – Add multiple fields (example)
This web component is used to gather values from multiple fields into a new joint field. The maximum limit for number of fields that can merge is 10. If a field is specified in the concat value but not sent as field, then the value will not be replaced.
Example usage, how to declare in your form as “Custom HTML“:
<concat-fields concat="Kommunen är {kommun} och datumet är {datum} och adressen är {adress}, och ett dolt fält med värde {dolt}" field1="kommun" field2="datum" field3="adress" field4="dolt" setfield="rubrik"></concat-fields>Example:
https://demo.simpliform.se/forms/n2YM1kzov74JPOeZzlHY
Other web components that are available for your forms are:
- Compare.Vue – Compare two fields, true or false (example)
- Condition.Vue – Search value from field and write value to new field (example)
- HideButtons.Vue – Hide buttons (example)
- Reset.Vue – Reset/clear field (example)
- TodaysDate.vue – Sets text fields or calendars to today’s date (example)
- SumFields.vue – Add multiple fields (example)