“ContactMe” Documentation by “21 Tools” v1.4


“ContactMe”

Created: 10/07/2017
By: 21 Tools
Email: info@21tools.it

Thank you for purchasing our script. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!


ATTENTION

If your download is corrupt, please contact us at info@21tools.it and we'll send to you a new copy of the script.

Table of Contents

  1. Quick start guide
  2. Customize advanced options
  3. Setup Google reCAPTCHA
  4. How to add Checkbox and Radio button
  5. Change language
  6. Choose theme design
  7. Change allowed upload files type
  8. Connect 2 date fields
  9. Email customizations
  10. Set a form field as SUBJECT of the email
  11. Send email FROM a form field
  12. Send email TO a form field
  13. Size of the form
  14. Create Custom Form
  15. Rate the script

A) Quick start guide - top

This script can be simply installed in your website, to do this, follow these istructions:

  1. Unzip the archive and upload the folder "contactme" to your server.
  2. Open the demo file index.html, in the <head> section copy from "START css copy section" to "END css copy section" and paste into the <head> element of your HTML page.
  3. Open the demo file index.html, copy from "START js copy section" to "END js copy section" and paste before the </body> close tag element of your HTML page.
  4. Copy the form code you choose and put it in your HTML page where you want to show it. Example: if you want to use the "General Contact Form" you should copy the code from "START copy section: General Contact Form" to "END copy section: General Contact Form".
  5. Open the file: /contactme/configs.php and fill in the values for the only 3 required configs: from_name, from_address, to_addresses. (each option is well explained on the right).

If your site already use jQuery plugin, remove the jQuery line from the section "START js copy section" to avoid to import it twice.

NOTE: If you need to change some fields of the example forms, or if you need to create a custom form, you have to read this chapter of the Documentation: Create Custom Form

ATTENTION: sometimes the CSS of your site may conflict with the CSS of our script, if something looks strange contact us. We can help you to fix the problem.


B) Customize advanced options - top

All the options are in the file: /contactme/configs.php

Each option is well explained, so read the information and feel free to customize the value.

ATTENTION: The option "from_address" is very important. You should use an email address with the same domain of your server url. Otherwise it may be classed as "spam".


C) Setup Google reCAPTCHA - top

You can choose wich version to activate: reCAPTCHA V2 or Invisible reCAPTCHA

Create a site key of the version you chose for your website: https://www.google.com/recaptcha and then put the key as described:

  1. Copy the "Site Key" and replace the string "YOUR_SITE_KEY_HERE" in the HTML of the form
  2. Copy the "Secret" and replace the value of "recaptcha_secret" in the file /contactme/configs.php

To enable the Google reCAPTCHA follow these steps:


D) How to add Checkbox and Radio button - top

You can add checkboxes or radio buttons in the form by simple follow these steps:

ATTENTION: make sure to set "name" value equal to the "name" attribute of the field in the HTML form code.


E) Change language - top

All messages are translated in 5 languages: English, Spanish, German, Italian, Russian. The default language is English, but you can change it. Each Language has a different code: English (en), Spanish (es), German (de), Italian (it), Russian (ru).

Follow these istructions to change the language of the messages:

  1. Open the file /contactme/configs.php and replace the "lang_path" value by changing the "en" with the new code language.
  2. Open the file /contactme/js/contactme-config.js and replace the "Language options" with the new language code.

Follow these istructions to change the language of the dropdown and datepicker plugin:

  1. In the js copied section of the code, replace the line "<script src="contactme/js/select2-lang/en.js"></script>" by changing the "en" with the new code language.
  2. In the js copied section of the code, replace the line "<script src="contactme/js/bootstrap-datepicker-lang/en.js"></script>" by changing the "en" with the new code language.

F) Choose theme design - top

We have created 7 concrete examples and 4 different graphics themes. You can choose between 4 different themes: Default, Modern, London, Minimal.

This is the first code line of the "General Contact Form"

<form class="contactMe small" action="contactme/send-general-form.php" method="POST" enctype="multipart/form-data">

The Defalt Theme is already active, but if you want to change the theme, you have to replace class="contactMe small" with: class="contactMe small theme-modern" or class="contactMe small theme-london" or class="contactMe small theme-minimal"


G) Change allowed upload files type - top

You can change the allowed upload file type for each file input, to do it follow these steps:

ATTENTION: Each line already has something similar, for example: "required" => true so don't forget the comma.

ATTENTION: The default allowed types array is in the configs.php file. It's used when no extensions are specified in the sending .php file.

If you're using only one form or each upload input has to accept the same extensions type, you can simply edit the types array in the configs.php file, but if you are using more than one form or each upload input has to accept different extensions type, you have to specify the allowed extensions in each sending files.


H) Connect 2 date fields - top

You can connect 2 date fields if the second date is required to be after the first. This is useful if you need to use them like in a hotel check-in / check-out.

To do it follow these steps:

That's it, now these 2 date fields are connected.

NOTE: You can see how it works in our demo: HOTEL CONTACT FORM

ATTENTION: If you want to remove this feature, just remove the ID attribute to both the date fields. Remove also the attribute "data-idconnecteddateend" from the End Date field and the attribute "data-idconnecteddatestart" from the Start Date field.


I) Email customizations - top

The script send 2 emails: the first to the site owner an the second to the user for confirmation. You can edit the email messages in the file of the language you choose: /contactme/lang/.......json

USER CONFIRMATION EMAIL: Inside the "emails_info" you can find "confirmation", so you can edit "subject" and "body" of the confirmation email sended to the user.

SITE OWNER: Inside "emails_info" you can find "subject" that is the subject of the email sended to the site owner.
If you are a developer: you can edit the body of this email in the file /contactme/functions.php by editing the functions getHtmlEmailContent()


J) Set a form field as SUBJECT of the email - top

You can set a form field as SUBJECT of the email sent to the site owner. To do it, follow these steps:

ATTENTION: Each line already has something similar, for example: "required" => true so don't forget the comma.

You can also add a custom text to put before the user's text in the subject of the email. To add it, just open the file of the language you choose: /contactme/lang/.......json and edit the value of "custom_before_subject".


K) Send email FROM a form field - top

You can use a form field as FROM address in the email. To do it, follow these steps:

ATTENTION: Each line already has something similar, for example: "required" => true so don't forget the comma.


L) Send email TO a form field - top

You can use a form field as TO address in the email. To do it, follow these steps:

ATTENTION: Each line already has something similar, for example: "required" => true so don't forget the comma.


M) Size of the form - top

You can choose between 3 different sizes:

  1. AUTO: the form will fit the container size
  2. XSMALL: the form will be 300px width
  3. SMALL: the form will be 400px width
  4. MEDIUM: the form will be 500px width

This is the first code line of the "General Contact Form"

<form class="contactMe small" action="contactme/send-general-form.php" method="POST" enctype="multipart/form-data">

As you can see, this is setted to "small" size, you can change it to "medium" size simply changing that word. NOTE: if you want the form to fit the container size, simply remove "small" and "medium".


N) Create Custom Form - top

We've created a powerfull and extremely customizable Contact Form, all is automated and you can simply create a different form or edit one.

In the HTML form code you can edit/add fields as you want and then simply open the send file to edit it. Example: the sending file for the General Contact Form is /contactme/send-general-form.php

You have to open it and edit the $fields array. As you can see there are all the form field ORDERED as in the HTML form code, so you can simply add/edit one or more lines to make this definition equal to the HTML form code. (NOTE: for each group of Radio button you need to add only one line in the $fields array). ATTENTION: make sure to set "name" value equal to the "name" attribute of the field in the HTML form code.

If you need help, please contact us at info@21tools.it we'll help you to creating/editing the form.


O) Rate the script - top

Please login to your Envato account, navigate to your "Downloads" page and rate 5 stars this script.
The rating for us is very important, please contact us before giving a bad rating, we can help you to install or edit the script in your website. Thanks in advance!


Once again, thank you so much for purchasing this script. As We said at the beginning, We'd be glad to help you if you have any questions relating to this script. No guarantees, but we'll do our best to assist. If you have a more general question relating to the script on CodeCanyon, please don't esitate to write an email to info@21tools.it.

#enjoy

21 Tools

Go To Table of Contents