Hi, can someone will help me. My code does not want to pass the form id and action attribute section, I’ve tried multiple copy and paste methods online. What am I missing?
running tests You should have a form element with an id of form . Your #form should have an action attribute.
Welcome to the community 
You can add code to a post using three back tic before and after a code block.
If you cant find a back tic on your keyboard you can use ALT + 096 on the keypad to display one.
Add three back tics before and after a code block to display your code snippet.
I wouldn’t copy and past code from the internet until you fully understand it.
Copy and pasting when learning tends to rob you of an opportunity and can make you depend on code written by others to solve problems.
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="enter your email"type="email" name="email" required></input>
<input id="submit" type="submit"></input?
</form>
input is a self-closing tag, no need for this
Thank you, I removed the closing tags but it still won’t pass. This is the message from the console.
For more accurate help please share your full HTML markup
I copied this one from my vs code editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="page.css">
<script src="https://kit.fontawesome.com/9777693bd8.js" crossorigin="anonymous"></script>
<title>Product Landing Page</title>
</head>
<header id="header">
<img src="https://static.vecteezy.com/system/resources/previews/013/250/510/original/visual-illustration-of-the-candle-for-logo-art-illustration-website-pictogram-or-graphic-design-element-format-png.png" alt="logo" id="header-img" class="img">
<h1>Candles ltd.</h1>
<nav id="nav-bar" class="nav">
<a href="#prices" id="prices" class="nav1">Prices</a>
<a href="#form" id="form" class="nav2">Sign up</a>
<a href="#footer" id="footer" class="nav3">Contact</a>
</nav>
</header>
<body id="home">
<div class="youtube-link">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/GwNCyHqmZGQ?si=WlLX7PgdbnwFGJh9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div id="shipping" class="shipping">
<div class="icons">
<i class="fa-solid fa-basket-shopping"></i><i class="fa-regular fa-credit-card"></i><i class="fa-solid fa-truck-fast"></i>
</div>
<div class="text">
<h4>Candle scents for every season are available.
<p class="info">Shop a wide variety of our candles for each season. Available flavours for each season will be announced first to our subscribers via our newsletter.</p></h4>
<h4>Easy and safe payment
<p class="info">There are multiple ways to pay. Payment options are provided at checkout.</p></h4>
<h4>Fast and rrelaible shipping
<p class="info">We provide fast, safe and reliable shippig from our store to your doorstep.</p></h4>
</div>
</div>
<div id="prices" class="prices">
<div class="options">
<p class="season">Summer</p>
<p>Gardinea
</p>
<p>Vanilla</p>
<p class="r">R300</p>
</div>
<div class="options"><p class="season">Autum</p>
<p>Gardinea
</p>
<p>Vanilla</p>
<p class="r">R300</p>
</div>
<div class="options"><p class="season">Winter</p>
<p>Gardinea
</p>
<p>Vanilla</p>
<p class="r">R300</p>
</div>
</div>
<p class="sign">Sign Up today to keep up to date with the latest updates!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit" class="form">
<input id="email" placeholder="enter your email address" type="email" name="email" required>
<input id="submit" type="submit">
</form>
<footer class="footer" id="foooter">
<p class="copyright">Copyright 2024,<a>Candles LTD</a></p>
</footer>
</div>
</body>
</html>```
The css is below:
header, img, h1, .navbar {
display: flex;
background-color: rgb(253, 245, 234);
}
.img{
width: 100px;
}
h1{
color: red;
margin-top: 40px;
display: flex;
justify-content:left;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.357);
}
.nav1{
display:inline-block;
text-align: right;
margin-left: 700px;
}
a{
background: white;
margin: 10px;
text-align: center;
margin-top: 40px;
padding: 10px;
text-decoration: none;
color: black;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.357);
}
#nav-bar .nav1 a{
position: fixed;
top: 0;
}
.youtube-link{
padding-top: 50px;
padding-bottom: 20px;
text-align: center;
border-bottom: 2px solid beige;
}
.options{
display: flex;
flex-direction: column;
text-align: center;
width: 700px;
border: 3px groove rgb(234, 232, 232);
text-align: center;
}
.prices{
display:flex;
margin-left: 300px;
margin-top: 20px;
color: red;
width: 800px;
}
.r{
font-weight: bold;
}
.season{
border-bottom: 1px solid grey;
padding: 10px;
font-weight: bold;
}
.shipping{
display: flex;
flex-direction: row;
}
.icons{
color: lightpink;
display:flex;
flex-direction: column;
width: 150px;
padding-right:20px;
align-items:flex-end;
justify-content: space-around;
font-size: 26px;
}
.text{
display: flex;
flex-direction: column;
flex: 1;
line-height: 24px;
}
.info{
margin: 0;
padding: 0;
font-weight:100
}
.sign{
text-align: center;
color: steelblue;
font-size: 20px;
}
.form{
text-align: center;
color: steelblue;
padding-bottom: 20px;
}
.submit{
background-color: steelblue;
color: white;
border-radius: 20px;
}
.footer{
text-align: center;
border-top: 1px solid steelblue;
}
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}
Your href value is not valid. You need styles.css.
You have duplicated id form
yes, I change it when I paste it in the site. This one is for my personal records.
oh I was trying to sort of the hyperlink for the nav-links and I could only get it to respond when I used the same IDs. Let me change the hyperlink and see if it will pass.
Thank you so much, it went through. Now I just need to work on my nav-links.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.