<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
body {
Background-image: url(https://images.unsplash.com/photo-1508369311886-278fdb148796?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1373&q=80);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Header {
text-align: center;
color: purple;
padding: 40px;
Border-radius: 8px;
}
Main{
text-align: center;
margin: 15px;
padding: 30px;
background: purple;
opacity: 0.5;
Color: white;
Max-Width: 180em;
Border-radius: 8px;
}
form{
font-size: 23px;
Text-align: Left;
}
</style>
<body>
<header>
<h1 id="title"> Elle Est Photography Survey</h1>
<p id="description"> Thank you for taking the time to help us improve our Photography Services</p>
</header>
<main>
<form id="survey-form">
<form action="ryan@elleestphotography.com">
<label for="name" id="name-label">
Name: </label>
<input type="text" id="name" name="name" placeholder="Name" class="font" required >
<div>
<label for="email" id="email-label">
Email: </label>
<input type="email" Id="email" placeholder="Email" Required>
</div>
<div>
<label for="number-label" id="number-label">
Age: </label>
<input type="number" id="number" Placeholder="age" min="10" Max="99" required>
</div>
<br>
<div>
<label for="shoots">Type of Session</label>
<select name="Sessions" Id="dropdown">
<option Value="Wedding">Wedding</option>
<option Value="headshot">Headshot</option>
<option Value="boudoir">Boudoir</option>
<option Value="Family portraits">Family Portraits</option>
<option Value="headshot">Dance/Performance Art</option>
</Select>
</div>
</label>
<div>
Session Location:
</div>
<label for="location">
<input id="location" value="location" type="radio" name="location-studio">Location</label>
<label for="studio">
<input id="studio" value="studio" type="radio" name="location-studio">Studio</label>
<br>
<div>
How did you hear about me?
</div>
<div>
<label for="friend"><input id="friend" type="checkbox" Name="referral" value="friend" checked>Referred by a friend </label>
<label for="google"><input id="google" type="checkbox" name="referral" value="google">Google Search
<label for="social"><input id="social" type="checkbox" name="referral" Value="social">Social Media</label>
<label for="other"><input id="other" type= "checkbox" Name="referral" value="other"> Other</label>
<input type = "text" id="other" Name="referral" placeholder = "please specify">
</div>
<br>
<div>
How likely are you to recommend me to a friend?
</div>
<div>
<label for="recommend"><input id="recommend" type ="radio" name ="recommend" checked>Highly likely</label>
<label for="recommend"><input id="recommend" type="radio" name="recommend" >Likely </label>
<label for="recommend"><input id="recommend" type="radio" name="recommend" >Not Likely </label>
</div>
<br>
<div>
Leave us a comment or suggestion:
<div class= "input">
<textarea id "comment"Name="comments" placeholder="please leave us a comment here"></textarea>
</div>
<br>
<button type="submit"
id="submit">Submit</button
</form>
</main>
</body>
Do you have a link to a pen or something? It makes it easier to review.
does that work? Its all new to me.
Few quick things I noticed. See my comments in the code.
<!doctype html>
<html>
<head>
<title>Elle Est Photography Survey</title>
<style>
body {
Background-image: url(https://images.unsplash.com/photo-1508369311886-278fdb148796?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1373&q=80);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
/*this should not be capitalized. needs to match tag name exactly = header*/
Header {
Border-radius: 8px;
color: purple;
padding: 40px;
text-align: center;
}
/*same thing here*/
Main {
Border-radius: 8px;
Color: white;
Max-Width: 180em;
background: purple;
margin: 15px;
opacity: 0.5;
padding: 30px;
text-align: center;
}
form {
Text-align: Left;
font-size: 23px;
}
</style>
</head>
<body>
<header>
<h1 id="title"> Elle Est Photography Survey</h1>
<p id="description"> Thank you for taking the time to help us improve our Photography Services</p>
</header>
<main>
<form id="survey-form">
<form action="ryan@elleestphotography.com">
<label for="name" id="name-label">
Name:
</label>
<input class="font" id="name" name="name" placeholder="Name" required type="text">
<div>
<label for="email" id="email-label">
Email:
</label>
<!--ID attribute should not have a capital I, should be id -->
<input Id="email" Required placeholder="Email" type="email">
</div>
<div>
<!--The label for attribute does not match the ID of the associated select - Should be number-->
<label for="number-label" id="number-label">
Age:
</label>
<input Max="99" Placeholder="age" id="number" min="10" required type="number">
</div>
<br>
<div>
<!--Same thing here for attribute does not match id of target element.-->
<label for="shoots">Type of Session</label>
<select Id="dropdown" name="Sessions">
<option Value="Wedding">Wedding</option>
<option Value="headshot">Headshot</option>
<option Value="boudoir">Boudoir</option>
<option Value="Family portraits">Family Portraits</option>
<option Value="headshot">Dance/Performance Art</option>
</Select>
</div>
</label> <!--This does not have a matching opening tag-->
<div>
Session Location:
</div>
<!--When the element such as the input below is wrapped inside the label tag, you don't actually need the for attribute, but don't believe it hurts anything.-->
<label for="location">
<input id="location" name="location-studio" type="radio" value="location">
Location
</label>
<label for="studio">
<input id="studio" name="location-studio" type="radio" value="studio">
Studio
</label>
<br>
<div>
How did you hear about me?
</div>
<div>
<label for="friend">
<input Name="referral" checked id="friend" type="checkbox" value="friend">
Referred by a friend
</label>
<label for="google"><!--This label is missing a matching closing tag-->
<input id="google" name="referral" type="checkbox" value="google">
Google Search
<label for="social">
<input Value="social" id="social" name="referral" type="checkbox">
Social Media
</label>
<!--id attributes have to be unique per page the following input tags both have the id of other.-->
<label for="other">
<input Name="referral" id="other" type="checkbox" value="other">
Other
</label>
<input Name="referral" id="other" placeholder="please specify" type="text">
</div>
<br>
<div>
How likely are you to recommend me to a friend?
</div>
<!--same id issue here multiple elements with the id recommend. Names can repeat as that is a special form syntax. -->
<div>
<label for="recommend">
<input checked id="recommend" name="recommend" type="radio">
Highly likely
</label>
<label for="recommend">
<input id="recommend" name="recommend" type="radio">
Likely
</label>
<label for="recommend">
<input id="recommend" name="recommend" type="radio">
Not Likely
</label>
</div>
<br>
<div>
Leave us a comment or suggestion:
<div class="input">
<textarea id <!--id has no = or value-->
"comment"Name="comments" placeholder="please leave us a comment here"></textarea>
</div>
<br>
<button id="submit" type="submit">Submit</button <!--closing button tag is missin the trailing > -->
</form>
</main>
</body>
</html>
1 Like
No, I guess not. I would just want some place to display a working version. I don’t know how they are doing things.
All in all it looks good. If I put on my “critical guy” hat…
You need to work on your formatting. Your indenting is all over the place. Learn good habits now. Properly formatted code is a lot easier for someone who doesn’t know the code to read. Always assume that your code will be read by someone who doesn’t know it. And trust me, in 6 months, if you look at any old code, you won’t recognize it.
<div>
<label for="recommend"><input id="recommend" type="radio" name="recommend" checked>Highly likely</label>
<label for="recommend"><input id="recommend" type="radio" name="recommend">Likely </label>
<label for="recommend"><input id="recommend" type="radio" name="recommend">Not Likely </label>
</div>
Remember that id’s have to be unique - only one per app. And in this case shouldn’t they match what you data is?
<label for="social"><input id="social" type="checkbox" name="referral" Value="social">Social Media</label>
Isn’t “value” supposed to be lowercase? And you have a “Name” in here too. These things matter. In your CSS “header” and “color” are mistakenly capitalized causing it to have no effect.
As far as visually, it looks pretty good. I find the color a little much for my taste, but OK. I find it a little hard to read the text in the inputs - I might bump up the size.
I might have made more distinction of hierarchy - labels bigger, relative to things like “location”.
The frist three imputs I would have tried to line up better - a column of labels right justified and a column of inputs left justified.
But it looks good. You’re on your way. Have fun on the next project.
1 Like
And I did this by copying what was in the description, not grabbing what was on codepen, so they could be different.
Your form looks good @thegirlyoucallryan. Some things to revisit;
- Learn to use external styling only.
- Right now you have a mix of mainly internal styling with some inline styling.
- Your form needs to be responsive. On smaller screens the input area fall out of the forms container.
- Change the cursor to a pointer when hovering over the submit button
1 Like