Get the answers to the common questions of our users.
Detailed description of each particularity of the CP Contact Form with PayPal.
Technical articles with many tips and tricks about the use of CP Contact Form with PayPal.
Contact Us if the answer is not in the rest of documentation sources.
Installation Instructions:
Note: The above is a safe process, the plugin's data and settings won't be lost during the process and will appear again after you install the pro version.
Alternative Installation Method:
Upgrade Instructions:
The upgrade instructions are exactly the same instructions mentioned above but be sure to make a backup copy of your current files if you have made custom modifications to the files or translations since the files will be overwritten.
After upgrading the plugin remember to clear your browser's cache.
Use the "Page Break" field on the form builder to indicate the new pages on the form.
The Date control allows to define two types of initial dates, a static date, for example 03/24/2015, or a relative date depending of the current date, for example 3 days after today.
The static dates are very easy to define: select the date field in the form, and type the date string in any of the attributes: "Predefined Value", or "Default Date",for the static dates, any of attributes can be used interchangeably.
The case of relative dates is a little more restrictive, the rules must be typed in the "Default date" attribute, and should comply any of formats:
Number: will be considered a number of days from today. For example, the number 2 represent two days from today, and the number -1 represent yesterday.
String: A smart text indicating a relative date. Relative dates must contain a pair of value(number) and period; valid periods are "y" representing years, "m" representing months, "w" represents weeks, and "d" represents days. For example "+1m +7d" indicates one month and seven days from today.
The following steps describe how to use the French language in the datepicker, but it is possible to translate the months and days names into another language:
Create a new file in the text editor your choice.
Paste the following code in the file.
jQuery(function($){
$.datepicker.regional['fr'] = { closeText: 'Fermer', prevText: '<Préc', nextText: 'Suiv>', currentText: 'Courant', monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'], monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun', 'Jul','Aoû','Sep','Oct','Nov','Déc'], dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'], dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'], dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'], weekHeader: 'Sm', dateFormat: 'dd/mm/yy', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ''}; $.datepicker.setDefaults($.datepicker.regional['fr']); });
Finally, store the new file in the "/wp-content/plugins/cp-contact-form-with--paypal/js/fields-public", with the name you prefer, but with "js" as the file's extension, for example: datepicker_fr.js
The choices of Radio Buttons, and Checkboxes controls, are formed by two input fields, the input field for choice value, and the input field for the text. An IMG tag should be entered in the input field for the choice text, with an absolute URL in the src attribute:
<IMG src="http://..." >
The summary uses two specific class names: cff-summary-title, and cff-summary-value, for the fields labels, and fields values respectively; you only should define both classes in any of css files loaded by your website:
.cff-summary-title{}
.and cff-summary-value{}
These styles will be applied to all summary fields in your form, but what to do if you want to change the styles for only one summary field? The summary field includes two attributes: "Classname for fields titles", and "Classname for fields values", you can enter, through these attributes, the class names you want applied to the labels and values of the fields displayed in a specific summary field, using particular class names for each summary control, allows to show summary fields with different designs.
The form builder does not include a field to insert links explicitly in the form, but you can insert a link through an "Instruct. Text" field. Simply insert an "Instruct. Text" field in the form, and then, enter the tag of the link in any of the field's attributes: "Field Label", or "Instructions for User". For example, to insert a link to our website, you should enter the following tag:
<a href="https://wordpress.dwbooster.com">Visit the website</a>
The controls with access to database are available only in the Developer and Platinum versions of the plugin
This is a step by step about the use of datasource controls
There are different datasources: Database, CSV file, Post Type, Taxonomy, and User Data.
Note: Depending on control selected, all available datasources will be available, or not.
So, suppose we want to populate the field with the data stored in a database table.
Note: If the database is the same as used by WordPress, leave the fields above empty.
Now it's time to define the query to database
If your query is very complex, and you prefer to create it manually; select the option "Custom Query", but in this case you should type all the query. Pay attention because you should use alias in the "SELECT" clause, to indicate the column used to get the values, and the column used to get the texts. For example, a hypothetical query:
SELECT column1 AS value, column2 AS text FROM tablename WHERE column3 > 5 ORDER BY column2 ASC LIMIT 5
To modify the whole styles of the form fields and labels, add the needed styles into the "Customization area >> Add Custom Styles" (at the bottom of the page that contains the list of forms):
#fbuilder, #fbuilder label,
#fbuilder span { color: #00f; }
#fbuilder input[type=text],
#fbuilder textarea,
#fbuilder select {
border: 2px solid #00f;
}
#fbuilder .pbSubmit { color: #00f; font-weight: bold; }
#fbuilder .section_breaks .section_break { border:0px; } #fbuilder .section_breaks label { font-size:18px; } #fbuilder .section_breaks span { font-size:14px; }
#fbuilder .comment_area label { font-size:18px; } #fbuilder .comment_area span { font-size:14px; }
#fbuilder .pbNext,#fbuilder .pbPrevious {color: #00f;font-weight: bold;}
#fbuilder .fform h1 {font-size:32px;} #fbuilder .fform span {font-size:16px;}
#fbuilder label .r {color:#f00;}
.uh_phone .l {display:none;}
#fbuilder .dformat {display:none;}
On the other hand to modify only a specific field into the form:
.specialclass label {color: #00f;}
.specialclass input[type=text],
.specialclass textarea,
.specialclass select {border: 2px solid #00f;}
The class names are assigned to the fields through the attribute: "Add Css Layout Keywords". If you need assign multiple class names to a field, you only should enter the class names separated by space characters. For example: myclass1 myclass2
To replace the submit button with an image/icon use the following style (replace the image URL with your own image URL):
.pbSubmit{
background-image:url(https://cfpaypal.dwbooster.com/images/logo.png);
color:transparent;
}
Add the needed styles into the “Customization area >> Add Custom Styles” (at the bottom of the page that contains the list of forms).
The Up/Down arrows are included by the WebKit browsers (Safari and Chrome ), and Firefox, in the input tags with type="number". To turn off the appearance by default of number fields in WebKit and Firefox browsers you simply should paste the following styles definition in any of CSS files of your website:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number]{-moz-appearance: textfield;}
Into the form editor click a field and into its settings there is one field named "Add Css Layout Keywords". Into that field you can put the name of a CSS class that will be applied to the field.
There are some pre-defined CSS classes to use align two, three or four fields into the same line. The CSS classes are named:
For example if you want to put two fields into the same line then specify for both fields the class name "column2".
There is another way to display multiple fields in a row. Insert a container field in the form: DIV or FIELDSET, and select the number of columns through the attribute: "Columns". In this case all fields inserted into the container are displayed distributed in columns.
But, what happen if you want create 6, 8, 12 or 14 columns? The answer is simple, use the container controls ( the DIV field ). If you want create 6 columns, a way to do it would be insert two DIV container, and assign to each of them the class name: column2, finally you should insert three fields in each of containers and assign to all of them the class name column3. You will have inserted 6 columns. Following this method you can create as many columns as you want.
You should use a custom class name. All fields include the attribute "Add Css Layout Keywords", you only should enter through this attribute a custom class name (the class name you prefer), for example myclass, and then define the new class into the "Customization area >> Add Custom Styles" (at the bottom of the page that contains the list of forms).
.myclass{ display:none; }
If you are using the latest version of the plugin, please enter in the "Add Css Layout Keywords" attribute, the class name: hide, included in the plugin's distribution.
Into the form builder in the administration area, click the "Form Settings" tab. That area is for editing the form title and header text.
It can be used also for different alignment of the field labels.
The Developer and Platinum versions of the plugin include multiple templates that can be assigned to the Forms to display a predefined design: Default template, Letter template, Professional, Natural, Elegant, Decorative and Clean Design.
Each template is stored in its own directory, in the "templates" folder ( "/wp-content/plugins/cp-contact-form-with--paypal/templates"). Basically the templates are formed by a CSS file ( style.css ). If you want change the appearance of a predefined template, you simply should modify the style.css file corresponding to the template. The directories of each template are:
At the end of the file "cp_contactformpp_public_int.inc.php" replace this:
<?php _e($button_label); ?>
... by this:
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" />
You may also want to change the background color of the button with the CSS style class="pbSubmit".
To hide the "### ### ####" add this CSS rule into the "Customization area >> Add Custom Styles" (at the bottom of the page that contains the list of calendars):
.uh_phone .l{display:none}
There is a tag named <%INFO%> that is replaced with all the information posted from the form, however you can use also optional tags for specific fields into the form.
For doing that, click the desired field into the form builder and in the settings box for that field there is a read-only setting named "Field tag for the message (optional):". Copy & paste that tag into the message text and after the form submission that tag will be replaced with the text entered in the form field.
The tags have this structure (example): <%fieldname1%>, <%fieldname2%>, <%fieldname3%>, ...
Other tags supported are:
Use the tag <%itemnumber%> into the email content. That tag will be replaced by the PayPal item number.
The uploaded file is attached to the email and in addition to that you can include a link to it by adding a specific field tag into the email message.
In the form builder select/click the upload field for that field, there is a read-only setting named "Field tag for the message (optional):" that shows the field tag for the "uploaded file name", for example: <%fieldname7%>. If that is the tag for your file field then copy and paste that tag into the email message, adding the postfix _url, example: <%fieldname7_url%>.
If you want send an image in the notification emails, like a header, you should insert an IMG tag in the "Message" attribute of form settings, with an absolute URL in the SRC attribute of IMG tag:
<IMG src="http://..." >
If you are using the HTML format in the notification emails, you should insert the BR tags for the changes of lines in the emails content:
<BR />
First, you should activate the WooCommerce Addon in the settings page of the plugin: "Settings/CP Contact Form with PayPal".
Go to the settings page of the plugin tick the choice "WooCommerce", and press the "Activate/Deactivate Addons" button.
Second, create the form as usual, including the price settings if needed.
Third, After create the form, is time to edit the product in WooCommerce. The addon has included a new section in the product's settings (the section: "CP Contact Form with PayPal"), that allows:
1. Associate the form with the product, enter the form ID through the "Enter the ID of the form" attribute. The form's id is the number in front to the form, in the list of forms on the settings page of the plugin.
2. If you want get the final price of product through the form, check the option: "Calculate the product price through the form".
3. Define a minimum price for products, to avoid selling the products to a lower price than allowed.
Finally, be sure the product in WooCommerce has defined a "Regular price", because in other case, WooCommerce won't display the "Add to cart" button in the public page
The Metabox in the products page includes a section to define the summary to display in the shopping cart.
You simply should: active the summary, enter a title for the summary, and defines the summary, it is possible to use all special tags supported in the notification emails, and the thank you page.
The developer version of the plugin includes the Webhook addon that allows integrate the forms with the Zapier service. The Zapier service connects two apps (the trigger apps with the action apps).
To export the submitted files to Dropbox follow the steps below:
Each time a file is uploaded through your form, the file is uploaded to the Dropbox account too.
The developer version of the plugin includes the Webhook addon that allows integrate the forms with the Zapier service. The Zapier service connects two apps (the trigger apps with the action apps).
To generate a PDF file with the information submitted through a form, and send an email with the file attached, to the email address entered by the user, it is possible using the WebMerge app in Zapier.
The WebMerge service allows upload an fillable PDF file, or a file of Microsoft Word, Excel, or Power Point, to be used as template, or generate a online document, and merge these files with the information received from the website (in this case, from Zapier).
The WebMerge service allows define many destinations for the merged file, one of them is send the file generated as attachment to the email address entered by the user (there are many other possible destinations)
Simply follow the process below:
That's all, each time the form is submitted, a new PDF file is generated in the WebMerge service, and sent as attachment to the user email.
Zapier is a service that allows to connect two apps. You should use webhook as the trigger app, and activate the addon in the developer version of the plugin for sharing the submitted information with another apps, like: DropBox, Google Drive, etc.
Is possible connecting a file field with multiple selection, with another apps like DropBox? The answer is yes.
For each file field, the plugin shares the variable fieldname#_urls, through the webhook. The new variable include URLs of files, uploaded from the fieldname# field, separated by the comma symbol. If the new variable is selected through Zapier, Zapier is able to share the files with the action app.
In the "throubleshoot area" (located below the list of forms in the settings area) change the "Script load method" from "Classic" to "Direct".
Use the "throubleshoot area" to change the character encoding. If you want to do that manually then please change the encoding of the database table "wp_cp_contact_form_paypal_settings" to utf-8. You can do that from the PHPMyAdmin or the tool that you are using to access the database. After changing the encoding, edit again the calculator form to re-enter the characters that aren't being correctly displayed.
The free version must be deleted before installing the pro version.
If you are upgrading the pro version to a new version you should also remove the previously installed version.
This is a safe step, the plugin's data and settings won't be lost during the process.
Another alternative is to overwrite the plugin files through a FTP connection. This is also a safe step.
Important: Note that if you are testing it in a localhost site the PayPal IPN notification won't reach to your website. To test the PayPal integration your website must be accesible in an online location and without a "under construction" page on the public website.
Please check if the payment is marked as "Pending" on either the PayPal account of the seller or the buyer.
If the payment is "pending" PayPal won't send the IPN notification to the website to mark the payment as completed. A pending payment means that the transaction hasn't been completed and can be cancelled by the buyer.
The payment may be pending for one of the following reasons:
Please check if the messages are marked as "paid" or "not paid" in the messages page.
If the messages are marked as paid then the problem is that your WordPress isn't delivering the emails. You should setup the WordPress to deliver the emails according to your mail server settings. You may have to ask to your web hosting support about the requirements to send emails from WordPress/PHP with their hosting service.
On the other hand if the messages aren't marked as "paid" then the PayPal IPN connection isn't being received, in this case check if the payment appears marked as "completed" in the "seller PayPal account" . Note also that you should test this feature into an online website (local websites cannot receive PayPal IPN connections).
In all cases please check the "from" email address used in the settings. Note that if you use a "from" email from a public email service like "@hotmail.com", "@aol.com", "@outlook.com", "@gmail.com", ... it will be filtered by most antispam systems since the email will be identified as "not originated at the expected server", so try using a "from" address that belongs to the website domain.
Into the plugin settings select the option "Process refunds through this plugin?" as "Yes". In addition to that you have to indicate the PayPal (NVP) - API UserName, Password and Signature.
When done to refund a payment just use the refund button that appears for each transaction in the settings area.
Yes, both plugins are compatible, but you should configure the plugins, following the steps below:
Yes, both plugins are compatible, but you should configure the plugins if the option "Load JavaScript defered" in WP Rocket is enabled.
The option "Load JavaScript defered" breaks some scripts in the plugin, so in that case the options are to disable the option "Load JavaScript defered" or to exclude the page that contains the plugin form from the WP Rocket Cache.
For info about excluding pages from the WP Rocket cache you can check the following page:
https://docs.wp-rocket.me/article/54-exclude-pages-from-the-cache