Creating a contact form from scratch or in Dreamweaver used to be the bane of the web designer's existence. You would have to scour the internet looking for some code snippet or PHP script that would (hopefully) work the way you wanted, put it up on the site, then customize it. But now, thanks to MagicEdit, those days are long gone. Your site already has working forms built in, all you have to do is decide what data you want to collect.
The most common usage of web forms is to create an email to send to a specified address. MagicEdit makes sending forms as email easier than you, the web designer, can imagine. The HTML is extremely basic and straight-forward, and is no different than the form tags you learned back in HTML 101.
In this tutorial, we'll create a form that collects a name, phone number, email address, and a brief message. We'll specify the email address that the form will be sent to and a page that visitors are sent to after submitting the form.
We usually put our contact forms on a "contact.html" page, but you can put it anywhere on your MagicEdit site and it will work just fine. Let's start with the opening
<form> tag. This is where you will enter the specifics about how your form should be processed:
<form me_email="firstname.lastname@example.org" me_subject="An email from your website!" me_page="thankyou.html">
As you can see from the above tag, the form will send to the "email@example.com" email address and the subject will read "An email from your website!" After a site visitor clicks the submit button to send the form, they will be redirected to the "thankyou.html" page, which will usually be just a brief statement to the effect of, "Thank you for contacting us. We'll review your information and reply to you soon." Next we'll move on to the
<label for="name">Name</label> <input type="text" id="name" name="name" /> <label for="phone">Phone Number</label> <input type="text" id="phone" name="phone" /> <label for="email">Email</label> <input type="text" id="email" name="email" /> <label>Your Message</label> <textarea name="comments" rows="5"></textarea> <input type="submit" value="Send Form" /> </form>
That's really all you need. Of course, you can add any fields you want and include checkboxes, radio buttons, etc. MagicEdit will process the form and send it to whatever email address you specify, without you having to touch any PHP script or do any programming. The message will also come from the email address that your visitor enters so that you can easily reply.
Perhaps you don't want to receive an email every time someone fills out a form; perhaps you would prefer to just keep all the data in one file and refer back to it at your convenience. Well, you'll be happy to know that MagicEdit has this covered as well. You can easily specify that you want the form saved as a comma-separated value (.csv) file and MagicEdit will take care of the rest! Then, when you want to review your data, you can download the file and easily load it as an Excel spreadsheet.
As you might expect, creating an Excel file from the form is not much different than an emailed form; in fact, it's even easier. Since you're not emailing the form, you can remove the
me_page tags and replace them with
me_csv="fileName.csv", like so:
<form me_csv="fileName.csv"> <label for="name">Name</label> <input type="text" id="name" name="name" /> <label for="phone">Phone Number</label> <input type="text" id="phone" name="phone" /> <label for="email">Email</label> <input type="text" id="email" name="email" /> <label>Your Message</label> <textarea name="comments" rows="5"></textarea> <input type="submit" value="Send Form" /> </form>
Of course, you can name the .csv file whatever you want. MagicEdit will format the file with headers pulled from the input names.
Perhaps you want to send the file as an email and save it to an Excel spreadsheet. No problem! Just include
me_csv="fileName.csv" in the
<form> tag and you're all set. Now you can receive the form data in your email and reply to it without worrying about saving the email for future reference, as all the data will be saved in the .csv file, too.