SpreadsheetConverter offers you lots of basic graphical widgets that make your web page easier to use and to give it a better appearance. This is the online help page for these widgets. 

This is an introduction to the use of widgets in spreadsheets to improve the functionality and appearance of the converted web page. If you haven’t used widgets before, you may want to read the Introduction to using widgets before you continue.

Be aware that most of these widgets have no corresponding representation when used in Excel. Some of them are unfortunately totally invisible in Excel. You have to convert the spreadsheet to web format to see the widget in action.

This page describes the widgets available in the HTML and Node.js flavors. There is a similar page describing the widgets in the iPhone/Android flavor. 

Text

Text fields are mainly used in electronic forms to mark the fields where the user will enter data that is not used in calculations, e.g. a name or an address. You insert a Text field widget by clicking the Text widget in the Widgets tab in the task pane.

You can set different properties for the Text field:

• A Required field requires input from the user. This option is mainly used for electronic forms, where a form must contain a minimum of information to be meaningful. For Text fields, a Required field cannot be empty. If it is, it will not be possible to submit the form.
• Make hidden field is used when you want a cell to be visible in the spreadsheet, but not in the converted web page. This also allows you to provide information to a form processing script without showing it in the form. As an example, if the link to the form contains a language code (/form.htm?lang=sv), it will be preserved by the form if your form has a text field named lang, and it will be forwarded with the form when the form is submitted for processing. Read more about filling form fields from the link.
• Multiline is used to give a text area more than one line and to make it scrollable. Use this option only for text fields that you have made sufficiently large in the spreadsheet, e.g. by merging two or more cells. You can achieve the same result by enabling Wrap Text for the merged cell in Excel.
• Placeholder can contain a text prompt for the field that is visible in the field only when it is empty. As an example, the Placeholder field itself displays the placeholder enter label or hint until you type anything into the field.
• Name your widgets if you want to pass data into them from the link to the form (see above). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• The default value of a Text field is empty. To provide a different default value, enter text into the spreadsheet cell before conversion.

Learn more

Some of our tutorials partly focus on the Text widget:

• Create a simple sales tax calculator
• Create your first online form with Excel

Email

One of the most common and also most complex data validations is to verify that e-mail addresses are correctly written, e.g. that there is only one @ sign, that there is text on both sides of each period etc. The syntax rules for an e-mail address are far too complex to be handled with Excel Data Validation or Excel formulas.

Instead, use the E-mail widget which is a standard text field with built-in validation of e-mail addresses. The field must either be empty or contain a valid e-mail address. If the e-mail address has an incorrect syntax, or if the field is empty but set as Required, the field is considered in error and the form cannot be submitted. This reduces the risk that you receive forms with missing or incorrect e-mail addresses.

The widget only validates the character string in the field; there is no live or online validation that the provided e-mail address actually exists or that someone reads the e-mails sent to it.

The properties for the Email widget are the same as for the Text field:

• A Required field requires input from the user. This option is mainly used for electronic forms, where a form must contain a minimum of information to be meaningful. For Email fields, a Required field cannot be empty. If it is, it will not be possible to submit the form.
• Make hidden field is used when you want a cell to be visible in the spreadsheet, but not in the converted web page. This also allows you to provide information to a form processing script without showing it in the form. As an example, if the link to the form contains a language code (/form.htm?lang=sv), it will be preserved by the form if your form has a text field named lang, and it will be forwarded with the form when the form is submitted for processing. Read more about filling form fields from the link.
• Multiline is used to give a text area more than one line and to make it scrollable. Use this option only for text fields that you have made sufficiently large in the spreadsheet, e.g. by merging two or more cells. You can achieve the same result by enabling Wrap Text for the merged cell in Excel.
• Placeholder can contain a text prompt for the field that is visible in the field only when it is empty. As an example, the Placeholder field itself displays the placeholder enter label or hint until you type anything into the field.
• Name your widgets if you want to pass data into them from the link to the form (see above). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• The default value of an Email field is empty. To provide a different default value, enter text into the spreadsheet cell before conversion.

Slider

A Slider allows the user to select a value by moving a handle to a particular position on the widget. Sliders are real-time and cause the entire spreadsheet to be continuously recalculated with each new value of the slider as you move it.

You insert a Slider widget by clicking the Horizontal Slider widget (value increases from left to right) or Vertical Slider widget (value increases from bottom to top) in the Widgets tab in the task pane.

• The Minimum value is the value the widget returns at the slider’s leftmost or bottom position, depending on its orientation.
• The Maximum value is the value that the cell contains when the slider is in its top or rightmost position, depending on its orientation.
• Use the Tick Interval if you want tick marks along the slider.
• Name your widgets if you want to pass data into them from the link to the form (see below). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• Choose slider orientation from Style.
• The default value of a slider is whatever value you put in the spreadsheet cell before conversion, or the minimum value.
• You can assign a value to a slider widget from the link. Use the format /form.htm?example=42. Read more about filling form fields from the link.

Learn more

Some of our tutorials partly focus on the Slider widget:

• Graphical widgets make your web calculator easier to use

Stepper

The Stepper widget allows you to easily input small numeric values with just a tap or click on a button.

The worksheet is re-evaluated for each new value, making this a very useful widget when the user is trying to find an optimum value.

• The Minimum value is the lowest value the widget can have. The minus button stops working at the minimum value.
• The Maximum value is the highest value the widget can have. The plus button stops working at the maximum value.
• Use the Tick Interval if you want the step to be different from 1.
• Name your widgets if you want to pass data into them from the link to the form (see below). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• The default value of a stepper is whatever value you put in the cell, or the minimum value.
• You can assign a value to a stepper widget from the link. Use the format /form.htm?example=2. Read more about filling form fields from the link.

Rating

Ratings widgets are used to rate, or grade, an experience or a product with symbols like stars. It’s an effective way of expressing one’s opinion about something.

You insert a Ratings widget by clicking the Ratings widget in the Widgets tab in the task pane.

• The Number of rating steps determines the number of stars in the widget.
• Name your widgets if you want to pass data into them from the link to the form (see below). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• The default value of a rating widget is 0. To provide a different default value, enter an integer within the number of rating steps into the cell.
• You can assign a value to a rating widget from the link. Use the format /form.htm?example=4. Read more about filling form fields from the link.

Calendar

Calendar widgets make it much easier for the user to pick the right date. It also makes it easier to count from one date to another. The widgets ensure that any date picked from the calendar is valid, and formats it correctly for the recipient of the electronic web form using the regional settings.

Read more about the Calendar widget.

Link Image

Save all relevant image links in your spreadsheet or create formulas that can build the right image link dynamically from user input.

Use the Link Image widget to select the image that is shown. 

Google Map

The Google Map widget allows you to use interactive maps in the converted web page.

Learn more about the Google Map widget. 

Barcode widget

Use the barcode widget to display a barcode from static or calculated content in your web form.

Learn more about the Barcode widget.

QR code widget

You can display QR codes directly in the web page using the QR code widget.

Learn more about the QR code widget.

Check box

Use check boxes only for statements that must be either true or false, there is no room for doubt, like “British citizen”. The Toggle switch allows you to use any two other names for True and False, e.g. a language pair.

Touch checkbox

You insert a Check box widget by clicking the Check box widget in the Widgets tab in the task pane. A Check box will provide a true/false value that you can test for in other places in the form, or when the form is submitted for processing.

• A Touch Checkbox looks like the check mark in the widget’s icon.
• When you add a Touch Checkbox to a spreadsheet, it is initially set to FALSE. When you convert the spreadsheet to a web page, a Touch Checkbox widget will therefore initially be unchecked. If you change the default value by typing TRUE into the widget’s spreadsheet cell before conversion, the Touch Checkbox will be checked when the page is opened in a web browser.

Toggle Switch checkbox

• The Toggle Switch check-box is a small graphic that is intended to resemble an electric switch. Users can drag the handle or tap one side of the switch to toggle the check-box.
• When you flip the switch to the right, it returns a TRUE value. Flip it to the left and it sets a FALSE value for the cell.
• A Toggle Switch has two labels: one for each state. The On Label is visible in the switch when the value of the cell is TRUE and the switch is flipped to the right.
• Only the selected state is visible in the widget, e.g. Show. Your users will assume that flipping the switch will set the opposite state, e.g. Hide.
• When you add a Toggle Switch check-box to a spreadsheet, it is initially set to FALSE. When you convert the spreadsheet to a web page, a toggle switch will therefore initially show its Off Label, flipped to the left. If you change the default value by typing TRUE into the widget’s spreadsheet cell before conversion, the check-box will be flipped to the right and show its On Label when the page is opened in a web browser.
• Note: a cell containing a Toggle switch always returns TRUE or FALSE. It does not contain the text from the On Label or Off Label. If you need this function, use a Radio button instead.

Common settings

• Name your widgets if you want to pass data into them from the link to the form (see below). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• You can set the value of a checkbox widget from the link. Use the format /form.htm?example=TRUE. Read more about filling form fields from the link.

Radio button

Radio buttons simulate the behavior of old car radios. When one of the buttons is pressed, the corresponding radio station (option) is selected. Simultaneously, all the other buttons pop out, leaving only the selected button in the pushed-in position.

Radio buttons are used to select between a limited number of choices. The good thing about radio buttons is that you see all the available choices. The bad thing is that this may consume a lot of screen space. You insert a Radio buttons widget by clicking the Radio Button widget in the Widgets tab in the task pane. You can then set different properties for the Radio button widget:

• A Required field requires input from the user. This option is mainly used for electronic forms, where a form must contain a minimum of information to be meaningful. For Radio buttons, one of the buttons must be “pressed”. If no button is selected, it will not be possible to submit the form.
• Button labels are the names for each button. You get one button for each label you enter.
• In a Vertical Layout, the buttons are aligned in a column. Select the number of Columns to use for the choices.
• In a Horizontal Layout, the buttons are aligned in a row. Select the number of Rows to use for the choices.
• Name your widgets if you want to pass data into them from the link to the form (see below). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• The default value of a radio button is the first choice on the list. To provide a different default value, move one of the other choices to the top of the list.
• You can select an option in the radio button from the link. Use the format /form.htm?example=Female. Read more about filling form fields from the link.

Dropdown

Drop-down lists are used to select between a limited number of choices. The menu opens when you click on it. When you have made your choice, only the selected choice is visible.

You insert a Dropdown list widget by clicking the Dropdown List widget in the Widgets tab in the task pane. List the labels in each line in the empty space. You can then set different properties for the Dropdown List:

• A Required field requires input from the user. This option is mainly used for electronic forms, where a form must contain a minimum of information to be meaningful. For Drop-down lists, the user must move the menu away from the option that is selected by default. If the default option is left selected, it will not be possible to submit the form.
• Show default text instructs the widget to add a dummy choice at the top of the list that implies that no “real” option has been selected yet – typically it’s is also used as a prompt, as in
  “Rate the course, 4 is the best”.
• List labels are the possible choices on the menu.
• Name your widgets if you want to pass data into them from the link to the form (see below). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• The default value of a drop-down list is the first choice in the list. To provide a different default value, move one of the other choices to the top of the list.
• You can select an option in the dropdown widget from the link. Use the format /form.htm?example=Banana. Read more about filling form fields from the link.
• The basic Dropdown widget can only have one static list of choices. If you need a multi-level menu structure, e.g. select country then city, or want to prepare the list of choices with formulas in the spreadsheet, use the Dynamic Dropdown widget instead.

Dynamic Dropdown

If you want the options in a dropdown menu taken from cells in the spreadsheet, learn more about the Dynamic Dropdown widget.

Hyperlink and Button

The Hyperlink widget allows you to easily insert links into the converted web page, either as text links or as buttons.

Any cell in your worksheet can contain a web address in the form of a Universal Resource Locator or URL:

Unfortunately, Excel considers this to be just plain text. Nothing will happen if you click on this cell. If you convert this spreadsheet to a web page, the URL is generated as plain text there too, and clicking on it will have no effect.

To turn a URL into a working link, you have to insert a hyperlink into the cell. Excel can optionally create a hyperlink automatically every time you enter a URL into a cell, and then the link itself is used also as the anchor text for the link. To use any anchor text you like in the link, you can use the Insert Hyperlink command:

Notice that the anchor text, in the Text to display field, can be different from the link’s Address, when you use the Insert Hyperlink dialog to create the link. Users easily detect when a cell contains a hyperlink, because of its classic formatting in blue with an underline:

By default, SpreadsheetConverter preserves hyperlinks on the converted web page. The anchor text will be displayed and linked to the requested URL.

With Excel, a link can also be calculated with the

=HYPERLINK(Address, Text to display)

function. In this case, the Address portion of the link is assembled dynamically according to the formula you have specified. The URL may be determined conditionally using the IF function or the address assembled from other cells. The Address to use in a given situation can even be selected with the VLOOKUP function from a list of links. The Text to display operand of the Hyperlink function allows you to define the anchor text for the link.

=HYPERLINK("https://excelcalcs.com/","ExcelCalcs - Helping You Make and Share Calculations")

The Hyperlink widget provides a few additional useful features:

• A Style setting that allows you to present the link also as a button, either in the cell or in the toolbar. The link’s anchor text will be used on the button. The design of the button can be modified by a theme.
• A Placement setting where you specify if you want the link or button to be placed in the cell or in the toolbar.
• An Open In setting that lets you specify how you want the linked page to open: in the same browser tab, in a new browser tab, in the same frame of the web page or in the parent frameset. In the generated HTML, this selection is reflected in the HTML target parameter for the link, which will be omitted, set to _blank, set to _self or set to _parent, respectively.
• Name your widgets if you want to pass data into them from the link to the form (see the Text field widget above). For electronic forms, it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.

Email button

An E-mail Button converts to a mailto (“send an e-mail to this e-mail address”) hyperlink. When the button is pressed, the default e-mail client normally opens a new, empty e-mail with the provided e-mail address as the e-mail recipient. The user enters the Subject and Text for the e-mail, then clicks Send to send the e-mail.

Note that none of this functionality is provided by SpreadsheetConverter. It is up to the user’s web browser to handle mailto links. If the user’s web browser is not properly configured to handle mailto links, the results are unpredictable.

The contents of your web form or calculator will not be involved in the processing started by the E-mail Button widget. If you wish to submit the full contents of a form or calculator, configure the web form’s submit options.

• Enter the recipient’s e-mail address in the Mail To field. The From field of the new e-mail will normally be set automatically by the e-mail client. All other fields of the new e-mail will be empty.

Call Button

A Call Button converts to a tel (“initiate a telephone call to this number”) hyperlink. When the button is pressed, the device will initiate its normal behavior for tel hyperlinks, which usually is to make a telephone call to the number you have specified.

Note that none of this functionality is provided by SpreadsheetConverter. It is up to the user’s web browser to handle tel links. If the user’s web browser is not properly configured to handle tel links, the results are unpredictable.

The contents of your web form or calculator do not participate in the processing started by the Call Button widget, and nothing is sent to the designated telephone number.

• Enter the number you want the device to call in the Tel No field. The telephony infrastructure may require that you provide the phone number in a specific format. We recommend that you provide both country and area codes to ensure that the telephone number always works, regardless of the user’s location. The telephony infrastructure will usually also provide a Caller ID, i.e. the telephone number that the call originates from.

Action Buttons

The Update, Reset, Print and Submit buttons are normally available in the toolbar.

If you want to place an action button elsewhere, perhaps to simplify the user interface, action buttons can be inserted as widgets in any cell in the calculator.

The text on the buttons can be changed. Just type the text you want on the button into the cell where you place the widget.

Submit Action button

The Submit button sends the form to a web server for processing. Insert a Submit button at the end of your long form to save your users from having to scroll to the nearest toolbar.

Update Action button

For smaller calculators, SpreadsheetConverter automatically updates all cells in a spreadsheet if one of the values is changed, just like Excel does. For a very complex web calculator, you have the option of switching to manual updating of the calculator in the Recalculation method setting on the Workbook tab. In that case, an Update button is needed to manually initiate the updating of the spreadsheet.

You can place the Update button in any cell, perhaps right after your most commonly used input fields.

Reset Action button

The Reset button clears all input fields in a form. It is rarely implemented, except in situations where a large number of fields contain values that never will be re-used. You can make the Reset button available where-ever users need it.

Print action button

SpreadsheetConverter supports three printing operations:

• Print All – prints all worksheets separately.
• Print This – prints the current worksheet.
• Print – prints the print sheet if there is one, or the current worksheet.

If you initiate the print operation from the web browser with the Print menu option or the Ctrl-P keyboard shortcut, it corresponds to the Print operation in the list above.

For each Print operation, there is an action button that you can insert into any cell in the spreadsheet.

Hide Rows/Sheets widget

You can hide certain rows in your spreadsheet, and even entire worksheets, depending on the contents of a controlling cell.

Learn more about the Hide Rows/Sheets widget. 

Add/Edit Responsive Block widget

Responsive blocks allow you to dynamically adapt the layout of the converted web page to the screen width of any device.

Learn more about how to Add/Edit Responsive Blocks.

File Attachments widget

If your users want to include files with their form submissions, e.g. a CV with a job application or an image with an error report, add a File Attachments widget to your form.

Utility

The Utility widget can be used to assign a name to a calculated cell, or to make it invisible.

You insert a Utility widget by clicking the Utility widget in the Widgets tab in the task pane. Utility cells in a form or calculator are always locked for user input in order to preserve the contents.

• Make hidden field is used when you want a cell to be visible in the spreadsheet, but not in the converted web page. This also allows you to provide information to a form processing script without showing it in the form. As an example, if you use a cell to keep track of how long it took a user to fill in a form, you may want to hide this calculation. Even though the field is hidden, it is forwarded with the form when the form is submitted for processing.
• Name your widgets in electronic forms since it becomes much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.
• Utility cells get their default values from the formulas in the cell.
• You cannot assign a value to a Utility cell from the link to the web page.

Learn more

Some of our tutorials partly focus on the Utility widget:

• Design a membership application form
• How to create a PayPal payment form