Learn
No results for 'undefined'
    Powered by Algolia

    Create a form

    You can collect user input by using a form, which typically contains various input-type components.

    The following shows an example of how to create a checkout form.

    Prepare the address data

    In the spreadsheet, enter the following data into the range A1:G16.

    ABCDEFG
    1Address
    2placeholderstextinput valuesisValid?border
    3John DoeFull name=IF(D3=TRUE, "#cccccc", "#ff0000")
    4john@example.comEmail=IF(D4=TRUE, "#cccccc", "#ff0000")
    51234 Michael St.Address=IF(D5=TRUE, "#cccccc", "#ff0000")
    6New YorkCity=IF(D6=TRUE, "#cccccc", "#ff0000")
    7
    8State
    9textvaluecaptionentered itementered valueis empty?border
    10StatefirstNew York=GRAB(D10, "$..value")=IS_NULL(E10)=IF(F10=FALSE, "#cccccc", "#ff0000")
    11secondCalifornia
    12thirdMichigan
    13
    14ZIP
    15formattextinput valuesis valid?border
    16^[0-9]5(-[0-9]4)?$ZIP=IF(D16=TRUE, "#cccccc", "#ff0000")

    Create the UI for address fields

    Create the UI for the address fields as shown in the video below or described in the procedure under the video.

    The cell addresses used in the procedures below refer to the sheet defined in the Prepare the address data section.

    To create the UI for the address fields:

    1. Change the background color of the page to light-grey.

    2. Add a Text component to the page and change its text value property to "Billing address". Make the text semi-bold as shown in the video above.

    3. Add to the page another Text component and a Text Input component and group them into a box.

    4. Adjust the size of the components on the page as appropriate.

    5. Change the name of the Box component to "Address".

    6. Select the Address component, click Repeater, bind the Based On Spreadsheet property to cell A3 and set the range direction to vertical by clicking .

    7. Bind the Text component's text property value to cell B3.

    8. Bind the Text Input component's properties:

      • Bind the Placeholder property to cell A3.
      • Bind the Value property to cell C3.
      • Enable Validation, and then, under Check Validity, select Is non empty; bind Is Valid property to cell D3.
      • Bind the Border hex-color property to cell E3.
    9. Enable the Preview mode and make sure it works as expected.

    Create the UI for the State field

    Create the UI for the State field as shown in the video below or described in the procedures under the video.

    The cell addresses used in the procedures below refer to the sheet defined in the Prepare the address data section.

    To create the UI for the State field:

    1. Add to the page a Dropdown component and a Text component, and then group them into a box.
    2. Rename the Box component to "State drop-down".
    3. Bind the Text component's Text property value to cell A10.
    4. Bind the Dropdown component's properties:
      • Bind the Items property value to the range B10:C10.
      • Bind the Selected Item property to cell D10.
      • Bind the Border hex color to cell G10.

    Create the UI for the ZIP field

    Create the UI for the State field as shown in the video below or described in the procedures under the video.

    The cell addresses used below refer to the sheet defined in the Prepare the address data section.

    To create the UI for the ZIP field:

    1. Add to the page a Text Input component and a Text component, and then group them into a box.
    2. Rename the Box component to "ZIP".
    3. Bind the Text component's Text property value to cell B16.
    4. Bind the Text Input component's properties:
      • Enable Format, and then, from the Format Type drop-down list, select Regular Expression.
      • Bind the Format property to cell A16.
      • Bind the Value property to cell C16.
      • Enable Validation, and then select Matches Format and Is non empty; bind Is Valid property to cell D16.
      • Bind the Border hex-color property to cell E16.

    Add a checkbox

    1. Add to the page a Checkbox component and place it under the State and ZIP fields.
    2. Select the Checkbox component and change its Label property value to "Shipping address is the same as my billing address".

    Prepare data for payment fields

    On a separate sheet, enter the following data into the range A1:E13.

    ABCDE
    1Payment
    2textformatis valid?borderinput values
    3Name on card^[A-Za-z ,.'-]+$=IF(C3=TRUE, "#cccccc", "#ff0000")
    4Credit card number^\d4-?\d4-?\d4-?\d4$=IF(C4=TRUE, "#cccccc", "#ff0000")
    5
    6Expiration^\d2\/\d2$=IF(C6=TRUE, "#cccccc", "#ff0000")
    7CVV^[0-9]4$=IF(C7=TRUE, "#cccccc", "#ff0000")
    8
    9Card type
    10Valueis disabled?Label
    11Credit cardFALSECredit card
    12Debit cardFALSEDebit card
    13PayPalFALSEPayPal
    14

    Add payment fields

    The cell addresses used in the procedures below refer to the sheet defined in the Prepare data for payment fields section.

    Add title and radio-button group

    Add a title to the payment-related UI group and add a radio-button group for the card type as shown in the video below or described in the procedure under the video.

    1. Add to the page a Text component and rename its Text property value to "Payment".
    2. Add to the page a Radio Button Group component.
    3. Bind the Radio Button Group component's Items property to the range A11:C11 and set the range direction to vertical by clicking .

    Create the UI for the holder name and card number fields

    Create the UI for the card holder and card number fields as shown in the video below or described in the procedure under the video.

    1. Add to the page a Text component and a Text Input component and group them into a box.
    2. Adjust the size of the components on the page as appropriate.
    3. Change the name of the Box component to "Card name and number".
    4. Select the Card name and number component, and then, in its properties panel, click Repeater.
    5. Bind the Based On Spreadsheet property to cell A3 and set the range direction to vertical by clicking .
    6. Bind the Text component's text property value to cell A3.
    7. Bind the Text Input component's properties:
      • Bind the Value property to cell E3.
      • Delete the default Placeholder value.
      • Enable Format, and then, from the Format Type drop-down list, select Regular Expression.
      • Bind the Format property to cell B3.
      • Enable Validation, and then select Matches Format and Is non empty; bind Is Valid property to cell C3.
      • Bind the Border hex-color property to cell D3.

    Create the UI for the card expiration and CVV fields

    Create the UI for the card expiration and card CVV fields as shown in the video below or described in the procedure under the video.

    To create the UI for the card expiration and CVV fields:

    1. Add to the page a Text component and a Text Input component and group them into a box.
    2. Adjust the size of the components on the page as appropriate.
    3. Change the name of the Box component to "Card expiration and CVV".
    4. Select the Card expiration and CVV component, and then, in its properties panel, click Repeater.
    5. Bind the Based On Spreadsheet property to cell A6 and set the range direction to vertical by clicking .
    6. Bind the Text component's text property value to cell A6.
    7. Bind the Text Input component's properties:
      • Bind the Value property to cell E6.
      • Delete the default Placeholder value.
      • Enable Format, and then, from the Format Type drop-down list, select Regular Expression.
      • Bind the Format property to cell B6.
      • Enable Validation, and then select Matches Format and Is non empty; bind Is Valid property to cell C6.
      • Bind the Border hex-color property to cell D6.

    Prepare data for the checkout button

    On a separate sheet, enter the following data into the range A1:B2.

    ABC
    1NormalHover
    2#007bfe#0068d9
    3

    Create the UI for the checkout button

    Create the UI for the checkout button as shown in the video below or described in the procedure under the video.

    The cell addresses used in the procedures below refer to the sheet defined in the Prepare data for the checkout button section.

    To create the UI for the checkout button:

    1. Add to the page a Button component, and then adjust its size as appropriate.
    2. Select the Button component, and then, in the Button properties panel, define the properties as follows:
      • Change the Caption value to "Continue to checkout".
      • Change the font weight to Medium and change the font size to 18px.
      • Bind the background hex-color to cell A2.
    3. Click Hover to go to the Hover tab, and then define the properties as follows:
      • Enable Hover Styles.
      • Click to copy the style from the Normal tab.
      • Bind the background hex-color to cell B2.
    4. Click Active to go to the Active tab, and then click to copy the style from the Hover tab.

    Prepare data for the cart fields

    On a separate sheet, enter the following data into the range A1:B7.

    ABC
    1Cart
    2itemvalue
    3Item 1$2.50
    4Item 2$3.20
    5Item 3$10.00
    6Item 4$1.50
    7Total(USD)=SUM(B3:B6)
    8

    Create the UI for the cart fields

    Create the UI for the cart fields as shown in the video below or described in the procedure under the video.

    The cell addresses used in the below procedure refer to the sheet defined in the Prepare data for the cart fields section.

    To create the UI for the cart fields:

    1. Add to the page a Text component and adjust its size as needed.
    2. Use Alt+drag to duplicate the Text component and place it to the right of the original Text component.
    3. Group the two Text components into a box.
    4. Select the box, and then, in the Box properties panel, change the border color and background color as appropriate.
    5. Click Repeater and bind the Based On Spreadsheet property to cell A3 and set the range direction to vertical by clicking .
    6. Bind the left-hand Text component to cell A3.
    7. Bind the right-hand Text component to cell B3.
    8. Add to the page a Text component, and then rename it to "Your cart".
    Contents