DEV Community

loading...
Cover image for freeCodeCamp Project Done #2: A Survey Form

freeCodeCamp Project Done #2: A Survey Form

Babi-B
Aspiring Fullstack Developer | Tech Enthusiast
・1 min read

This is a continuation of my previous post.

This second project is a survey form. This is what I did:
Alt Text
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

Discussion (30)

Collapse
joblessnigga profile image
Alakowe

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.
However, I observed you didn't fill in the "action" attribute in your

tag. You can sign up on formspree.io for an account to get feedback from respondents delivered to your inbox.
Let's connect, I'll follow you.

Cheers to growth!

Collapse
babib profile image
Babi-B Author

Hello Alakowe! I used this contribution your contribution in my Landing Page project. Please check it out and tell me what you think 😊

Collapse
joblessnigga profile image
Alakowe

That's really amazing thing to look. A big reward for long hours spent putting it together.
Kudos!

Thread Thread
babib profile image
Babi-B Author

Thank you 😊

Collapse
babib profile image
Babi-B Author

Alakowe I just tried your suggestion of using formspree and it's amiazing! Thanks

Collapse
joblessnigga profile image
Alakowe

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.

Thread Thread
babib profile image
Babi-B Author

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 😊

Collapse
babib profile image
Babi-B Author

Hello Alakowe thanks for the input. I'll look into that.

Hope we get to share more in future πŸ™‚

Collapse
jithi121 profile image
jithi121

Hey, how do we add pop up "fill this field"?

Collapse
chaveamin profile image
chaveamin

add "required" attribute to your form input


<input type="name" id="name" required> 

Enter fullscreen mode Exit fullscreen mode
Collapse
babib profile image
Babi-B Author

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...

Collapse
babib profile image
Babi-B Author

The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.

Collapse
coreylianez profile image
CoreyLianez

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 πŸ™‚ 🌎

Collapse
babib profile image
Babi-B Author

Thank you @coreylianez .😊
I noticed it too. Trying to work on it

Collapse
babib profile image
Babi-B Author

@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

Collapse
ndeh007 profile image
Akumah Ndeh-Ngwa

Centralize the input fields. Other than that, I like the feel. All nice and green πŸ’šπŸ

Collapse
babib profile image
Babi-B Author

πŸ˜‚ thanks @Akumah. I'll look into that.

Collapse
benndip profile image
Benndip

Beautiful UI.... You selected those colors with a mighty hand... 😁😁

Collapse
babib profile image
Babi-B Author

Thank you Benndip. I put thought into that one πŸ˜‚ I'm glad you noticed

Collapse
greatyom profile image
GREATYOM #ItIsPOSSIBLE

Nice one. The survey fork looks uniquely simplified. It seems your Submit button is missing.

Best,

Collapse
babib profile image
Babi-B Author

Than you!
The missing Submit button might be a display error.

Collapse
obiemmanuel2018 profile image
obiemmanuel2018

Looking great !!

Collapse
babib profile image
Collapse
edwinfrontend profile image
edwin-front-end

Hi mate, good job but there is a little problem the H1 is not responsive but overall is goodπŸ‘πŸΎ

Collapse
babib profile image
Babi-B Author

Thanks for this. I have reviewed my codes and added responsiveness. Check it out --> codepen.io/babi-b/full/MWbZJrK

Collapse
beckyngwe profile image
Ngwe Becky

I like the beauty of the survey form. That's cool.

Collapse
babib profile image
Babi-B Author

Thanks a lot. Hope to see some of your work too!😊

Collapse
sofianemias profile image
Sofiane

learn CSS Grid you will like it

Collapse
babib profile image
Babi-B Author

Thanks for the info Sofiane

Collapse
sumitdwievdi profile image
SumitDwievdi

Your input size is very lengthy make a bit smaller use width attribute, looks like its a text area covering whole page.

Forem Open with the Forem app