RSform!Pro Custom scripts and customizations In this article we will describe how to create a simple form with RSform!Pro with two email fields. The following script will be used to compare the value of these fields so you can get a confirmation that the data inputed by the user is correct.
You can start by creating a new form. In the "Edit form" you can enter these values:
Form Title: Compare
Form Name: Compare
The next step is to populate the form with the following components:
- Email field 1 - Textbox
Name: email1
Caption: Email1
Required: Yes
Validation: email
Click "Save" next to the component's settings
- Email field 2 - Textbox
Name: email2
Caption: Email2
Required: Yes
Validation: email
Click "Save" next to the component's settings
- Submit button
Name: compare
Caption: Compare
Reset: No
Additional Attributes: onclick="return checkEmail(this);"
Click "Save" next to the component's settings
On the "Form Layout" tab, uncheck the "Auto Generate Layout ?" checkbox and paste the following code:
<script type="text/javascript">
function checkEmail(theForm) {
if (document.getElementById('email1').value != document.getElementById('email2').value)
{
alert('Those emails don\'t match!');
return false;
}
else {
return true;
}
}
</script>
Click "Save" and that's it.
In this tutorial we will describe how to perform some field calculations in RSform!Pro and displaying the result in the "Thank you !" message.
You can start by creating a new form called "Calculation". We will need to add 4 form components with the following settings:
1. Field name : Field1, Caption : field1, Validation : numeric, Field Type : Text
2. Field name : Field2, Caption : field2, Validation : numeric, Field Type : Text
3. Field name : total, Field Type : hidden
4. Field name : Field4, Caption : calculate, Field Type : submit button,
Additional attributes:
onclick="document.getElementById('total').value = parseInt(document.getElementById('Field1').value) + parseInt(document.getElementById('Field2').value);"
On the "Thank You" tab please edit the Thank You message:
The result of the calculation is: {total:value} Note: Field name is Case Sensitive. In this article we will describe how to make your form created with RSformPro! to record the web page title from which it was submitted. This script will record the web page title if the form was included in a article using mosrsform ( ex: {rsform 1} ).
In order to achieve this you will have to create a new hidden field. In the Default Value please paste the following code:
//<code>
$content_id = $RSadapter->getParam($_GET,'id',0);
if($content_id){
$q = mysql_query("SELECT title FROM ".$RSadapter->config['dbprefix']."content WHERE id = '$content_id' ");
$title = mysql_result($q,0);
}else{
$title = 'No content found';
}
return $title;
//</code>
On each submission it will save the title in the submissions, and of course you can use the {hidden_field_name_here:value} placeholder in your e-mail.In this article we will describe how to auto-populate a list with the name of the files in a folder of your choice. In order to achieve this paste the following code to the "Items" text area:
//<code>
$items = "|Please Select[c]\n";
if ($handle = opendir($RSadapter->config['absolute_path'].'/your_path_to_the_folder/'));
while (false !== ($file = readdir($handle)))
if($file != '.' && $file != '..')
$items .= "$file\n";
closedir($handle);
return $items;
//</code> The "Please Select" string will appear at the top of the list, the "[c]" option making it the default selected item.
The config['absolute_path'] snippet will generate the path to your site which will be concatenated with the path to your folder .
In this article we will desribe how to show or hide fields depending on a radio button selection using Javascript.
Here is what you should do:
1. Let's suppose, for example that your radio component is named: "Radio" with the following configuration:
Items:
val1|Description1
val2|Description2
Additional Attributes:
onclick="displayField();"
2. Go to the "Form Layout" tab, uncheck the "Auto Generate Layout" checkbox and put in the following code:
<script type="text/javascript">
function displayField()
{
if(document.getElementsByName('form[Radio]')[0].checked)
document.getElementById('hide').style.display="none";
if(document.getElementsByName('form[Radio]')[1].checked)
document.getElementById('hide').style.display="";
}
</script>
3. Let's suppose also that you want to hide a simple text box named "Textbox". You will have to assign an id to the "tr" tag that contains the textbox component, for example:
<tr id="hide">
<td>{Textbox:caption}</td>
<td>{Textbox:body}<div class="clr"/>{Textbox:validation}</td>
<td>{Textbox:description}</td>
<tr>
Note:
This layout code is generated when using the "Inline" layout.In this article we will describe how to auto-populate a list with items from a table of your choice.
In order to achieve this you will have to create a new "Drop-down" component, lets say "test".
In the "Items" are paste the following code:
//<code>
$items = "|Please Select[c]\n";
$rez = mysql_query("SELECT your_value,your_label FROM your_table_here");
while($r = mysql_fetch_assoc($rez))
$items .= $r['your_value'] . '|' . $r['your_label'] . "\n";
return $items;
//</code>
Note:
If you have magic quotes activated you will need to use "\\n" instead of "\n".In this article we will describe how to create a submission counter and displaying it in the "Thank you page". We will present this in a step-by-step process.
1. Edit your form, and create a new hidden field, name it "counter";
2. In the Default value, paste this code:
//<code>
return intval(@mysql_result(mysql_query("SELECT count(*) cnt FROM ".$RSadapter->tbl_rsform_submissions.""),0))+1;
//</code>
To display the result please edit your "Thank you message" and add the following:
You are submitter number: {counter:value}
In this article we will describe how to make some calculations with Dates. The following script will add a Date field with a numeric field.
The following fields will need to be created:
Field1 - text box with this code to the default value:
//<code>
return date('m/d/o');
//</code>
This snippet will return the current date. Of course you can also use the calendar to select a specific date.
Field2 - text box with "Numeric" validation rule
Field3 - hidden field
For the next step you will have to set the Field3 value with the result of the desired calculation. To achieve this just paste the following code in the "Scripts" tab, on "Scripts called on form process":
if(isset($_POST['form'])){
$_POST['form']['Field3'] = date('m/d/Y',strtotime(' +'.$_POST['form']['Field2'].' days'));
}
To display this result in the front-end just use the appropriate placeholder (eg. {Field3:value}).
In this article we will describe how to put a GIF image in a submit button. This can be particularly useful when using the upload feature, thus suggesting to the user that the file is being uploaded.
The first step is to create a hidden "div" which contains the desired GIF file. Here is an example on how it would look like:
<div id="your_div_id" style="display: none">
<img src="path/to/your.gif" />
</div>
The second step is to create a normal button (instead of the usual "Submit" button) and typing the following code to the "Additional Attributes" area:
onclick="document.getElementById('your_div_id').style.display='';formname_id.submit();"
This is the end to this simple customization that brings a nice effect to your form.
In this article we will describe how to remove the "Continue" button from the "Thank you message".
In order to do this edit the file /components/com_rsform/languages/en.php and change the line:
DEFINE('_RSFORM_FRONTEND_THANKYOU_BUTTON','<br/><input type="button" name="continue" value="Continue" onclick="%s"/>');
into:
DEFINE('_RSFORM_FRONTEND_THANKYOU_BUTTON','');
Note:
If you are using a different language file, you will have to edit the appropriate file (eg. your_language_file.php). In this article we will describe how to make a simple calculation with values from a radio group. Let suppose, for example, that we have the following components: 1. Radio group: Name: radio1 Caption: radio1 Items: 1|Description1 2|Description2 3|Description3
2. Radio group: Name: radio2 Caption: radio2 Items: 1|Description1 2|Description2 3|Description3
3. Hidden field Name: result Default Value: 0
4. Submit Button: Name: submit Label: submit Additional Attributes: onclick="calculate();"
In the "Form Layout" tab, uncheck the "Auto Generate Layout" checkbox and paste the following Javascript code at the begging of the existing layout code: function calculate() { var op1=document.getElementsByName('form[radio1]'); var op2=document.getElementsByName('form[radio2]'); var result=document.getElementById('result'); result.value=0; result.value=parseInt(result.value); for(i=0;i<op1.length;i++) if(op1[i].checked) result.value=parseInt(result.value)+parseInt(op1[i].value); for(i=0;i<op2.length;i++) if(op2[i].checked) result.value=parseInt(result.value)+parseInt(op2[i].value); alert(result.value); return false; In order to display the result of this calculation just the placeholder for the hidden field, in this case: {result:value}. This can be used in "Thank you" page as well as in any email configuration. In this article we will describe how to get the IP address of a submitting client and displaying the country which it belongs to. In order to achieve this functionality, just create a hidden field with the following code placed in the "Default Value" area.
//<code> $handle_cn = fopen("http://maychu.net/ip/name/".$_SERVER["REMOTE_ADDR"], 'r'); $country_name = fgets($handle_cn, 4096); fclose($handle_cn); return $country_name; //</code>
Let's say, for example that you named your hidden field "location". To display the calculated value in the "Thank you" page or email just use this syntax: {location:value}.
Note: Because various php configurations "fopen()" function might generate a error. In this article we describe an example on how to modify the default CSS of RSform!Pro. For example, lets say you want to adjust the border thickness of the input fields. In order to achieve this go to /components/com_rsform/front.css and insert this code at the end of the file: div.nopad input, div.nopad button { border:1px solid #333333; } Easy editing of this file can bring up a whole new look to your forms ! In this article we will describe how to implement he tracking code from Google. Conversion tracking involves placing a cookie on a user's computer when he/she clicks on an ad. Then, if the user clicks on your ad and reaches one of your conversion pages, the user's browser sends the cookie to a Google server, and a small conversion tracking image is displayed on your site. When such a match is made, Google records a successful conversion for you. This information is presented within the Campaign Summary section of the "Campaign Management" tab in your AdWords account. In order to achieve this please edit the /components/com_rsform/languages/default.php file (around line 453):
Instead of:
DEFINE('_RSFORM_FRONTEND_THANKYOU_BUTTON','<br/><input type="button" name="continue" value="Continue" onclick="%s"/>');
use:
if(isset($_GET['formId']) && $_GET['formId']==1)
DEFINE('_RSFORM_FRONTEND_THANKYOU_BUTTON','<br/><input type="button" name="continue" value="Continue" onclick="%s"/>
<script language="javascript">...your google code here...</script>
');
else
DEFINE('_RSFORM_FRONTEND_THANKYOU_BUTTON','<br/><input type="button" name="continue" value="Continue" onclick="%s"/>');
Note: Instead of "1" you should use the ID of the form you wish to enable the tracking code. In this article we are about to show you how you can record the page that user viewing before the submission of the form was made. In order to achieve this just place the following code in the "Scripts" tab, on "Scripts called on form display" area: echo $_SERVER['HTTP_REFERER']; This can also be used as a default value for a hidden field for example: //<code> return $_SERVER['HTTP_REFERER']; //</code> |
