{"id":6967,"date":"2016-05-03T12:59:35","date_gmt":"2016-05-03T07:29:35","guid":{"rendered":"http:\/\/convertplug.com\/?post_type=docs&p=6967"},"modified":"2019-08-27T17:12:26","modified_gmt":"2019-08-27T11:42:26","slug":"convertplug-addon-for-visual-composer","status":"publish","type":"docs","link":"https:\/\/convertplug.com\/plus\/docs\/convertplug-addon-for-visual-composer\/","title":{"rendered":"Convert Plus Addon for WPBakery Page Builder?"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]ConvertPlus<\/strong> is an easy-to-use WordPress plugin that helps you transform traffic into leads.<\/p>\n

WPBakery Page Builder<\/strong> has been a widely used page builder across the world.<\/p>\n

Therefore, we have come up with the ConvertPlus addon for WPBakery Page Builder<\/strong> that allows webmasters to build forms within a page.<\/p>\n

\n

Must have:<\/strong><\/p>\n

\u2022 ConvertPlus
\n\u2022 WPBakery Page Builder<\/p>\n

\n

For users who use ConvertPlus<\/strong> along with WPBakery Page Builder<\/strong>, we have an addon called the ConvertPlus addon for WPBakery Page Builder<\/strong><\/em> available in the Addons installer.<\/p>\n

 <\/p>\n

\"Install<\/a>Note: If you are a direct customer (bought a direct copy from us), you will have to register your copy of ConvertPlus to validate your purchase, before installing this addon.<\/strong><\/em><\/p>\n

In order to learn how to use the Addon Installer in ConvertPlus, you can refer to the article here<\/a>.<\/p>\n

\n

The following steps will help you use the ConvertPlus Addon for WPBakery Page Builder.<\/strong><\/p>\n

1. Download and install the \u201cConvertPlus Addon for WPBakery Page Builder<\/strong>“<\/em><\/p>\n

 <\/p>\n

\"Activated<\/a>2. Edit the page in the WPBakery Page Builder Editor<\/em>
\nCreate a new page or edit an existing one.<\/p>\n

 <\/p>\n

\"Create<\/a>3. Design a page as per your needs<\/em><\/p>\n

4. Add the Element and click on the ConvertPlus Addon tab<\/em><\/p>\n

 <\/p>\n

\"Convert<\/a>When you wish to add a form on a particular place on the page, you can select the element under the ConvertPlus addon tab.<\/p>\n

 <\/p>\n

\"IeBsfXh\"<\/a><\/p>\n

\n

The Elements in ConvertPlus Addon<\/strong><\/span><\/p>\n

1. Form Builder<\/strong>
\nThe basic frame that may contain all the other form elements in a structured manner.<\/p>\n

 <\/p>\n

\"IeBsfXh<\/a>The settings for a Form Builder:<\/strong><\/em>
\nSubmission Settings<\/span><\/strong><\/p>\n

\"Submission<\/a><\/p>\n

Select a Campaign<\/em><\/span>: Select the campaign you wish to store the submissions in. All the existing campaigns you created using Connects in ConvertPlus are listed in the drop down menu.<\/p>\n

Action after Successful Submission<\/em><\/span>: You can decide whether you wish to display a message or redirect the user to another page after he has filled the form successfully.<\/p>\n

If you select to display a message, you are asked to enter the message you wish to display.
\nIn case you wish to redirect the user to another page, you can specify the URL.<\/p>\n

Action after failure<\/em><\/span>: You can customize the message that will be displayed in case there are any errors or failure during submission.<\/p>\n

General Settings<\/span><\/strong><\/p>\n

\"General<\/a><\/p>\n

Select the Style<\/em><\/span>: You can select the style of the form. There are 3 styles you can choose from.<\/p>\n

Form Text Alignment<\/em><\/span>: You can set the alignment of text to either Right, Left or Center.<\/p>\n

Input Box Formatting<\/em><\/span>: You can change the background color, the border color and the font color of all the input boxes in the form. You can also define a standard font size with vertical and horizontal padding.<\/p>\n

Label Visibility<\/em><\/span>: You are given an option to enable or disable the Label visibility. You can also format the label by editing the font color and the font size.<\/p>\n

Design Settings<\/span><\/strong><\/p>\n

\"Design<\/a><\/p>\n

Border Formatting Options<\/em><\/span>: You can change the border style, color and the border radius of a form.<\/p>\n

Background Color and Image<\/em><\/span>: You can select a background color for a form or insert an image too!<\/p>\n

Note:<\/strong> The Form Builder is the most essential element that should be added<\/strong>. All the other CP Elements should be placed within the Form Builder.<\/em><\/p>\n

 <\/p>\n

\n

 <\/p>\n

2. CP Email<\/strong>
\nThis element can be used when you wish to insert an input box that is meant to accept an email address.<\/p>\n

\"CP-Email-element\"<\/a><\/p>\n

The Settings for CP Email:<\/strong><\/em>
\nGeneral Settings<\/span><\/strong><\/p>\n

\"General<\/a><\/p>\n

You can set a Field Label and enter a placeholder text that will be displayed to the user.
\nYou can also decide whether you wish to mark it as a Required field.<\/p>\n

Design Settings<\/span><\/strong><\/p>\n

\"Design<\/a><\/p>\n

You can edit the border style, the color and the radius along with the background color of the element.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

3. CP Textarea<\/strong>
\nTextarea can be used to enter a few lines of text<\/p>\n

\"CP-Textarea-element\"<\/a><\/p>\n

The Settings for CP Textarea:<\/strong><\/em>
\nGeneral Settings<\/span><\/strong><\/p>\n

\"General<\/a><\/p>\n

You can fill in the Field Label, the Field name and the placeholder text. You can also decide whether you wish to mark it as a required field.<\/p>\n

Design Settings<\/span><\/strong><\/p>\n

\"Design<\/a><\/p>\n

You can edit the border style, the color and the radius along with the background color of the element.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

4. CP Number<\/strong>
\nThe CP Number element can be used as an input box that accepts only numbers as the input value<\/p>\n

\"CP<\/a><\/p>\n

The Settings for CP Number:<\/strong><\/em>
\nThe General and Design settings of a CP Number element are same as those of CP Email or CP Textarea.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

5. CP Dropdown<\/strong>
\nYou can insert a Dropdown menu with a number of options using the CP Dropdown.<\/p>\n

\"CP<\/a><\/p>\n

The Settings for CP Dropdown:<\/strong><\/em>
\nGeneral Settings<\/span><\/strong><\/p>\n

\"General<\/a><\/p>\n

You will have to enter a Field Label, a field name and also add the choice options you wish to display in the Dropdown.
\nYou can mark this field as Required too.<\/p>\n

Design Settings<\/span><\/strong>
\nThe design settings are same as the others.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

6. CP Hidden Field<\/strong>
\nYou can create a Hidden field that will help you accept hidden data without the users knowledge.<\/p>\n

<\/a><\/p>\n

The Settings for CP Hidden Field:<\/strong><\/em>
\nGeneral Settings<\/span><\/strong><\/p>\n

<\/a><\/p>\n

You will have to enter a field name and the value you wish to take in as input through the form.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

7. CP Submit<\/strong>
\nThe submit button is the Call to Action you wish to add on a page.<\/p>\n

\"CP<\/a><\/p>\n

The Settings for CP Submit<\/strong><\/em>
\nGeneral Settings<\/span><\/strong><\/p>\n

\"General<\/a><\/p>\n

You can modify the text to be displayed on the button with the alignments and the color.
\nYou can also select a background color and style for the button.<\/p>\n

Design Settings<\/span><\/strong>
\nThe design settings are same as the others.<\/p>\n

Note:<\/strong> The CP Submit button is an important element without which the data obtained from the users will not get stored in the respective Campaign. You must include a CP Submit element in all the forms.<\/strong><\/em><\/p>\n

\n

To Conclude:<\/strong>
\nAll you need to do is, add the elements like any other Element available in WPBakery Page Builder. You can embed all the other CP elements within the Form Builder.<\/p>\n

All the data submitted data will be stored under the Campaign you have selected. (through Connects)[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content” bg_type=”bg_color” bg_override=”ex-full” el_id=”client-comments” bg_color_value=”#f6f6f6″][vc_column]

<\/div>
<\/div>

OUR CUSTOMERS ARE HAPPY<\/h2><\/div>
<\/p>\n
<\/div>\n

<\/div><\/div>