FROM CACHE - en_header
Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Building A "My Color Fit Form"

How to make a color selection form responsive for mobile and desktop?

NoahOnyejese
Excursionist
29 0 6
‎11-14-2022 11:20 AM

Hi there, 

I'm new to coding started roughly a week ago and I'm trying to code a form. In this form, I allow my visitors to choose their skin color, hair color, and eye color. With that information, I will give them the color that suits them best. I'm currently about halfway done. 

 

The form is all done but I still need to calculate what color suits people best (depending on their choices - but that is not my current problem, It's just extra info so that you understand my code.)

 

The is I want to make the whole css different on mobile.  I tried to do it with (@media only screen ...).

It worked for the "Find my color" button but now I can't open the form on mobile only on desktop. 

 

I need to be able to open it on both desktop and mobile. 

 

My idea was to copy and paste the form html and css, and then change all class names to give them differnt css properties and then call one Mobile and the other Desktop and then switch between thoose depending on screen width. 

 

This is my code (note I'm a bloody beginner):

 

ps: M beside class names stand for Mobile, D stands for Desktop.

 

 

 

 

 

<!--Find MyColor Button-->
<button type="button" class="MyColorD" onclick="StartForm()">Find my color</button>
<button type="button" class="MyColorM" onclick="StartForm()">Find my color</button>
<style>
    /*Styling MyColor Button*/
    .MyColorD{
        background-color: white;
        color: black;
        font-size: 15px;
        font-weight: 500;
        display: grid;
        margin: auto;
        padding: 12px 103px;
        border: 1px solid white;
        cursor: pointer;
        margin-top: -30px;
    }
    .MyColorM{
        background-color: white;
        color: black;
        font-size: 15px;
        font-weight: 500;
        display: grid;
        margin: auto;
        padding: 12px 103px;
        border: 1px solid white;
        cursor: pointer;
        margin-top: -15px;
    }
    /*Styling MyColor Button on hover*/
    .MyColorD:hover{
        border: 2px solid white;
    }
    .MyColorM:hover{
        border: 2px solid white;
    }
    /*correct show*/
 .MyColorD {
    display: none;
    }

    @media only screen and (min-width: 767px) {
    .MyColorD {display: block;
    }
    .MyColorM {display: none;

    }
    }
</style>

<!--Desktop View Form-->
    <form data-multi-step class="multi-step-formD">
        <!--Intro Step 1-->
        <div class="popupD" data-step>
            <button type="submit" class="close-buttonD"><img src="https://cdn.shopify.com/s/files/1/0556/2407/3534/files/Zeichenflache_1-100_87160942-9dbe-43b9-bcf1-2..."></button>
            <br>
            <br>
            <h2 style="font-weight: bold;">MY COLOR FIT</h2>
            <p style="font-size: 14px; margin: 0;">Please follow instructions.</p>
            <p style="font-size: 14px; margin-top: -10px;">Like this we can identify the color that suits you best.</p>
            <hr class="lineD">
            <br>
            <button type="button" class="start-buttonD" data-next>Start</button>
        </div>
        <!--Skincolor Step 2-->
        <div class="popupD" data-step>
            <button type="submit" class="close-buttonD"><img src="https://cdn.shopify.com/s/files/1/0556/2407/3534/files/Zeichenflache_1-100_87160942-9dbe-43b9-bcf1-2..."></button>
            <h2 style="font-weight: bold; margin-top: -10px;">MY COLOR FIT</h2>
            <p style="font-size: 18px; margin-top: -10px;">Please choose your skincolor</p>
            <hr class="lineD">
            <input type="checkbox" class="skintype1D" name="check1" onclick="test1(this)" data-next></input>
            <input type="checkbox" class="skintype2D" name="check1" onclick="test1(this)" data-next></input>
            <input type="checkbox" class="skintype3D" name="check1" onclick="test1(this)" data-next></input>
            <input type="checkbox" class="skintype4D" name="check1" onclick="test1(this)" data-next></input>
            <input type="checkbox" class="skintype5D" name="check1" onclick="test1(this)" data-next></input>
            <input type="checkbox" class="skintype6D" name="chech1" onclick="test1(this)" data-next></input>
            <br>
            <p style=" font-family: 'League Spartan', sans-serif; font-size: 10px; text-align: center;color: white; opacity: 0.4;">(step 1 of 3)</p>
            <button type="button" class="start-buttonD" data-previous>Back</button>
        </div>
        <!--Haircolor Step 3-->
        <div class="popupD" data-step>
            <button type="submit" class="close-buttonD"><img src="https://cdn.shopify.com/s/files/1/0556/2407/3534/files/Zeichenflache_1-100_87160942-9dbe-43b9-bcf1-2..."></button>
            <h2 style="margin-top:-10px ; font-weight: bold;">MY COLOR FIT</h2>
            <p style="font-size: 18px; margin-top: -10px;">Please choose your haircolor</p>
            <hr class="lineD">
            <input type="checkbox" class="haircolor1D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor2D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor3D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor4D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor5D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor6D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor7D" name="check2" onclick="test2(this)" data-next></input>
            <input type="checkbox" class="haircolor8D" name="check2" onclick="test2(this)" data-next></input>
            <br>
            <p style=" font-family: 'League Spartan', sans-serif; font-size: 10px; text-align: center;color: white; opacity: 0.4;">(step 2 of 3)</p>
            <button type="button" class="start-buttonD" data-previous>Back</button><button type="button" class="start-buttonD" data-next>Skip</button>
        </div>
        <!--Eyecolor Step 4-->
        <div class="popupD" data-step>
            <button type="submit" class="close-buttonD"><img src="https://cdn.shopify.com/s/files/1/0556/2407/3534/files/Zeichenflache_1-100_87160942-9dbe-43b9-bcf1-2..."></button>
            <h2 style="margin-top:-10px ; font-weight: bold;">MY COLOR FIT</h2>
            <p style="font-size: 18px; margin-top: -10px;">Please choose your Eyecolor</p>
            <hr class="lineD">
            <input type="checkbox" class="eyecolor1D" name="check3" onclick="test3(this)" data-next></input>
            <input type="checkbox" class="eyecolor2D" name="check3" onclick="test3(this)" data-next></input>
            <input type="checkbox" class="eyecolor3D" name="check3" onclick="test3(this)" data-next></input>
            <input type="checkbox" class="eyecolor4D" name="check3" onclick="test3(this)" data-next></input>
            <input type="checkbox" class="eyecolor5D" name="check3" onclick="test3(this)" data-next></input>
            <input type="checkbox" class="eyecolor6D" name="check3" onclick="test3(this)" data-next></input>
            <br>
            <p style=" font-family: 'League Spartan', sans-serif; font-size: 10px; text-align: center;color: white; opacity: 0.4;">(step 3 of 3)</p>
            <button type="button" class="start-buttonD" data-previous>Back</button>
        </div>
        <!--MyColor Step 5-->
        <div class="popupD" data-step>
            <h2 style="font-weight: bold;">MY COLOR FIT</h2>
            <p style="font-size: 18px; margin-top: -10px; ">This color fits you to __% </p>
            <br>
            <br>
            <hr class="lineD">
            <p style="font-size: 14px; margin-top: -10px;">You might also like these colors</p>
            <br>
            <br>
            <br>
            <p style=" font-family: 'League Spartan', sans-serif; font-size: 10px; text-align: center;color: white; opacity: 0.4; margin-top: -5px;">(done!)</p>
            <button type="submit" class="start-buttonD">Close</button>
        </div>
    </form>

<style>
    /*correct Show*/
    .multi-step-formD {
    display: none;
    }

    @media only screen and (min-width: 767px) {
    .multi-step-formD {display: block;
    }
    .multi-step-formM {display: none;

    }
    }
</style>

<style>
    /*Froms for Desktop*/
    .popupD{
    width: 800px;
    height: 400px;
    background: black;
    border-radius: 10px;
    text-align: center;
    color: white;
    box-shadow: 0 3px 3px rgba(255, 255, 255, 0.3);
    border: 5px solid white;
    visibility: hidden;
    margin: 0;
    opacity: 0.5;
    transition: 0.3s ease-in-out;
    position: absolute;
    transition-delay: 0.3s;
    top: 25%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    }
    .popupD.active{
    visibility: visible;
    opacity: 1;
    position: absolute;
    }
    /*Lines*/
    .lineD{
    border: 0.5px solid white;
    opacity: 0.5;
    margin-left: 200px;
    width: 400px;
    background-color: white;
    margin-top: 0;
    margin-bottom: 20px;
    }
    /*Close Button Desktop*/
    .close-buttonD{
        background: black;
        cursor: pointer;
        margin-left: 740px;
        margin-top: 10px;
    }
    /*Start Form*/
    .start-buttonD{
    background: white;
    cursor: pointer;
    box-shadow:  0px 3px 5px  rgba(255, 255, 255, 0.199);
    color: black;
    padding: 5px 20px;
    outline: none;
    font-weight: bold;
    margin-right: 0.5vw;
    margin-left: 0.5vw;
    }
    .start-buttonD:hover{
    background: rgb(199, 199, 199);
    }
</style>

<style>
    /*Checkboxes of Skincolor Desktop*/
    input[type=checkbox]
    {
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    }
    input[class=skintype1D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background: #f8c8b0;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=skintype2D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#e0a677;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=skintype3D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#c48553;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=skintype4D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#754b38;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=skintype5D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#352219;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=skintype6D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#1a100b;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
</style>

<style>
    /*Checkboxes of Haircolor Desktop*/
    input[class=haircolor1D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=haircolor2D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=haircolor3D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }  
    input[class=haircolor4D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=haircolor5D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=haircolor6D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=haircolor7D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=haircolor8D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
</style>

<style>
/*Checkboxes of Eyecolor Desktop*/
    input[class=eyecolor1D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#b8c4de;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=eyecolor2D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background: #57788a;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=eyecolor3D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background: #817f69;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=eyecolor4D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#5c6139;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=eyecolor5D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background:#6b3b1d;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
    input[class=eyecolor6D]:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    background: #2e180b;
    display: block;
    width: 80px;
    height: 80px;
    border: 7px solid black;
    border-radius: 20px;
    cursor: pointer;
    }
</style>

<style>
    /*Before checked*/
    input[type=checkbox]:checked:before {
    font-family: "FontAwesome";
    content: "";
    font-size: 4vw;
    color: transparent !important;
    display: block;
    width: 80px;
    height: 80px;
    border: 3px solid white;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s ease-in ;
    }
</style>

<script>
    /*Access Multi Step Form*/
const mulitStepForm = document.querySelector("[data-multi-step]")
const formSteps = [...mulitStepForm.querySelectorAll("[data-step]")]


let currentStep = formSteps.findIndex(step => {
    return step.classList.contains("active")
}
)
if (currentStep < 0 ) {
    function StartForm(){
        currentStep = 0
        showCurrentStep()
    }
}

mulitStepForm.addEventListener("click", e => {
    if (e.target.matches("[data-next]")) {
        currentStep +=1
    } else if (e.target.matches("[data-previous]")) {
        currentStep -=1
    }
    showCurrentStep()
})
 
function showCurrentStep() {
    formSteps.forEach((step, index) => {
        step.classList.toggle("active", index ===
        currentStep)
    })
}
</script>

<script>
    /*Allow only one to be clicked (skincolor)*/
function test1(checkbox) {
    var checkboxes = document.getElementsByName('check1')
    checkboxes.forEach((item1) => {
        if (item1 !== checkbox) item1.checked = false
    })
}
/*Allow only one to be clicked (haircolor)*/
function test2(checkbox) {
    var checkboxes = document.getElementsByName('check2')
    checkboxes.forEach((item2) => {
        if (item2 !== checkbox) item2.checked = false
    })
}
/*Allow only one to be clicked (eyecolor)*/
function test3(checkbox) {
    var checkboxes = document.getElementsByName('check3')
    checkboxes.forEach((item3) => {
        if (item3 !== checkbox) item3.checked = false
    })
}
</script>
Labels:
618 Views
0 Likes
Report
Replies 3 (3)

lunaworks
Shopify Partner
452 44 48
‎11-19-2022 04:48 PM

Put your code in a codepen and post the link here so it can be checked out. As I'd advise you edit your post and show only code that's necessary to your question.

Alternatively, as you're working on shopify why dont you put this code in a section, share the link of the store and then add the store password( if the store isnt live) . 

If my solution fixed your issue, please mark my solution as solved.
In need of custom solutions? Please DM.
593 Views
0 Likes
Report
In response to lunaworks

NoahOnyejese
Excursionist
29 0 6
‎11-22-2022 03:27 PM

I already solved this actually but now that you mentioned it. I don't know how to navigate in those Shopify sections I don't know how they work exactly also I don't know how to add stuff to certain pages from the code sections so I do it with custom liquids currently. Any advice?

578 Views
0 Likes
Report
In response to NoahOnyejese

lunaworks
Shopify Partner
452 44 48
‎11-22-2022 03:38 PM

Not sure what exactly you want achieve but then basically you create a section, write your code in the section and then add the created section using the Customize. 

 

And also if you want to edit existing code, you find the section which has the code then you add your code to it pretty much. 

All I can do now is guess as you don’t have an issue at hand which I could use as an example. 

If my solution fixed your issue, please mark my solution as solved.
In need of custom solutions? Please DM.
575 Views
0 Likes
Report

Community Blog Articles

starting.webp
Dropshipping Viral Products to Sell in 2025

Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...

By JasonH Nov 27, 2024
top members.webp
Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024
bfcm-deals-and-discounts.jpg
Tips for Running BFCM Deals and Discounts 2024

In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...

By JasonH Nov 13, 2024
Terms of Service Privacy Policy