1. Start
  2. Read this first
  3. Installation guide : Contact Form Generator
  4. Installation guide : your first contact form
  5. Installation Guide: integrate the form into your code base
  6. Changing default configuration
  7. Configure your email address
  8. Borders and padding
  9. Captcha
  10. Colors
  11. Confirmation and error messages
  12. Date format and language
  13. Default form setup
  14. jQuery files
  15. Font list
  16. Font family
  17. Font size
  18. Font weight
  19. Labels
  20. User Notification message
  21. Number of rows (textarea only)
  22. Slider values
  23. Upload
  24. Width

Contact Form Generator v1.5


Thank you for purchasing Contact Form Generator

Subscribe to our newsletter for free to receive a notification in your inbox each time a new version of Contact Form Generator is available on Code Canyon.

Go to topstudiodev.com to read the change log and check for updates.

If you have any questions about this product, feel free to email us at support@topstudiodev.com

Visit our portfolio on Code Canyon

Read this first


This is important : if you don't want to miss the next new versions of Contact Form Generator, subscribe to our newsletter to receive a notification in your inbox each time a new version of Contact Form Generator is available on Code Canyon.

Subscribe here, it's 100% free and it is the easiest way for you to get the latest version of our web applications.

Installation guide : Contact Form Generator


It is very quick and easy to install Contact Form Generator

Installation guide : your first contact form


  1. Once you are done editing your form, click on the Create source files button at the bottom of the editor
  2. Two new buttons will appear: "View your form" and "Download sources"
  3. Click on the View your form button to get a preview of your new contact form
  4. Click on the Download sources button to download a zip file containing all the source files of your contact form
  5. Unzip the file and upload its content on your server

That's it! Your contact form is ready to work.

All the contact forms you create are stored in the following directory : editor/contactform-download

Installation Guide: integrate the form into your code base


If you want to integrate the contact form into your own code base, open the index.php file of your contact form and take the following steps.

Copy and paste everything that is bewteen the <!-- Contact Form Start --> and <!-- Contact Form End --> tags inside the <head></head> tags of your page. The content may differ from the image below depending on the type of fields you included in your form and depending on the form id you just created. The script requires at least jQuery 1.7.2 to work properly.

Copy and paste everything that is bewteen the cfg-contactform tags inside the <body></body> tags of your page.

Upload the "contactform-xx" directory in the same directory of the page that will include your contact form. The "contactform-xx" directory contains the javascript and php files that will forward the messages to your email address inbox.

If you form includes an upload field, the page in which you integrate your contact form must have the extension ".php". Let say you decide to integrate a contact form that includes an upload field into a page that already exists on your website. If this page has the extension ".html" (such as "contact.html" for example), you will simply have to rename this page into "contact.php" to make the contact form work properly.

Changing default configuration


To change the configuration of the contact form editor, there is only one file to edit :
editor/class/class.contactformeditor.php

If you want to change the value of a parameter (default color, default typography, etc.) :

  1. open class.contactformeditor.php
  2. update the value of the parameter
  3. save the file
  4. upload the file in the "editor/class/" directory

Important reminders

A few things should not be edited in the source files of your contact form if you want it to work properly :

Configure your email address


If you don't want to type in your email address in the contact form builder each time you create a new form,
open "editor/class/class.contactformeditor.php" and change the default value for this variable :
$this->form_emailaddress

This way, your email address will always appear in the email address field of the editor and you won't have to write it every time you use the contact form generator.

Your email address $this->config_email_address

You can also configure the name that will appear in the "from" field of the user's inbox when you activate "delivery receipt" in your contact form.

Your name $this->config_email_from

You can do the same for the CC and BCC fields. If you want to add multiple recipients in CC and BCC fields, use commas to separate mutiple e-mail addresses.

E-mail addresses in the CC field $this->config_email_address_cc
E-mail addresses in the BCC field $this->config_email_address_bcc

 

Borders and padding


Border color for form inputs $this->default_bordercolor_inputformat #dcdcdc
 
Border radius for form inputs $this->default_borderradius_inputformat 5px
Border width for form inputs $this->default_borderwidth_inputformat 1px
Padding for form inputs $this->default_padding_inputformat 5px

Captcha


Number of characters in the captcha $this->captcha_default_length 6
Format of the captcha
Authorized values:
  • letters (letters only)
  • numbers (numbers only)
  • lettersandnumbers (letters and numbers)
$this->captcha_default_format lettersandnumbers

Colors


Title $this->default_color_title #26ADE4
 
Label $this->default_color_label #4DBCE9
 
Paragraph $this->default_color_paragraph #000000
 
Form inputs $this->default_color_formelement #000000
 
Submit buttons $this->default_color_submit #555555
 
Background color for submit buttons $this->default_backgroundcolor_submit #f1f1f1
 
Border color for submit buttons $this->default_bordercolor_submit #cccccc
 

Confirmation and error messages


Error message for empty fields $this->config_errormessage_emptyfield This field can't be left empty
Error message for invalid email address $this->config_errormessage_invalidemailaddress Invalid email address
Error message for wrong captcha $this->config_errormessage_captcha Value does not match
Error message for upload: file size is too large $this->config_errormessage_uploadfileistoobig File size is too large
Error message for upload: unauthorized file type $this->config_errormessage_uploadinvalidfiletype Unauthorized file type
Confirmation message $this->config_validationmessage Thank you, your message has been sent to us.
We will get back to you as soon as possible.

 

Date format and language


Date format
See the list of possible date formats on the jQuery website
$this->datepicker_default_format mm/dd/yy
Date language
The list of all the available languages is in the datepicker_language parameter inside "class.contactformeditor.php"
$this->datepicker_default_language English

 

Default form setup


To change the elements that appear by default in the form editor, open editor/class/class.contactformeditor.php and look for the line Form Set Up

Then, use the function addElement() to make the element you want appear in the form editor.

For example, if you want to see a title, a text area and a submit button in the default set up, you will use the following code:

$this->addElement('title');
$this->addElement('textarea');
$this->addElement('submit');

Captcha field captcha $this->addElement('captcha');
Checkboxes checkbox $this->addElement('checkbox');
Date field date $this->addElement('date');
Email field email $this->addElement('email');
Image image $this->addElement('image');
Paragraph paragraph $this->addElement('paragraph');
Radio buttons radio $this->addElement('radio');
Select / Drop-down list select $this->addElement('select');
Multiple Select / Drop-down list selectmultiple $this->addElement('selectmultiple');
Single line text text $this->addElement('text');
Submit button submit $this->addElement('submit');
Textarea / Multi-line Text textarea $this->addElement('textarea');
Title title $this->addElement('title');
Time field time $this->addElement('time');
Upload / File attachment upload $this->addElement('upload');

 

jQuery files


Get the latest version of jQuery and jQuery UI on Google CDN here.

jQuery $this->path_jquery http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
jQuery UI $this->path_jquery_ui http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
jQuery UI theme $this->path_jquery_ui_theme http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css

Font list


array(
    'Arial',
    'Courier New',
    'Georgia',
    'Impact',
    'Tahoma',
    'Times New Roman',
    'Trebuchet MS',
    'Verdana',
    'NEW FONT'
);
$this->fontstyleeditor_fontlist Arial
Courier New
Georgia
Impact
Tahoma
Times New Roman
Trebuchet MS
Verdana

Font family


Title $this->default_fontfamily_title Arial
Label $this->default_fontfamily_label Trebuchet MS
Paragraph $this->default_fontfamily_paragraph Verdana
Form inputs $this->default_fontfamily_formelement Verdana
Submit buttons $this->default_fontfamily_submit Arial

Font size


Title $this->default_fontsize_title 2.2em
Label $this->default_fontsize_label 1.2em
Paragraph $this->default_fontsize_paragraph 0.8em
Form inputs $this->default_fontsize_formelement 0.8em
Submit buttons $this->default_fontsize_submit 1.3em

Font weight


Title $this->default_fontweight_title bold
Label $this->default_fontweight_label normal
Paragraph $this->default_fontweight_paragraph normal
Form inputs $this->default_fontweight_formelement normal
Submit buttons $this->default_fontweight_submit bold

Labels


Title $this->default_label_title Contact us
Paragraph $this->default_label_paragraph To contact us, use the form below.
We will get back to you as soon as possible.
Captcha $this->default_label_captcha Captcha: enter the letters below
Checkbox $this->default_label_checkbox Checkboxes
Date field $this->default_label_date Date
Email $this->default_label_email Email
Radio buttons $this->default_label_radio Radio buttons
Select field $this->default_label_select Select
Multiple select $this->default_label_selectmultiple Multiple select
Submit button $this->default_label_submit Send
Textarea $this->default_label_textarea Textarea
Text field $this->default_label_text Text field
Time field $this->default_label_time Time
Upload / File attachment $this->default_label_upload Upload

 

User Notification message


Notification title $this->config_usernotification_subject Thanks for your message
Notification message $this->config_usernotification_message Thank you for contacting us.
We will answer you as soon as possible.

 

Number of rows (textarea only)


Number of rows for textarea field $this->default_rows_textarea 6

Slider values


Mininum width $this->slider_width_min 10px
Maximum width $this->slider_width_max 500px
Minimum rows for textarea $this->slider_rows_min 1
Maximum rows for textarea $this->slider_rows_max 30
Minimum font size $this->slider_fontsize_min 0.6em
Maximum font size $this->slider_fontsize_max 4em
Font size step $this->slider_fontsize_step 0.1

Upload


File size limit $this->upload_filesizelimit 1
File size unit $this->upload_filesizeunit MB

 

Width


Captcha field $this->default_width_captcha 110px
Date field $this->default_width_date 100px
Email field $this->default_width_email 260px
Text input field $this->default_width_input 260px
Paragraph $this->default_width_paragraph 300px
Submit button $this->default_width_submit 140px
Textarea field $this->default_width_textarea 300px