A lot of HTML and CSS is self explanatory. HTML entities like <p>, <h1-6>, and <br /> are easy to wrap your head around. In CSS, the rules are similarly easy to decipher what they do. Background-image:url(‘filename.jpg’) is pretty clear, it sets the background image of an element and accepts the file name as it’s parameter. When we get to generating forms in HTML, I notice designers and developers who are learning the basics of the DOM find it to be confusing and understandably so.

Look at the code below:

<form name=”input” action=”html_form_action.php” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>

This is a very basic one line form submission, but as you read through the code you’ll notice some WTF elements of this that can be easily confusing. What does the “name” attribute even do? I thought we named elements using class= or id=? What’s the difference between setting the method to “get” or “post”? This also might be your first reference to a server side scripting language, so the action= attribute might be even more confusing.

While you could (and should) learn the syntax for creating forms, there are often easier solutions in WordPress.

How to create forms in WordPress using Plugins:

1. Gravity Forms (Paid plugin)
2. Contact Form 7 (free)
3. Jetpack WordPress Plugin (free)

Gravity forms is worth every penny and if you are a WordPress developer I would recommend picking up a developer’s license. For free projects Contact Form 7 let’s you design and generate short codes to place throughout your site. I personally don’t use Jetpack but I’ve heard others speak highly of its wide feature set.

Check out this article from WP Bricks for some other perspectives on how to create forms in WordPress.