1. Start
  2. About
  3. System Requirements
  4. Features
  5. Screenshots
  6. Installation and Usage Guide
  7. Demo

Cross Domain JavaScript Post Forms

PHP, jQuery contact forms that can be used on any 3rd party site


Thank you for purchasing "Cross Domain JavaScript Post Forms". If you have any question not answered below, or you couldn't find the answer in our demo project, feel free to contact us via our Theme Forest account. Thanks again!

About "Cross Domain JavaScript Post Forms"


The idea behind this product is to add different contact forms on any 3rd party site without installation or programming, all the work is two lines of HTML code. Data entered in the submitted forms will be saved in a log file on your master site and delivered to your email address.

You don't need any programming experience to use this product. If you want to customize the forms layout you will need experience in HTML and CSS.

How it Works

  1. You need to have master site where you can place the scripts of this product (blue circle). The web host of your Master Site needs to support PHP scripting language.
  2. The admin script on your Master Site will generate small HTML code (div tag and javascript include tag) that needs to be placed in the HTML code on any Site.
  3. When you open a page from Site that has this HTML code, the master site will send back a HTML form.
  4. If somebody fills up the form, entered data is sent to master site without browser refresh or without doing any post. Received data on master site is saved in a log file and sent to your email address as well.




System Requirements

In order to be able to use this product you need:
- Web hosting with installed PHP5 or above (no need of database)
- Ability to set write privileges to the folder where log files will be saved
- PHP GD library installed on your web host, if you want to use captcha in your forms

Features


Here is the list of features this product has:

Screenshots


Installation and Usage Guide


Installing the script files on master server

You have to unzip the files from this product, then copy the folder CrossDomainPost to your web host via FTP client.


After this you need to open the config.php file in some text editor and change the settings as shown in the image below.



As you can see in the image above, you need to set up the following:

Starting the Admin Page

After you have saved the config.php file, you can run the admin page:
http://yourdomain.com/CrossDomainPost/admin.php?key=your_security_key



In the drop down menu you can select the template you want to use. Each option represents a HTML file located in form_templates folder.
By pressing the "Generate Code" button, you will get a code that needs to be included in the 3rd party site (red square on the image above). The generated code looks like this:

<div id="dv07087534868422608" style="width: 400px; "></div>
<script type="text/javascript" src="http://yourdomain.com/CrossDomainPost/form.php?div_id=dv07087534868422608&template=contact_ver2"></script>

Adding the Code to 3rd Party Site

For demonstrating purposes we used WordPress site installed on other domain, but the same procedure can be used for any other site that has content management, or any other site with static HTML pages...



Edit the page in HTML mode as shown on above image. Paste the generated code from previous step in the content on this page. You can add more forms on the same page, but have in mind that every form needs to have different DIV ID. Each time when you press the "Generate Code" button it generates code with different DIV ID all the time. After saving the changes, you can open the public page and see the results.

The same way we can add newsletter subscription form in the widget area.

Have in mind that returning back in Visual Mode on some DHTML editor, may remove the JavaScript code, also some editors may not allow you to add a script tag.



And here is the layout of the public page after updates we made:



How to Create a new Form Template

If you want to create new form template, or you want to update existing one, please open the "form_templates" folder.

All templates must have ".html" extension. You can use table or div or any other html element you want. The form CSS can be placed above the form HTML code in <style> tag.



HTML code of subscription form is displayed on the image above. For any new or existing template you have to stick to the following:

  1. If you want your input field, select or textarea to be required use the class "cdp_required" for that element.
  2. If the input field needs to have email validation then use the class "cdp_email".
  3. If you want a captcha image with input field for inserting the captcha text in your form then use the marcro "CAPTCHA".
  4. In order to be able to submit the form, you must add input field of type "button" in the form, otherwise you will not be able to make a post.


If you want to prevent your form class to inherit style settings from the main design template where the form is displayed, then you have to use complex names for the CSS classes.

<style>
.nfv1 { display:block;  border: 1px solid #ccc; border-radius: 5px; margin:0; padding: 20px; font-size:100%; }

.nfv1 .nfv1_label {display:block; margin: 5px 0; float:left; width:100%; }
.nfv1 .nfv1_label label {display:block; font-weight:bold; width: 100%; text-align:left; }

.nfv1 .nfv1_field { display:block; margin: 5px 0; float:left; width:100%; }
.nfv1 .nfv1_field input, .nfv1 .nfv1_field textarea { display:inline; width: 98%; margin:0; padding:3px;}
.nfv1 .nfv1_clear {clear:both;}

/* err-validation name is required */
.nfv1 .err-validation { width: 100%; margin: 5px 0px; padding:0; display:block; background: none repeat scroll 0 0 #EE0101; 
	border: 2px solid #DDDDDD; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 6px #000000; color: #FFFFFF; } 
.nfv1 .err-validation div { padding:5px; margin:0; font-size:11px; }    
</style>
		


As you can see in the example above, we used complex class names, and also we used percentages for the container and input fields width. This way the form will take the maximum width of the parent container where is placed.

".err-validation" class is required, this name can't be changed because it is used by the form validation engine to display the form errors.

Thank You Message

After form is submitted, a thank you message is displayed on the screen. The content of this messages is taken from the following file:
~/CrossDomainPost/form_templates/thankyou_template/thankyou.html

If you want to change this message, you could open this file in some text editor and update the message.

Form Log Files

Each form post is saved in tab delimited log file. The log file path is set in config.php file. The name of the log file is: FormTemplateName_SECURITY_KEY.txt



As you can see on the image above, you could download each of those log files. The file name contains your secret key, in case you are not able to set this path outside of the web root folder.

Demo


Demo Admin Site

Master Site with forms
3rd Party Site with forms from Master Site

Documentation