Skip to content
Submitted 3 months ago

Responsive Contact Us Form using Bootstrap

Karim Chehab•150
@KarimChehab2003
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Contact form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm happy that I learned how to use bootstrap for form validation as well as using toasts while doing this project. It will be a beneficial reference for future contact form designs where I can try implementing it with React.

What challenges did you encounter, and how did you overcome them?

One of the challenges in this project was the form validation invalid feedback which was a text that appears in red when the input isn't what the form expects. I managed to overcome it by reading the Bootstrap's documentation on their form validation feature

What specific areas of your project would you like help with?

I had a little issue where I couldn't place the form in the center of the page because whenever I do so and open up the web console or change the window's width/height, some of the form would be cut off. In the end, I settled with giving it a top & bottom margin to give it some space around the edges.

Community feedback

  • Sara Dunlop•430
    @RiscloverPosted 3 months ago

    Hi! To address your issue with centering the form, here's what you need.

    body {
    min-height: 100vh;
    height: 100%;
}

    Without this, your body was only as tall as the form, but with this, it now fills the entire browser. Then, you'd just use flex to center it vertically and horizontally, like so:

    body {
    min-height: 100vh;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    I would personally recommend putting the display properties in a separate div that encompasses your app (basically adding a div between <body> and your first element as the app's container, setting its height and width to 100%, and including the display properties above there instead of in the css for the body), but yeah. Doing that fixes it!

    Marked as helpful
    0
    Karim Chehab•150
    @KarimChehab2003Posted 3 months ago

    @Risclover You're a lifesaver! Thank you for taking the time to see my issue and help me overcome it :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord