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
𝐁𝐚𝐛𝐢 ✨

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
𝐁𝐚𝐛𝐢 ✨

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
𝐁𝐚𝐛𝐢 ✨

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
𝐁𝐚𝐛𝐢 ✨

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
 
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
 
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
 
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
 
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
 
obiemmanuel2018 profile image
obiemmanuel2018

Looking great !!

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Thanks!

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
 
sofianemias profile image
Sofiane

learn CSS Grid you will like it

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Thanks for the info Sofiane

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.