Adding a Form to Our Website Using Twitter Bootstrap

This lesson is exclusive to members

Questions

Course info

13 lessons / 1 hours

Overview

Hi, In this course we are going to add a newsletter sign up form that will save our new subscribers to a database.

To do this we are going to be using a backend programming language called PHP and a MySQL database.Don’t worry if that doesn’t make any sense to you, we will be going over all of the basics and walking you through it step by step.

This course does however assume you have a basic understanding of html and css, and that you know how to push any updates up to a server and make them live.

If you don’t have that experience then I can recommend this course by Daniel Scott, it starts at the very beginning and will easy get you up to speed so you can start taking the next steps like working with PHP and databases.

So if you’re ready to get started with our PHP database project … then sign up to the course and lets get started :)
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

In this video, we're gonna head over  to the Bootstrap website. We are gonna copy and paste over one of their forms. Then we're gonna make some updates so it can be used  for our newsletter signup. Okay, now that we have our website up  and running, let's go ahead and add in a form. So the first thing that we need to do is  open this up in VS code. So let's grab our meat yogurt website  and drag it down to VS code.

And we're gonna wanna take a look at the index file. So this website is using Twitter bootstrap  for the CSS framework. So that's gonna make it nice  and easy for us to add a form to the bottom of our website  for the newsletter signup. So if we scroll down to just under the  cards section here. So you just wanna go to the end of the cards. Let's put in a little bit of space  and if we just grab one of these cards  and paste them in down there.

And let's get rid of this style. We're not gonna need that. We're also not gonna need an image card. Title will be, let's just go with  newsletter and let's get rid of that  P tag and anchor tag. Okay, so let's go across to the uh,  Twitter bootstrap website. I'll leave a link to this page in the description.

And if you have a look at the right hand navigation,  you wanna go down to inline forms  and let's just grab this guy here. Just copy all of that. HTML, go back to VS code  and paste it in under the um, H five tag. Just wanna put your form in under there. Let's save it, refresh, and let's have a look. There we go.

And we have a form, um, ready to update  and um, hook up to the newsletter. Sign up. So if we take a look at our form,  it doesn't quite make sense for our newsletter sign up. It's got a name, which we need. We don't need this username and we don't need this. Remember me.

What we need is name, email, submit. So if we go over to VS code  and what we're gonna do is just  leave this first block alone. That's our name. We need that one. After that we have label. And the next one down is to remember me chat box.

So if we delete those, then  what we're gonna do is grab this  top name block. We'll  Copy that and paste it in underneath. And just update name to email. Just update the placeholder to email  and let's update the text. Type also to email. If we save that, go back to our website  and give it a refresh.

Now we can see we have name, email, submit our form's. Looking pretty good now, so we're gonna leave things here  and in the next video we'll go ahead  and start adding some PHPI.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025