This is a continuation of my previous post.
This second project is a survey form. This is what I did:
CodePen Link
Feedback on the work done
Working this project was not very difficult. It touches almost every aspect of a form. This is quite useful is mastery.(Just what I needπ!)
Did you notice the roundness of the edges of the box and input fields?
However, I did take some time in aligning the form itself to the center. I had to try out several values (trial and error π
).
Also, choosing the right shade of the form to complement the background took some time too, but I most confess it was fun!π
Please,I'll like to know:
- Your impressions on my work done.
- What was your experience like creating an HTML and CSS(only) form?
- Any ideas on what I might improve?
Please stay with me as I continue this gradual journey to mastery!π€
π Babi
Top comments (30)
The form is really good looking, I just completed mine too on freecodecamp.org...so I'm just a learner myself. People have made valuable contributions here.
tag. You can sign up on formspree.io for an account to get feedback from respondents delivered to your inbox.However, I observed you didn't fill in the "action" attribute in your
Let's connect, I'll follow you.
Cheers to growth!
Hello Alakowe! I used this contribution your contribution in my Landing Page project. Please check it out and tell me what you think π
That's really amazing thing to look. A big reward for long hours spent putting it together.
Kudos!
Thank you π
Alakowe I just tried your suggestion of using formspree and it's amiazing! Thanks
That's good to know.
I also need your help on form layout, as a newbie that I am. How can I make the form section have its own background, separate from the general background for body/html?
Thank you.
Well you could create a div/section for the form and allocate the desired background image/color for that section in the css style sheet. Please check my code for clarity. I do hope it's helpful π
Hello Alakowe thanks for the input. I'll look into that.
Hope we get to share more in future π
Hey, how do we add pop up "fill this field"?
add "required" attribute to your form input
Hello.
By adding the 'required' attribute the the given HTML input tag
Check out the code segment from my work
dev-to-uploads.s3.amazonaws.com/up...
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
Hey Babi-B! It looks good! The only thing I'm noticing is the formcard looks a little off center on the screen, both in desktop view and mobile. It may be a margin or padding thing, but the form card is shifted more to the right of the screen. I like everything otherwise π π
Thank you @coreylianez .π
I noticed it too. Trying to work on it
@coreylianez thanks for the advice π. I updated my work please check it out and help me with some feedback
codepen.io/babi-b/full/MWbZJrK
Centralize the input fields. Other than that, I like the feel. All nice and green ππ
π thanks @Akumah. I'll look into that.
Beautiful UI.... You selected those colors with a mighty hand... ππ
Thank you Benndip. I put thought into that one π I'm glad you noticed
Nice one. The survey fork looks uniquely simplified. It seems your Submit button is missing.
Best,
Than you!
The missing Submit button might be a display error.
Looking great !!
Thanks!
Hi mate, good job but there is a little problem the H1 is not responsive but overall is goodππΎ
Thanks for this. I have reviewed my codes and added responsiveness. Check it out --> codepen.io/babi-b/full/MWbZJrK
I like the beauty of the survey form. That's cool.
Thanks a lot. Hope to see some of your work too!π
learn CSS Grid you will like it
Thanks for the info Sofiane
Your input size is very lengthy make a bit smaller use width attribute, looks like its a text area covering whole page.