Barcelona | Oct-2025 | Ifeoma Osegbo | Sprint 2 | Form Controls #3
Conversation
Added logo image and improved form styling for better visual presentation.
…pdown in index.html
…ayout, and ensure required fields are properly set
…better user guidance
…confirmation form
… confirmation form
…djust button layout
…d ensure proper validation for input fields
✅ Deploy Preview for ify-webform ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Form-Controls/index.html
Outdated
| <!--Decide on three available t-shirt colour options and | ||
| ensure the customer can only select from those choices.--> | ||
| <div> | ||
| <label for="color" style="white-space: nowrap;">Colors Available*</label><br> |
There was a problem hiding this comment.
Invalid id reference
for must refer to an element's id, and there is no element with id equal to color.
There was a problem hiding this comment.
Changes applied. Please review. Thank you.
Form-Controls/index.html
Outdated
| <input type="text" id="surname" name="surname" | ||
| placeholder="Your surname here" | ||
| required | ||
| pattern="[A-Za-zÀ-ÿ\s'-]{2,}" |
There was a problem hiding this comment.
There was a problem hiding this comment.
(also, I'm pretty sure my name would not work with this pattern 🥲)
There was a problem hiding this comment.
Updated the pattern, and now your name will be accepted!
Form-Controls/index.html
Outdated
| pattern="[A-Za-zÀ-ÿ\s'-]{2,}" | ||
| title="Surname must contain at least 2 letters."><br><br> |
There was a problem hiding this comment.
There was a problem hiding this comment.
I have updated the validation to be consistent with the description :)
There was a problem hiding this comment.
I have updated the validation pattern to include special characters and also be consistent with the description.
| <style> | ||
| body { | ||
| font-family: Georgia, 'Times New Roman', Times, serif; | ||
| margin: 20px; | ||
| background-color: #f8e583; | ||
| } | ||
| header { | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| } | ||
| label { | ||
| display: inline-block; | ||
| width: 120px; | ||
| margin-bottom: 10px; | ||
| margin-top: 10px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| input[type="text"], | ||
| input[type="email"], | ||
| select { | ||
| width: 200px; | ||
| padding: 5px; | ||
| margin-bottom: 10px; | ||
| } | ||
| ::placeholder { | ||
| font-style: italic; | ||
| color: #a9a9a9; | ||
| } | ||
| button { | ||
| width: 50px; | ||
| padding: 5px 10px 10px 5px; | ||
| margin-right: 20px; | ||
| cursor: pointer; | ||
| background-color: #5e2102; | ||
| color: #ffe5d9; | ||
| border: #000; | ||
| border-radius: 5px; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
There was a problem hiding this comment.
Very true, but the instructions given were to use only HTML to create the Form.
| <title>My form exercise</title> | ||
| <meta name="description" content="" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <style> |
Ify-O
changed the title
|
Hello @Jezorko, hope you're doing well? Thank you for taking the time to go through the PR. Just wanted to check if everything was okay to merge. |
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
Refactored the order form for improved accessibility, structure, and visual consistency. Updated heading hierarchy, enhanced styling, improved form validation patterns, aligned layout elements, and cleaned up code formatting for better readability and user experience.
Questions
Ask any questions you have for your reviewer.