Portfolio-survey form project

I am finding it challenging to complete this project due to not understanding one of the requirements. Please can someone assist me and tell me where the problem with my code is.

Please post your full code its difficult to find your problem

UFARAWAY|FORM TO BOOK A FREE CALL

Fill In The Form Below To Find Out How Grow Your Business For Free

Get A Free 30 Minute Call With me to find out how digital marketing can put you ahead of your competion.

Name:
    <label for="email" id="email-label"> Email:</label> 
     <input type="email" id="email" pattern="Sam@gmail.com" size="20" required placeholder="sam@gmail.com"> <br>

    <label for="number" id="number-label">Number:</label>      
     <input type="number" id="number"name="number" placeholder="031"  min="8" max="15" required> 
  </div>
</span>
  
   <div class="form-group">
<div id="dropdown"> 
    <label for="dropdown" id="marketing" >Chose the duration in which you have been marekting online:</label>  <!--select menu-->
     <select id="dropdown">
      <option value="0-3 Months">0-3 Months</option>
      <option value="6-12 Months">6-12 Months</option>
      <option value="1 Year or longer">1 Year or Longer</option>
     </select>
</div>

Which of the online marketing platforms you would like to learn more about?


Facebook
Google
Instagram
Linkedin
Website
Email-marketing
S.E.O
I have no desire to learn about generating more revenue for the business.
  </div>
</div>
<div class="form-group">
  <h3>Please select all possible reasons as to why you would consider online marketing:</h3>
  <br> <input type="checkbox" name="branding" id="reason-for-markerting" value="reason-for-marketing">
       <label for="branding" id=online-marketing>Online Branding</label>

       <input type="checkbox" name="product-information-and-changes" id="online-marketing" value="product-information-and-changes" >
       <label for="product-information-and-changes" id="online-marketing">Insights on the lastest product information and changes</label>

 <br>  <input type="checkbox" name="e-commerce" id="reason-for-marketing" value="e-commerce">
       <label for="e-commerce" id="online-marketing">Online-Shopping to increase demand</label>
       
       <input type="checkbox" name="Meeting-new-prospects" id="reason-for-marketing" value="meeting-new-prospects">
       <label for="meeting-new-prospects" id="online-marketing">Meeting new prospects</label>
          
 <br>  <input type="checkbox" name="increase-in-revenue" id="online-marketing" value="increase-in-revenue">
       <label for="increase-in-revenue" id=online-marketing>Increase in revenue</label>

       <input type="checkbox" name="improve-credibility" id="online-marketing" value="improve-credebility">
       <lable for="improve-credibility" id="online-marketing">Improving your companies credibility</lable>

  <br> <input type="checkbox" name="maintaining-a-consistent-relationship" id="online-marketing" value="maintaining-a-consistent-relationship">
       <label for="maintaining-a-consistent-relationship" id="online-marketing">Maintaining a consistent relationship</label>

       <input type="checkbox" name="24-hour" id="online-marketing" value="online-marketing">
       <label for="24-hour" id="online-marketing">24-Hour availibility</label>

<div class="form-group">
   <h3>Please enter any questions or queries below:</h3>
        <label for="textarea" id="textarea"></label>
        <textarea id="comments" name="comments or suggestions" rows="4" cols="50">
        </textarea>
</div>
<div class="form-group">
    <div class="button">
      <input type="submit" name="get-in-touch" id="submit" value="Get in touch"
    <label for="button" id="button"></label>
    </div>
</div> 
</div>
</div>
* { position: relative; text-align: center; }

body {
background-color: #000;

}

#form-text {
background-image:url(https://lh3.googleusercontent.com/zZs3aCbDd5WJQVDZbepR9QVZtDDuNO0n_VxWQU2_GtNbZrzDqw3vD8QGlDwOFlqxdtowLNyXa-LqDb-hZUCINObnesDVrPy6kAhLn4yqKTLffL-gPVKjClGBMufASJuAw14B84r-hw=w2400);
background-repeat: no-repeat;
background-size: 400px;
padding: 250px 200px 0px 200px;
margin: 1px ;
display:flex;
justify-content: center;
background-position: top;
font-size: 2.5vh;
justify-text: center;

}

#form-content{

justify-content: center;
text-align: center;
color: #ddd;
font-size: 2.4vh;

#surveyform {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
position: absolute;
border-radius: 10px; /this is how we create borders for forms
border: 10px solid #ddd;
margin: 10px 100px 10px 100px auto;
display: flex;
justify-content: center;
/
margin: auto;
width: 60%;
border: 5px solid #FFFF00;
padding: 10px */

/*padding: 25px 200px 200px 200px;*/
font-size: 2.3vh;

}

.form-group{ /form group class is linked to all the text in radio button, checkboxes and select areas/
color:#ddd;
text-align: center;
}

h1, h2, h2, p {
color:#ddd;
text-align:center;
font-size:100vh;
}

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Copy pasted what one of the fcc staff types :slight_smile:

you have 2 element s with id="dropdown"
You must have mistakenly written it.

<div id="dropdown">
<label>
<select id="dropdown">

id should be just unique (for symentical purposes)

1 Like

Thank you so much. I am really new to web development, it’s really hard. I have never coded before. but I a trying my best. thank you so much

Yes, the tests are probably getting confused with the div

it worked! thank you so much!!! :grinning:

So my code should appear like this next time???

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UFARAWAY|FORM TO BOOK A FREE CALL</title>
    <link rel="stylesheet" href="styles.Css">
</head>
<body>
<div id="form-content">
 <div id="form-text"> <!--This is the text area -->
  <span>
   <h1 id="title"> Fill In The Form Below To Find Out How Grow Your Business For Free</h1>
    <p id="description"> Get A Free 30 Minute Call With me to find out how digital marketing can put you ahead of your competion.</p>
 </div>

<form div id="survey-form">
  <fieldset> 
         <!--This is the beg of the survey form-->
      <div class="form-group">
        <label for="Name" id="name-label"> Name:</label>
         <input type="text" name="Name" id="name" placeholder="Sam" required> <br>

        <label for="email" id="email-label"> Email:</label> 
         <input type="email" id="email" pattern="Sam@gmail.com" size="20" required placeholder="sam@gmail.com"> <br>

        <label for="number" id="number-label">Number:</label>      
         <input type="number" id="number"name="number" placeholder="031"  min="8" max="15" required> 
      </div>
    </span>
      
       <div class="form-group">
    <div id="dropdown"> 
        <label for="dropdown" id="marketing" >Chose the duration in which you have been marekting online:</label>  <!--select menu-->
         <select id="dropdown">
          <option value="0-3 Months">0-3 Months</option>
          <option value="6-12 Months">6-12 Months</option>
          <option value="1 Year or longer">1 Year or Longer</option>
         </select>
    </div>
       
  <div class="form-group"> 
    <h3>Which of the online marketing platforms you would like to learn more about?</h3>
    <!--RADIO BUTTONS FOR DIFFERENT SOCIAL MEDIA PLATFORMS-->
      <br>
      <div>
        <input type="radio" name="online-marketing-platforms" id="Facebook" value="Facebook">
        <label for="Facebook" id="online-marketing-platforms">Facebook</label> 
      </div>
      <div>
        <input type="radio" name="online-marketing-platforms" id="Google" Value="Google" >
        <label for="Google" id="online-marketing-platforms">Google</label> 
      </div>
      <div>
        <input type="radio" name="online-marekting-platforms" id="Instagram" value="instgram">
        <label for="Instagram" id="online-marketing-forms">Instagram</label> 
      </div>
      <div>
        <input type="radio" name="online-marekting-platforms" id="Linkedin" value="Linkedin">
        <label for="linkedin" id="online-marketing-platforms">Linkedin</label> 
      </div>
      <div>
        <input type="radio" name="online-marketing-platforms" id="Website" value="Website">
        <label for="Website" id="online-marketing-platforms">Website</label> 
      </div>
      <div>
        <input type="radio" name="online-marketing-platforms" id="Email-marketing" value="Email-marketing">
        <label for="Email-marketing" id="online-marekting-platforms">Email-marketing</label> 
      </div>
      <div>
        <input type="radio" name="online-marekting-platforms" id=" S.E.O" value="S.E.O"> 
        <lable for="S.E.O" id="online-marketing-platforms">S.E.O</lable>
      <div>
        <input type="radio" name="online-marketing-platforms" id="none" value="none">
        <label for="None" id="online-marketing-platform">I have no desire to learn about generating more revenue for the business.</label>
        
      </div>
    </div>
</div>

    <div class="form-group">
      <h3>Please select all possible reasons as to why you would consider online marketing:</h3>
<!--CHECKBOXES FOR ONLINE MARKETING REASONS-->
      <br> <input type="checkbox" name="branding" id="reason-for-markerting" value="reason-for-marketing">
           <label for="branding" id=online-marketing>Online Branding</label>

           <input type="checkbox" name="product-information-and-changes" id="online-marketing" value="product-information-and-changes" >
           <label for="product-information-and-changes" id="online-marketing">Insights on the lastest product information and changes</label>

     <br>  <input type="checkbox" name="e-commerce" id="reason-for-marketing" value="e-commerce">
           <label for="e-commerce" id="online-marketing">Online-Shopping to increase demand</label>
           
           <input type="checkbox" name="Meeting-new-prospects" id="reason-for-marketing" value="meeting-new-prospects">
           <label for="meeting-new-prospects" id="online-marketing">Meeting new prospects</label>
              
     <br>  <input type="checkbox" name="increase-in-revenue" id="online-marketing" value="increase-in-revenue">
           <label for="increase-in-revenue" id=online-marketing>Increase in revenue</label>

           <input type="checkbox" name="improve-credibility" id="online-marketing" value="improve-credebility">
           <lable for="improve-credibility" id="online-marketing">Improving your companies credibility</lable>

      <br> <input type="checkbox" name="maintaining-a-consistent-relationship" id="online-marketing" value="maintaining-a-consistent-relationship">
           <label for="maintaining-a-consistent-relationship" id="online-marketing">Maintaining a consistent relationship</label>

           <input type="checkbox" name="24-hour" id="online-marketing" value="online-marketing">
           <label for="24-hour" id="online-marketing">24-Hour availibility</label>

    <div class="form-group">
       <h3>Please enter any questions or queries below:</h3>
            <label for="textarea" id="textarea"></label>
            <textarea id="comments" name="comments or suggestions" rows="4" cols="50">
            </textarea>
    </div>
    <div class="form-group">
        <div class="button">
          <input type="submit" name="get-in-touch" id="submit" value="Get in touch"
        <label for="button" id="button"></label>
        </div>
    </div> 
    </div>
    </div>
  </fieldset>
</form>
 </div>   
</body>
<style>
  * {
    position: relative;
    text-align: center;
}

body {
    background-color: #000; 
    
    
    
}

#form-text {
    background-image:url(https://lh3.googleusercontent.com/zZs3aCbDd5WJQVDZbepR9QVZtDDuNO0n_VxWQU2_GtNbZrzDqw3vD8QGlDwOFlqxdtowLNyXa-LqDb-hZUCINObnesDVrPy6kAhLn4yqKTLffL-gPVKjClGBMufASJuAw14B84r-hw=w2400); 
    background-repeat: no-repeat;
    background-size: 400px;
    padding: 250px 200px 0px 200px;
    margin: 1px ;
    display:flex; 
    justify-content: center;
    background-position: top; 
    font-size: 2.5vh;
    justify-text: center;
    
}

#form-content{
    
    justify-content: center;
    text-align: center;
    color: #ddd;
    font-size: 2.4vh;
    
  

#surveyform { 
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100vh; 
    position: absolute;
    border-radius: 10px; /*this is how we create borders for forms
    border: 10px solid #ddd;
    margin: 10px 100px 10px 100px auto; 
    display: flex;
    justify-content: center;
   /* margin: auto;
    width: 60%;
    border: 5px solid #FFFF00;
    padding: 10px */

    /*padding: 25px 200px 200px 200px;*/
    font-size: 2.3vh;
    
    
}

.form-group{ /*form group class is linked to all the text in radio button, checkboxes and select areas*/
    color:#ddd;
    text-align: center;
}
    
h1, h2, h2, p {
    color:#ddd;
    text-align:center;
    font-size:100vh;
}

</style>
</html>

hello there welcome to fcc forum :slight_smile:

if @b-bhupendra 's post has solved this issue then choose it as a ‘solution’, thanks and happy coding :slight_smile:

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