CREATING A FORM IN PHP
This section will outline the basic steps of creating a form in straight PHP for your website. This is pure HTML and PHP code — no WordPress, no embedding a third party form, just pure coding! This is by far the most complicated method, and the steps in this section might well generate many more questions for you than there are steps! Still, almost any good content creator, marketer, or basic website owner should have a basic familiarity with these tools and this method of editing a website.
We’re going to start with a basic Google search for “php contact form.” Google automatically suggested I add “with validation” to my search, and as a web developer I agreed (see image below) — validation basically means the little messages that pop-up when you leave a form field blank, for example, which says “this field cannot be blank”.
In the red circle shown below, I’m showing the search result on GitHub, which is a huge community where typically great developers share their code. The top engineers in the world who earn six-figure salaries showcase their work on GitHub. Furthermore, any project on GitHub can be downloaded without any annoying email subscription pop-ups. Let’s check it out!
Once you’re on GitHub, look for the green “Clone or download” button on the right side of the page. Click on it to reveal a small pop-up. Click on “Download ZIP” (highlighted below). If you’re a seasoned developer, you might choose to clone the project into your own git repository (what GitHub is named after), but if you knew how to do that you probably wouldn’t be reading this guide ;-).
The ZIP file has downloaded into your downloads folder by now, but before we go looking for it, I must stress that you should scroll down every time you’re on GitHub and read (or at least skim) the documentation for the project! This is what those aforementioned seasoned engineers would call RTFM, which is short for “Read The …. um… Fahrvergnügen… Manual”
In the highlighted section below you see that you must edit the file called “config.php” and fill in what your from and to e-mail addresses will be so that the contact form can properly send out emails. If you just rushed straight to the ZIP file first, you would end up being lost and frustrated for hundreds of hours until you threw your computer over the cliff you happened to be sitting next to while working on this contact form.
In the next screen below, I’m showing the ZIP file that was downloaded to my “Downloads” folder in OS X, which I use on my MacBook Pro. If I had a Windows machine, this could be in a different place, of course.
Notice inside the outer folder there are a bunch of files and a folder named “contact-form” at the top of the list. Generally, this outer listing of files are very techy developer stuff and you don’t need to worry about it. The file named “README.md”, for example, is actually the exact same information in the instructions on any Github project that I had you read in the previous step. So the basic pattern is that you’ll take the project folder (in this case named “contact-form”) and just drag that into your FTP program to upload it to your website.
Again, this step can vary wildly between Mac, Windows, Linux, and whatever FTP client you use. I’m using Mac OS X with the latest version of Transmit (version 5), possibly the best FTP client ever made! I’ve already set up a connection to my website in Transmit’s settings (you’ll need to know how to do this with your FTP client). But once you’re in, you’ll see something like the screen below, which is a listing of all my website files. Notice in the red circle below I just dragged the “contact-form” folder into my FTP window and it’s been uploaded to my website. (I also renamed it to “_contact-form” with an underscore at the beginning of the filename so that it goes first in the list alphabetically.)
Notice also that I’m inside the “contact-form” folder, which contains the “config” folder, and within that there is our special “config.php” file. This is the one you know you have to edit if you had read those GitHub instructions above! One really cool thing about Transmit is that I am able to configure it to open any text files I double-click on directly into my text editor, Sublime Text 3 (which is one of the best code editors on the planet)! This lets me skip the whole process of downloading the file, opening the downloaded file, and then re-uploading it after editing it. Instead, it just opens right in Sublime Text (with color-coded text to boot), and when I hit Cmd+S (to save the file), it automatically re-uploads to my website!
Below you’ll see how my text editor looks. I highlighted the part we need to edit in yellow. Notice I filled in the relevant sections with my email addresses. I put my personal email address in the to section, and the from section is from a “webform” address which is fine; this is just a simple contact-form test. A real setup might have used “info@” or “no-reply@.”
OK! After editing that file, our contact form is finished! We can go right to the live URL: http://plu.sx/_contact-form/index.php. Notice the form looks pretty nice, and the form validation works if you try to hit send without filling everything out.
Once you fill out the form correctly, you’ll get to the final screen after hitting send. The form message displays “Email sent successfully.” Great!
But beware!! Just because the contact form thinks the message went out to you doesn’t mean you’ll get an email. Again, this step can vary wildly as there are thousands of server setups, web hosting companies, and PHP configurations that can cause any number of issues. If you actually don’t get an email, you’ll have to troubleshoot your server (or call your hosting company) and ask them what went wrong. Taking a look at the “SimpleMail.class.php” file hiding within the “contact-form” folder I can see it’s using the PHP “sendmail()” function to handle e-mail delivery. Luckily for me, this worked fine without any further headaches and the contact-form was working fine at this point.
That’s it! As you can see, the PHP version of this guide is very involved, wrought with potential mishaps, very hard to troubleshoot, and fraught with terror! Now you can viscerally see why companies such as MailChimp are so successful. They handle all the server setup and code on their end and just give you a simple embed code. The amount of complexity is reduced by up to 99%, and the ease-of-use increased conversely.
EMBEDDING A FORM INTO YOUR WEBSITE
In this section we’ll cover embedding a form on your website, both in WordPress and in straight HTML.
First, choose which embed code (that we generated in one of the sections above) you’ll want to use:
Here is our MailChimp embed code
Here is our SurveyMonkey embed code
Here is our Google Forms embed code
Embedding Your Form in a Plain HTML Website
You’ll need to have an FTP client to access the files on your website and paste the code within. What you’ll end up with is a page similar to this demo page I’ve prepared on my website.
Here you’ll see the contact forms we created above, and if you choose Cmd+Opt+U in Google Chrome you’ll open up the “view source” page which will display the HTML code for this page. If you read through this code you’ll see how the various embed codes above were simply pasted below the page’s top <body> tag. I added a small bit of CSS to center each form in a nice box and pop them out from a gray background so it’s easier for you to see them.
Embedding Your Form in WordPress
First, you’ll have to be logged in to your WordPress dashboard. Again, this assumes you have WordPress set up already. So in that case, log into your WordPress admin area and we’ll start by clicking the “Plugins” menu circled in red below. Then click the “Add New” button on the top left of the Plugins page shown below.
Now type “insert html snippet” into the plugin search field and you’ll see the screen below. Click “install now” (circled in red below), then immediately after click “Activate.”
Once you’ve done this, you’ll have the “XYZ Snippets” menu in the left side-menu in WordPress. (See circled below.) Click on that to get to the plugin page, then click the blue “Add New HTML Snippet” button at the top of the page.
Now in this next screen below, let’s just call the snippet “Google Forms” and let’s just paste the Google Forms HTML code we showed above into the form. Finally, just click “Create.”
Now you’ll see the screen below, with the HTML snippet shortcode highlighted in blue below. You could select it here and copy it, but you won’t have to. Let’s just move on.
Click on the “Pages” left side menu option as shown below, then either click “Add New” at the top of the screen or edit an existing page. For now, I’ll edit the “test form” page that we created in the section above.
Now, check for the area I circled in red below. Again, WordPress plugins can create new buttons throughout the system. Remember, when we added the WPForms plugin above, we got the new “Add Form” button, and now we have this new “Insert HTML snippet” button. You’ll see the one snippet we created, “Google Form” showing in the menu. Click on that and the shortcode you didn’t need to copy earlier automatically gets added to the editing window below! I decided to move the Google Form shortcode to the top of the window for this demo (above the WPForms shortcode we created earlier on). Finally, click the blue “Update” button, also circled in red below.
Finally, click “View page” circled in red below!
This will take you to your live WordPress page with, voila! Your Google Form embedded nicely within. Here’s the live URL: http://carlosaugusto.net/test-form.
There are a thousand ways to create all sorts of forms with a variety of different providers, and tons of ways to integrate those forms into your website. Clearly, we saw that for the inexperienced (or non-) developer, creating your own form in pure HTML and PHP can be extremely difficult. This is why designing forms with third-party tools and services are so attractive.
Furthermore, every form provider has their unique specialties. MailChimp is mainly focused on creating email lists, which is an essential marketing tool. Google Forms is more focused on creating a beautiful form as quickly as possible and collecting survey data, or any other data you can imagine. Finally, SurveyMonkey is focused on… you guessed it. Monkeys. (Just kidding: surveys!)
My favorite method in this guide is creating a form on Google Forms and integrating it into my CMS of choice, WordPress. I would highly recommend this type of approach versus handcrafting web components, like forms, on your own. If you need personal consultation on any of these topics, or have suggestions on how to improve this guide, don’t hesitate to contact me (see my author profile below).
Whichever way you choose to get forms on your website, I hope this guide gave you a good overview of how it’s done quickly along with a variety of really useful tools.
Upwork is a freelancing website where businesses of all sizes can find talented independent professionals across multiple disciplines and categories. If you’re a business and are looking to get projects done, consider signing up!
This article was submitted by Carlos Augusto and does not constitute the views or opinions of Upwork.