Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gavin Mace
Gavin Mace
30,747 Points

Help me find a Foundation 6 - Contact Form in Reveal Modal!

Hey guys!

I can remember a few months ago doing a tutorial and making a really nice Contact Form in a Reveal Modal. The times now come where I need to create one in a project, but I can't find the tutorial anywhere!

I'm really hoping it was Foundation 6 and not Bootstrap.

Can anyone link me to any tutorials you know on Treehouse, or the Treehouse Blog?

Thanks a million!

@RawGavin

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Here is the link to the bootstrap modal lesson. You can at least take a look and see if it looks familiar. I don't see any courses on foundation 6 though it isn't something I know anything about so may be apart of something else.

https://teamtreehouse.com/library/bootstrap-4-basics/using-bootstrap-components/displaying-a-modal-window

Gavin Mace
Gavin Mace
30,747 Points
Gavin Mace
Gavin Mace
30,747 Points

Thanks Erik!

That's close - the one that I'm remembering had a full form built in it (well the HTML/CSS). Included the text boxes, multiple select, drop-downs, submit button, reset form button etc...

I easily found the code for Foundation 6 reveal modal on the foundation website and it worked straight away. I should be able to figure out how to code the form myself fairly easily :)

    <span class="hero-button"><a data-open="exampleModal1" class="button success">Get In Touch</a></span>
    <!-- REVEAL MODAL -->

            <div class="reveal" id="exampleModal1" data-reveal>
              <h1>Awesome. I Have It.</h1>
              <p class="lead">Your couch. It is mine.</p>
              <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
              <button class="close-button" data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>