Small Form That Looks Good on a Mobile Device

keving98 · September 13, 2017

We're a small manufacturer. We need to create a form that allows a visitor to pick a few machine options and the form would generate the specs based on those choices. The customer wouldn't be ordering online -- it's just for reference purposes. I know it's embarrassingly simple but I've spent two hours digging around and I don't even know what you would call that type of form let alone find any examples. We, of course, need it to look good on a mobile device.

Does anyone know of a site that I might find an example or what you would call a form like that so I can find one myself?

Any help would be greatly appreciated.

For example:
1. Choose series: Medium Duty
Heavy Duty

2. Choose Equipment:   Modular       Complete
           T-14       R-10
           T-24       R-15
           T-34       R-25

Output based on the above choices:

Capacity =
Stroke =
Thrust=

dsonesuk · September 14, 2017

A form is a form, IT is CSS and media queries that adjust the input, labels etc to fit a particular device width.

Choose how you want these items chosen i.e dropdown, radio (where only one of many items can be selected), checkbox (multiple or all of many items can be chosen).

Then how the output is gathered? from chosen items does it get the data for calculating output from database? or depending on items, calculate output using a JavaScript array? storing the values depending of chosen items.

keving98 · September 18, 2017

First the visitor would pick the machine line, i.e.: Medium Duty or Heavy Duty.

Based on which machine line the visitor chose they would be offered the machines in that line. For example, if they chose Medium Duty they would then be asked to choose Modular or Complete. If they chose Complete, they would then be asked to choose between the R-10, R-15 or R-25. If they chose R-25 they would then be given the specs for the R-25.

The way I'm imagining it is using dropdown boxes. Until they choose the machine type the other dropdown boxes are grayed out. Once they choose the machine type the next options become available to choose (Modular or Complete), etc.

Thanks for your time. Hope this helps.

dsonesuk · September 18, 2017

Like this?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript">
            window.onload = function() {
                var series = document.getElementById('series');

                var equip = document.getElementById('equipment');

                series.onchange = function() {
                    if (this.value !== "") {
                        equip.disabled = false;
                    }
                    else
                    {
                        equip.disabled = true;
                    }

                };
            };
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div>
            <select id="series" name="series">
                <option value="">Choose series:</option>
                <option value="medium">Medium Duty</option>
                <option value="heavy">Heavy Duty</option>
            </select>
            <hr>
            <select id="equipment" name="equipment" disabled>
                <option value="">Choose equipment:</option>
                <optgroup label="Modular">
                    <option value="T-14">T-14</option>
                    <option value="T-24">T-24</option>
                    <option value="T-34">T-34</option>
                </optgroup>
                <optgroup label="Complete">
                    <option value="r-10">R-10</option>
                    <option value="r-15">R-15</option>
                    <option value="r-20">R-20</option>
                </optgroup>
            </select>
        </div>
    </body>
</html>

The JavaScript checks if a value other than a empty string (which is the first option value shown on page load) is chosen, if yes! enable the next dropdown, else disable again

dsonesuk · September 18, 2017

The trouble that I am not sure about, is what is shown if heavy selected, as whatever is selected between heavy and medium opens the dropdown below?

keving98 · September 18, 2017

That's exactly what I had in mind. I'm not sure what the "trouble that I am not sure about" is.

The idea is if they choose "Medium Duty" then the next box would light up with the Medium Duty models. (T-4, T-10, T-12 and R-2, R-6, R-8). If they choose "Heavy Duty" the next box would light up with the T-14, T-24, T-34 and R-10, R-15, R-20 models instead.

Thanks again.

dsonesuk · September 18, 2017

That makes sense now

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript">
            window.onload = function() {
                var series = document.getElementById('series');
                series.value = "";
                var equip_m = document.getElementById('equipment_m');
                equip_m.style.display = "none";
                var equip_h = document.getElementById('equipment_h');
                equip_h.style.display = "none";

                series.onchange = function() {
                    if (this.value !== "" && this.value === "medium") {
                        equip_m.style.display = "";
                        equip_m.disabled = false;
                    }
                    else
                    {
                        equip_m.style.display = "none";
                        equip_m.disabled = true;
                        equip_m.value = "";

                    }
                    if (this.value !== "" && this.value === "heavy") {
                        equip_h.style.display = "";
                        equip_h.disabled = false;
                    }
                    else
                    {
                        equip_h.style.display = "none";
                        equip_h.disabled = true;
                        equip_h.value = "";
                    }


                };
            };
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div>
            <select id="series" name="series">
                <option value="">Choose series:</option>
                <option value="medium">Medium Duty</option>
                <option value="heavy">Heavy Duty</option>
            </select>
            <hr>
            <select id="equipment_m" name="equipment_m" disabled>
                <option value="">Choose Medium series equipment:</option>
                <optgroup label="Modular">
                    <option value="T-14">T-14</option>
                    <option value="T-24">T-24</option>
                    <option value="T-34">T-34</option>
                </optgroup>
                <optgroup label="Complete">
                    <option value="r-10">R-10</option>
                    <option value="r-15">R-15</option>
                    <option value="r-20">R-20</option>
                </optgroup>
            </select>
            <select id="equipment_h" name="equipment_h" disabled>
                <option value="">Choose Heavy series equipment:</option>
                <optgroup label="Modular">
                    <option value="T-4">T-4</option>
                    <option value="T-10">T-10</option>
                    <option value="T-12">T-12</option>
                </optgroup>
                <optgroup label="Complete">
                    <option value="r-2">R-2</option>
                    <option value="r-6">R-6</option>
                    <option value="r-8">R-8</option>
                </optgroup>
            </select>

        </div>
    </body>
</html>

keving98 · September 19, 2017

Awesome.

Here's the actual data for this stage:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
<title>Document Title</title>
<script type="text/javascript">
window.onload = function() {
var series = document.getElementById('series');
series.value = "";
var equip_l = document.getElementById('equipment_l');
equip_l.style.display = "none";
var equip_m = document.getElementById('equipment_m');
equip_m.style.display = "none";
var equip_h = document.getElementById('equipment_h');
equip_h.style.display = "none";
var equip_em = document.getElementById('equipment_em');
equip_em.style.display = "none";

series.onchange = function() {
if (this.value !== "" && this.value === "light") {
equip_l.style.display = "";
equip_l.disabled = false;
}
else
{
equip_l.style.display = "none";
equip_l.disabled = true;
equip_l.value = "";

}
if (this.value !== "" && this.value === "medium") {
equip_m.style.display = "";
equip_m.disabled = false;
}
else
{
equip_m.style.display = "none";
equip_m.disabled = true;
equip_m.value = "";

}
if (this.value !== "" && this.value === "heavy") {
equip_h.style.display = "";
equip_h.disabled = false;
}
else
{
equip_h.style.display = "none";
equip_h.disabled = true;
equip_h.value = "";
}
if (this.value !== "" && this.value === "electromechanical") {
equip_em.style.display = "";
equip_em.disabled = false;
}
else
{
equip_em.style.display = "none";
equip_em.disabled = true;
equip_em.value = "";
}

};
};
</script>
<style type="text/css">

</style>
</head>
<body>
<div>
<select id="series" name="series">
<option value="">Choose series:</option>
               <option value="light">Light Duty</option>
<option value="medium">Medium Duty</option>
<option value="heavy">Heavy Duty</option>
<option value="electromechanical">Electro Mechanical</option>
</select>
<hr>
<select id="equipment_l" name="equipment_l" disabled>
<option value="">Choose Light series equipment:</option>
<optgroup label="Modular">
<option value="M-4">M-4</option>
</optgroup>
<optgroup label="Complete">
<option value="tm-4">TM-4</option>
</optgroup>
</select>
<select id="equipment_m" name="equipment_m" disabled>
<option value="">Choose Medium series equipment:</option>
<optgroup label="Modular">
<option value="M-10">M-10</option>
<option value="M-20">M-20</option>
<option value="M-23">M-23</option>
</optgroup>
<optgroup label="Complete">
<option value="tm-10">TM-10</option>
<option value="pm-10">PM-10</option>
<option value="tm-20">TM-20</option>
<option value="pm-20">PM-20</option>
<option value="tm-23">TM-23</option>
<option value="pm-23">PM-23</option>
</optgroup>
</select>
<select id="equipment_h" name="equipment_h" disabled>
<option value="">Choose Heavy series equipment:</option>
<optgroup label="Modular">
<option value="M-25">M-25</option>
<option value="M-40">M-40</option>
<option value="M-50">M-50</option>
</optgroup>
<optgroup label="Complete">
<option value="tm-25">TM-25</option>
<option value="pm-25">PM-25</option>
<option value="tm-40">TM-40</option>
<option value="pm-40">PM-40</option>
<option value="tm-50">TM-50</option>
</optgroup>
</select>
<select id="equipment_em" name="equipment_em" disabled>
<option value="">Choose Electro Mechanical equipment:</option>
<optgroup label="Modular">
<option value="servo10k-6">Servo 10K-6</option>
</optgroup>
<optgroup label="Complete">
<option value="tmservo10k-6">TM Servo 10K-6</option>
</optgroup>
</select>

</div>
</body>
</html>

What I need now is:

Say the visitor chooses Medium Duty-->M-10. What I need to show are the specs for the M-10. The specs are "Capacity"; "Max Stroke", "Maximum Orbital Thrust" and "Type". See attached.

Thanks again.

dsonesuk · September 20, 2017

I would create html table with all this information, then for capacity cells with values and onward i would add class name representing the dropdown menu values, this table will be hidden.

This will make it easier to edit.

Another table will be created which will hold the data cell with values required.

When equipment part ref is selected you use the value to list through class name of that value and clone, then fill the secondary table with that cloned cells from main html table.

Sign In

Small Form That Looks Good on a Mobile Device

Recommended Posts

keving98

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

keving98

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

keving98

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

keving98

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity