Making cards selectable?

UpstateLeafPeeper · February 9, 2019, 10:23pm

Hello everyone. Um, I have been away from web developent for ages and trying to get back into it, but I feel like an 80 year old person trying to learn again so pardon the dumb questions!

I am working on a site that sells various subscription plans, and I would like to create a landing page that has three “cards” (i.e. rectangular boxes) along side each other. Sort of like if you had three poker cards next to each other.

In each rectangle will be details about the particular plan like this…

Gold Plan
$30/mth

Includes:
- Feature 1
- Feature 2
- Feature 3
- and so on...

I feel like such a dummy, that even doing the HTML to create these cards will likely take me all weekend?!

Anyway, what I would like to figure out how to do is make it so when a person clicks on one of those cards it is “selectable” (is that even a word?!) and I can capture that and know, for instance, that they want to purchase the “Gold Plan”.

Does that makes sense?

Normally, on an HTML form you would use something like a radio button to capture which option a person wants, but some examples I have seen online for newspapers and magazines use the above approach instead.

I think it would be easy and look better if someone could just click on an image/card instead of having to click on a checkbox/radio button/form control.

If I can get the front-end to capture what they want, then I can use PHP to process things from there.

Oh, by the way, I would prefer to avoid using anything related to javascript right now. Maybe later on, but for now i want to keep things simple.

Thanks!

coothead · February 9, 2019, 11:12pm

Hi there UpstateLeafPeeper,

here is an example for you to play around with…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1 {
    line-height: 1em;
    font-size: 1.5em;
    text-align: center;
 }

#container {
    display: flex;
    justify-content: space-around;
 }

#container > div {
    position: relative;
    width: 20em;
    padding: 1em;
    margin: 0.5em;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    box-shadow: inset 0  0 1em rgba( 0, 0, 0, 0.3 ),
          0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

#container > div a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba( 255, 0, 0, 0.05 );
 }

#container > div:nth-of-type(2) a {
    background-color: rgba( 0, 255, 0, 0.05 );
 }

#container > div:nth-of-type(3) a {
    background-color: rgba( 0, 0, 255, 0.05 );
 }

@media ( max-width: 40em ) {
#container {
    display: block;
  }
#container > div {
    width: 100%;
    margin: 0.5em 0;
  }
 }
</style>

</head>
<body>
 
 <h1>Page Description Here</h1>
 <div id="container">
  <div>
   <h2>box description</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Curabitur sit amet sem sed libero bibendum tempus faucibus       
    quis mi. Nulla rhoncus vel ipsum in volutpat.
   </p>
   <a href="https://developer.mozilla.org/en-US/"></a>
  </div>

  <div>
   <h2>box description</h2>
   <p>
    Donec vehicula diam non leo efficitur, id euismod odio 
    tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
    et libero non diam tempor sagittis.
   </p>
   <a href="https://duckduckgo.com/"></a>
  </div>

  <div>
   <h2>box description</h2>
   <p>
    Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
    mattis leo at ex vehicula, non vestibulum ligula aliquam. 
   </p>
   <a href="https://www.example.com"></a>
  </div>

 <!-- #container --></div>

</body>
</html>

coothead

UpstateLeafPeeper · February 9, 2019, 11:47pm

Wow! That looks great!

The only thing is, how do those nifty boxes you created allow me to capture the user’s selection?

For instance, pretend that those boxes/cards said “Plan-A”, “Plan-B”, and “Plan-C”.

If you click on “Plan-B”, I need a way to capture that selection.

UpstateLeafPeeper · February 9, 2019, 11:53pm

I haven’t eaten all day, so maybe I’m not making the most sense.

Let me try and explain again…

I am looking to create a single web page that is a combination of a product page and a checkout page. I am doing this because in my particualr case, I have read that if you make users navigate too much they might abandon their cart.

So at the top of my web page, I will have 3 choices for which plan a person wants to buy.

Then beneath that top section, I will have fields where they enter in an email address, password and payment details. Then finally a “Process Order” button.

So the nifty cards you created for me are really part of the data entry form so to speak.

When a person clicks on a given card, that can be seen as them clicking on an “Add to Cart” button.

I’m not sure if I have to add a form button to each of those cards to make things behave how I want, or if I can just make the cards “selectable” themselves?

Not sure if i am making any sense?

Also not entirely sur ethe best way to accomplish my end goal, so feel free to make suggestions!

coothead · February 10, 2019, 12:07am

I assumed that you would just use the links for your
PHP processing.

Or would you be happier if I made the boxes to be
form elements?

coothead

coothead · February 10, 2019, 12:37am

Hi there UpstateLeafPeeper,

I have changed the boxes to “form elements”.
Does that suit your requirements better ?

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1 {
    line-height: 1em;
    font-size: 1.5em;
    text-align: center;
 }

#container {
    display: flex;
    justify-content: space-around;
 }

#container > form {
    position: relative;
    width: 20em;
    padding: 1em;
    margin: 0.5em;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    box-shadow: inset 0  0 1em rgba( 0, 0, 0, 0.3 ),
          0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

#container > form input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border:0;
    background-color: rgba( 255, 0, 0, 0.05 );
    cursor: pointer;
 }

#container > form:nth-of-type(2) input[type="submit"] {
    background-color: rgba( 0, 255, 0, 0.05 );
 }

#container > form:nth-of-type(3) input[type="submit"] {
    background-color: rgba( 0, 0, 255, 0.05 );
 }

.submit {
    font-weight:bold;
    color: #006;
 }

@media ( max-width: 40em ) {
#container {
    display: block;
  }
#container > form {
    width: 100%;
    margin: 0.5em 0;
  }
 }
</style>

</head>
<body> 

 <h1>Page Description Here</h1>

 <div id="container">

  <form action="#">
   <h2>Gold Plan $30/mth</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Curabitur sit amet sem sed libero bibendum tempus faucibus       
    quis mi. Nulla rhoncus vel ipsum in volutpat.
   </p>
   <p class="submit">
    Please click this box to get plan.
   </p>
   <input type="hidden" name="a" value="1">
   <input type="hidden" name="b" value="2">
   <input type="hidden" name="c" value="3">
   <input type="submit" value="">
  </form>

  <form action="#">
   <h2>Silver Plan $20/mth</h2>
   <p>
    Donec vehicula diam non leo efficitur, id euismod odio 
    tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
    et libero non diam tempor sagittis.
   </p>
   <p class="submit">
    Please click this box to get plan.
   </p>
   <input type="hidden" name="d" value="4">
   <input type="hidden" name="e" value="5">
   <input type="hidden" name="f" value="6">
   <input type="submit" value="">
  </form>

  <form action="#">
   <h2>Brass Plan $10/mth</h2>
   <p>
    Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
    mattis leo at ex vehicula, non vestibulum ligula aliquam. 
   </p>
   <p class="submit">
    Please click this box to get plan.
   </p>
   <input type="hidden" name="g" value="7">
   <input type="hidden" name="h" value="8">
   <input type="hidden" name="i" value="9">
   <input type="submit" value="">
  </form>

 <!-- #container --></div>

</body>
</html>

coothead

UpstateLeafPeeper · February 10, 2019, 12:59am

Pardon me, but I haven’t done any of this in years so I’m not sure how it should work.

What do you mean by using the links for my PHP?

In the past, I was used to working with HTML forms and when they were submitted, my PHP would handle the $_POST data in some way.

Visually, it seemed more appealing if a user could click on the plan that they wanted, instead of having to dealing with radio buttons on an HTML form.

I had considerd having an “Add to Cart” button on each card, but that could be a problem if someone chose multiple plans which they probably don’t want.

i suppose what I need is something that behaves like a radio button where you can choose “Plan A” OR “Plan B” OR “Plan C” but not multiples.

I guess I could use some advice here…

coothead · February 10, 2019, 1:04am

Hi there UpstateLeafPeeper,

post #6 shows a form elements example.

coothead

UpstateLeafPeeper · February 10, 2019, 1:12am

Am looking now…

In the mean time, what do you think is the best designapproach for what I am trying to do?

coothead · February 10, 2019, 1:21am

The “best design approach” is the one that fully
meets your requirements.

I chose to use “CSS flex” method because it suited
the problem as it appeared to me from your post.

coothead

UpstateLeafPeeper · February 10, 2019, 4:22am

Can you help me understand what exactly it is you did?

It looks like you made each box a form and then applied styles to the box-form?

(Cant say that I recognize that newer CSS…)

coothead · February 10, 2019, 11:12am

I used the CSS “Flexible Box Module”, usually referred to as flexbox,
as an appropriate method to resolve your problem.

Further reading :-

Basic concepts of the flexbox

That is correct, and the input[type=“submit”] was styled to cover
the total area of the form element.

Media queries were also applied to ensure that the layout rendered
well all devices.

Further reading :-

Using media queries

This link should, hopefully, provide some invaluable enlightenment…

CSS Introduction, CSS Tutorials and CSS Reference

I trust that all this information will assist with your progress.

coothead

system · May 12, 2019, 6:12pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.