Recent Blog Posts - Dvorak Designs Blog
Beau to Beau eBook Covers, Third Morey Logo Concepts
The portfolio was updated with a couple projects today. This is just a short post with a little bit about each project.
First off is an eBook cover design for Beau to Beau Publishing. This was my first eBook cover design and was pretty fun to mess around with. They’ll be using this cover through out an up coming series, so be sure to watch for it on their website: http://www.beautobeau.com/. You can take a look at the design in our portfolio.
Second are some logo concepts for a project that never made it to completion, but I thought I’d post them anyway as some insight into how I come to a final design. In this case the client wanted a simple logo that would work at various sizes, but they weren’t sure what colors they wanted. So to start off I came up with a couple similar designs, and then presented them both in different colors based on what I thought would work best for the client. You can take a look at the concepts in our portfolio as well.
Be sure to subscribe to our RSS Feed so you can keep up with all of our projects, we have a couple big ones on the way!
HTML Web Forms – Part 4: Styling Forms With CSS
The final part of our HTML Web Forms guide will show you how to style your form using CSS. More specifically, I’ll be showing you how to give your form a basic style by using the tags that are already included in the form, as well as by adding some stuff right into the HTML file. If you search on Google for something like “form styling” you’ll probably find all kinds of things, everything from simple to advanced. I’m going to focus on the simple side in this post, and I won’t be adding in anything too fancy, although sometime in the future I may make a post about more advanced form styling.
Just like with the other parts of this guide, if you haven’t already, I recommend reading through Part 1, Part 2 and Part 3. Everything in this part will be referencing things that were completed in previous parts, in particular we’ll be working with the different HTML tags we set up in Part 1.
HTML Web Forms – Part 3: Validating Form Fields
Part 3 of our HTML Web Forms guide will show you how to add Javascript and PHP verification to your form. More specifically, we’ll show you how to check if certain form fields are empty, as well as check for a valid email address. The plus side to using Javascript is you can add in some pretty neat usability features, such as highlighting the form field where the error occurred. The down side to using Javascript is if someone has it turned off in their browser, it obviously won’t work. That’s why we’ll add in a simple verification to our PHP file as kind of a fail safe. The PHP verification isn’t as fancy as the Javascript, but it will still get the job done on a basic level. Another benefit to adding verification to your forms is to help foil spam robots. It isn’t going to stop every robot, and it obviously won’t stop any humans, but every little bit helps!
If you haven’t already, I recommend reading through Part 1 and Part 2, since you’ll be using both files that we created in those parts, so this might make a little more sense if you’re using the same files. If you’ve already done those parts, you should have a file named tutorial_form.html and tutorial_form_submit.php. We’ll be working in both of those files for this part, so be sure they’re both handy!
HTML Web Forms – Part 2: PHP File for Sending Form Data
Part 2 of our HTML Web Forms guide will be focused on creating the PHP file that will send the data entered in on our form to an email address. When it comes to processing forms, there are many different things you can do: you can send the information to a database, post it onto a page, and send it to an email address. The reason I chose to have my form handled by a PHP file that sends the data in an email, is because it was the easiest method I could find. If you search on Google you’ll find all kinds of ways to process a form, however just like in the last part of this guide, the biggest problem I had was integrating everything together with what I already had. This was largely due to the fact that I have minimal PHP knowledge, so not a lot of it made sense to me. Needless to say, because of that most of the methods I use in this part of the guide are pretty simple. So even if you don’t know anything about PHP either you should have no problems following this part of the guide. In fact while I was writing this part of the guide I came across a new way of handling check boxes, which actually made it a lot easier…and that’s good news for you!
If you haven’t already, I recommend reading through Part 1 of this guide, since you’ll need to edit the file you made in Part 1 at the end of this post. If you’ve already done Part 1, you should have a file named tutorial_form.html. Keep this file handy, since you’ll be editing a short line of code in it in step 10.
HTML Web Forms – Part 1: Creating the Form
When I first started building this website, one of the things I struggled with was making forms. The list of things I had problems with was endless: verification of data, styling the form, sending the correct data, and making all of those things work well together. If you search for any of those things on Google, chances are you’ll find a guide, tutorial, or pre-created code that will perform any of those functions, there’s even form generators out there that will create all the files for you. The problem I had with all of those is that you were still left on your own when it came to integrating everything together, and into your site.
After struggling with this myself for quite awhile, I decided I wanted one of my first blog posts to be about creating web forms. What I’m going to do with this guide is walk you through the following: creating a form on an HTML page, styling the form using CSS, creating the PHP file to process the form data and send it to you in an email, and finally adding both Javascript and PHP verification to form fields. I’ll also include a couple pointers on how to prevent robots from using your forms to send you spam. The information I’m going to give you in these posts is by no means comprehensive or the only way to do this, it’s just the best way I found to do it while building this site. I also still haven’t figured out how to do everything perfectly, and am constantly searching out new ways to do things. As I find new and relevant information about this topic you can be sure that I’ll create a new post on how to implement it into what I’m going to show you how to do over the next few days with this four part guide.
This is Part 1 of the guide, and will show you how to set up the form on an HTML page. I’ll be walking you through each different type of input, as well as what you can add into all the tags to make different things happens. If you have any questions, feel free to post a comment and I’ll answer it, and even amend the guide as we go if I deem it necessary. Please note that the next parts of this guide will be released over the next few days, it’s a lot of typing so I wanted to give a head start to everyone rather than wait until everything was done!
RSS Options
