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
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.
It is very quick and easy to install Contact Form Generator
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
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.
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.) :
A few things should not be edited in the source files of your contact form if you want it to work properly :
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 |
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 |
Number of characters in the captcha | $this->captcha_default_length | 6 |
Format of the captcha Authorized values:
|
$this->captcha_default_format | lettersandnumbers |
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
|
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 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 |
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 | $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'); |
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 |
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 |
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 |
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 |
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 |
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 |
$this->default_label_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 |
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 for textarea field | $this->default_rows_textarea | 6 |
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 |
File size limit | $this->upload_filesizelimit | 1 |
File size unit | $this->upload_filesizeunit | MB |
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 |