DEV Community

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

freeCodeCamp Project Done #2: A Survey Form

ππšπ›π’ ✨ on March 11, 2021

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 Wo...
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
ππšπ›π’ ✨ β€’

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
ππšπ›π’ ✨ β€’

Thank you 😊

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

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

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

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

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

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
ππšπ›π’ ✨ β€’

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

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

@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
Β 
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
ππšπ›π’ ✨ β€’

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
ππšπ›π’ ✨ β€’

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

Collapse
Β 
benndip profile image
Benndip β€’

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

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

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

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
ππšπ›π’ ✨ β€’

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

Collapse
Β 
obiemmanuel2018 profile image
obiemmanuel2018 β€’

Looking great !!

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

Thanks!

Collapse
Β 
sofiane_mkd profile image
Sofiane β€’

learn CSS Grid you will like it

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

Thanks for the info Sofiane

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
ππšπ›π’ ✨ β€’

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

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
ππšπ›π’ ✨ β€’

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
ππšπ›π’ ✨ β€’

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

Collapse
Β 
sumitdwivedi24x profile image
Sumit Dwivedi β€’

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