• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Ecommerce button and Form

Community Beginner ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

I styled a "buy it" button and am trying to figure out how to add my form so that it connects and looks like my button. I tried adding the form but then the style gets messed up. I am in a beginning web class so bare with me. I appreciate any help. Thanks.

 

This is my HTML for the button.

 

                    <!-- single product -->

                    <div class = "product">

                        <div class = "product-content">

                            <div class = "product-img">

                              <a href="contact.html"><img src="images/pothos.jpg" alt = "product image">

                            </a></div>

                            <div class = "product-btns">

                               

                                <button type = "button" class = "btn-buy"> buy now

                                  

                                                                                                           

                                                                                                           

                                </button>

                                                                                               

                            </div>

                        </div>

 

                        <div class = "product-info">

                            <div class = "product-info-top">

                                <h2 class = "sm-title">Pothos</h2>

                        

                            </div>

                            <a href = "#" class = "product-name">Golden Pothos</a>

                            <p class = "product-price">$ 20.00</p>

                            <p class = "product-price">$ 15.00</p>

                        </div>

 

                      

                    </div>

                    <!-- end of single product -->

 

 

This is my CSS for the button.

 

 

:root{

--carribean-green: #40c9a2;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Vidaloka', serif;
}

/* Utility stylings */
img{
width: 100%;
display: block;
}
.container{
width: 88vw;
margin: 0 auto;
}
.lg-title,
.md-title,
.sm-title{
font-family: 'Roboto', sans-serif;
padding: 0.6rem 0;
text-transform: capitalize;
}
.lg-title{
font-size: 2.5rem;
font-weight: 500;
text-align: center;
padding: 1.3rem 0;
opacity: 0.9;
}
.md-title{
font-size: 2rem;
font-family: 'Roboto', sans-serif;
}
.sm-title{
font-weight: 300;
font-size: 1rem;
text-transform: uppercase;
}
.text-light{
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
opacity: 0.5;
margin: 0.4rem 0;
}

/* product section */
.products{
background: var(--alice-blue);
padding: 3.2rem 0;
}
.products .text-light{
text-align: center;
width: 70%;
margin: 0.9rem auto;
}
.product{
margin: 2rem;
position: relative;
}
.product-content{
background: var(--gray);
padding: 3rem 0.5rem 2rem 0.5rem;
cursor: pointer;
}
.product-img{
background: var(--white-light);
box-shadow: 0 0 20px 10px var(--white-light);
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
transition: background 0.5s ease;
}
.product-btns{
display: flex;
justify-content: center;
margin-top: 1.4rem;
opacity: 0;
transition: opacity 0.6s ease;
}
.btn-cart, .btn-buy{
background: transparent;
padding: 0.8rem 0;
width: 125px;
font-family: inherit;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: all 0.6s ease;
}

.btn-buy{
background: white;
}
.btn-buy:hover{
background: var(--carribean-green);
color: #fff;
}
.product-info{
background: white;
padding: 2rem;
}
.product-info-top{
display: flex;
justify-content: space-between;
align-items: center;
}

.product-name{
color: black;
display: block;
text-decoration: none;
font-size: 1rem;
text-transform: uppercase;
font-weight: bold;
}
.product-price{
padding-top: 0.6rem;
padding-right: 0.6rem;
display: inline-block;
}
.product-price:first-of-type{
text-decoration: line-through;
color: var(--carribean-green);
}
.product-img img{
transition: transform 0.6s ease;
}
.product:hover .product-img img{
transform: scale(1.1);
}
.product:hover .product-img{
background: var(--carribean-green);
}
.product:hover .product-btns{
opacity: 1;
}
.off-info .sm-title{
background: var(--carribean-green);
color: white;
display: inline-block;
padding: 0.5rem;
position: absolute;
top: 0;
left: 0;
writing-mode: vertical-lr;
transform: rotate(180deg);
z-index: 1;
letter-spacing: 3px;
cursor: pointer;
}

 

This is my form.

 

<form action="https://ww9.aitsafe.com/cf/add.cfm" method="post">
<input name="userid" type="hidden" value="B3826459">
<input name="product" type="hidden" value="Pothos">
<input name="price" type="hidden" value="$15.00">
<input name="return" type="hidden" value="https://www.grc275.com">
<input type="submit" value="Buy Plant">
</form>

 

 

I also tried putting the form between my code like this but it does not look right....

 

<div class = "product-btns">

<button type = "button" class = "btn-buy">

<form action="https://ww9.aitsafe.com/cf/add.cfm" method="post">
<input name="userid" type="hidden" value="B3826459">
<input name="product" type="hidden" value="Pothos">
<input name="price" type="hidden" value="$15.00">
<input name="return" type="hidden" value="https://www.grc275.com">
<input type="submit" value="Buy Plant">
</form>


</button>

</div>

 

 

Views

86

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

LATEST

The <form> Submit button is all that's likely to work with your shopping cart.  So you should concentrate on styling that input element with CSS or graphic image.  Forget about the <button> element in this context.

 

Refer to Mal's Ecommerce Support for details:

https://www.mals-e.com/support_using_a_form.php

https://www.mals-e.com/support.php

 

 

CSS:

======

input[type=submit] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

 

Form Submit with image (not as user friendly as REAL text):

=============

<input type="image" src="img_submit.png" alt="Submit">

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines