Step-by-Step Guide: Creating a Custom Form with Zuar Portal | Scribe

    Step-by-Step Guide: Creating a Custom Form with Zuar Portal

    • Greg |
    • 24 steps |
    • 2 minutes
    1
    Ctrl+Right Click to bring up the menu, choose HTML under New Block
    2
    Rename the Block something relevant
    3
    Navigate to the HTML tab
    4
    Paste the basic Form sample into the HTML editor and click preview to see the result
    5
    You now have text boxes to enter a Username and Password
    6
    Highlighted here on the HTML page are the two lines that define the password element of the form. The label is important since it is made clickable to check the associated box. This connection is made by matching the 'label for' to the id set below in line 5. Name can be thought of as identifier or perhaps column name for our input. What would this column or group be named for all the inputted values? pword Value will be the initial value of the input, in this case blank text boxes since value is blank, but it will also be what is dynamically sent to wherever we need to send the data to upon eventually Submitting.
    7
    Click "OK" from any tab on the Block Editor
    8
    Click "SAVE" to save the changes to the Block and Page
    9
    Press CTRL+Shift+B from the Page to edit the Form Example Block again
    10
    Let's quickly change the form type to show flexibility. Swap lines 2 and 3 and delete lines 4 and 5 so the code looks as in this step
    11
    Change the input type to checkbox
    12
    Change the id, name, value, and label for the checkbox for your use case
    13
    Give the Checkbox an appropriate label to choose
    14
    Once finished, copy and paste the two lines twice to create three input elements
    15
    Start changing the attributes of the new objects to your desired options
    16
    Once finished with your Checkbox elements, click Preview to show the changes
    17
    Test out your Form options in the preview
    18
    To add a Submit button, navigate back to the HTML tab
    19
    Enter the input shown on line 8
    20
    add the action="/action_page.php" to the form instantiation on line 1. This will send the specified value to this webpage in the URL to be able to be taken out and perhaps loaded into a database. PHP opens up the world of what we do with the data once it is captured and submitted using HTML