Often times an online form is useful to collect reader contact information, or distribute a reader survey; it can be difficult however, to get your form looking exactly how you would like, and programming it for correct functionality. Now you don't have to code them alone!
Zmags Form Generator:
To make creating your forms quick and easy, we are proud to present the following tool, which can generate on the fly all HTML and PHP required for any one of a million fully functional forms:
The remainder of this guide will serve as a detailed how-to for using this tool.
Settings by Section:
At any time while filling out the form settings, click the "Generate Code" button to see a preview of what your form will look like using the current settings.
- Form Title: Optionally enter a title to be displayed at the top of your form.
- Select and Rename Elements: There are 8 fields available to be added to the form. Check / uncheck the 'include?' boxes to select which will be used in the form. Check / uncheck the 'require?' boxes to select which will be required fields. If desired, change the label for each.
- Submit Button: Choose the text to be displayed on the button itself, and the message to be displayed after your reader submits the form.
- Style and Appearance: Used to apply CSS to various sections of the form. See the next section of this guide for more info.
- Form Preferences:
o PHP File: The name of the PHP file that will be associated with this form. Usually the default name (form.php) is fine, but if you will be storing multiple forms in the same place on your site, each one will need to be named differently.
o Send Email / Save to File: Select the type of form you would like this to be.
o Target: Enter the email you will be sending to, or the location of the file you will save to.
o From: If you are creating an email form, fill in any given email here. It does not need to be a real email, but it must have a valid format: email@example.com
o Subject: If you are creating an email form, use this box to choose what will be written in the subject line.
When you are finished customizing the settings, click the "Generate Code" button to display the preview form and associated HTML / PHP code.
Altering Form Appearance via CSS:
Admittedly, the default form looks exceptionally boring. Thankfully it is possible to customize your form's appearance extensively. The options below describe some basic things you can do with any of the settings in the "Style and Appearance" section of the form generator, but this is certainly not an exhaustive list of all possibilities.
To apply more than one setting to an area, simply string them together one after another, separated by spaces. When you are asked to "pick_color", use the CSS Color Names list or the Hexadecimal Color Picker. When you see "###", fill in a number.
- Text size:
- Text font:
- Font color:
- Font weight:
- Background color:
- Border type, color, thickness:
border:solid red 2px;
border:dotted #0000FF 3px;
border:pick_type pick_color ###px;
- Corner rounding:
border-radius: ###px; -moz-border-radius:###px;
What follows are several form previews demonstrating the kinds of results you can expect from various appearance settings, along with the specific CSS used to produce them.
In each screenshot the 'name' field has been left blank and the submit button clicked, to demonstrate the appearance of user errors in filling out the form.
| - Title:
font-size:x-large; text-align:center; font-weight:normal;
| - Title:
font-size:x-large; text-align:center; background:#F6F4F0; width:317px; border:solid black; border-width:1px 0px;
background:#F6F4F0; border:solid black 1px; margin-left:120px;
border:solid red 1px; padding:2px 1px;
| - Title:
font-size:large; font-weight:bold; text-align:center; background:#93BD80; width:317px; color:white;
color:white; background:#93BD80; border:solid black 1px; margin-left:120px;
| - Title:
font-size:x-large; font-family:Georgia; font-weight:100;
background:#F1F1D4; font-style:italic; color:#483624;
font-style:italic; color:#483624; background:#F1F1D4; border:solid black 1px; margin-left:190px; margin-top:-10px; border-radius:5px; -moz-border-radius:5px;
| - Title:
font-size:x-large; text-align:center; border:solid black 1px; width:315px; border-radius:5px; -moz-border-radius:5px;
background:white; border:solid black 1px; margin-left:120px; border-radius:5px; -moz-border-radius:5px;
border:solid red 1px; background:#FAE3E3; padding:2px 1px;
Testing Your Form:
If you are creating an email form, be sure 'Target', 'From', and 'Subject' are all filled out in the "Form Preferences" section. These are required for proper functionality.
If you are creating a "Save to File" form, only the 'Target' setting is used in this section. If you will be saving to a file in the same folder as the form.php, simply enter the name of the file: "log.txt". If you will be saving to a file in a different folder, be sure to enter the path accordingly: "./log_files/log.txt" or "http://www.mywebsite.com/log_files/log.txt", for example.
The file must also have permissions set allowing for it to be written to. By default, read/write permissions of 777 should work for most situations. To test your form preview, using "log.txt" will write data to the log file located here.
The preview form that appears when you click "Generate Code" is fully functional; it can be filled out and sent for testing purposes. This will clear your settings, but when you're done viewing the confirmation message you can click the back button to return to the pre-submitted state and access your code and settings again.
Note: In Internet Explorer, you will need to click the back button twice. (In IE8, use the small down arrow next to forward/back to go back two pages at once.) Then, click "Generate Code" again.
Hosting the Form on Your Site:
Once you are happy with the appearance and behavior of your form, the next step is to host it somewhere online for use. This will require access to a web server where files can be saved.
1) Click "Select HTML" and press CTRL + C to copy the code. In a plain text editor such as Notepad, Notepad++, or TextWrangler (not Microsoft Office or similar!) create a new blank file and press CTRL + V to paste the code.
2) Save the file using any name, but be sure it ends in .html - place the name in quotation marks to ensure it is interpreted literally by your text editor, like so:
3) Repeat steps 1 and 2, but instead use the "Select PHP" button, and save using a filename with .php at the end. Be sure that this filename matches the one selected in the "PHP File" setting of the "Form Preferences" section.
4) Once you have created both the HTML and PHP file, host them both in the same folder on your web server.
Embedding Your Form in a Webpage:
Now that your form is hosted online, you may place it anywhere in an HTML webpage by using the following code:
<iframe src="your_form_url.html" style="height:###px; width:###px;"></iframe>
Simply replace the ### for height and width with the numbers recommended by the form generator, and replace your_form_url with the path and file name of your HTML form file.
Embedding Your Form in a Light Box:
Now that your form is hosted online, you may place it in a Zmags light box simply by using the URL to the HTML file on your web server. It is also advisable to use at a minimum the height and width recommended by the form generator for the height and width of your light box.
Larger sizes will work, but leave extra space around the form. Slightly smaller light boxes (about 10 - 30 pixels less in height and / or width) might fit some of the forms created by this generator, so feel free to experiment, but the recommended sizes will best support all forms generated.