How To Configure OpenCart Form Builder In Your Website

OpenCart Advanced Form Builder is the best form builder for your online business. It offers free form creation with unlimited forms and features. You can add fields in the form and make your forms look professional. If you want to add a captcha field in your form, then OpenCart form builder module provides you with the shortcode. Once you have added the shortcode, you can use it to display the form anywhere on your website. The form records will be exported in CSV format so that you can easily manage them.

Form create

To create the form, Go to the form list page, and click on the [+] plus button located at the top right. You will land from the edit page.
Admin must enter the detail correctly in order to make the form work as expected. Please note that this module is multi-language compatible so the admin must enter the text of the language accordingly. for more detail please check the multi-language section.
The form you created will have its own page. This form is indexable. This means Google can index the form page and users can find the form page on search engine results.

1.1 Title

The title of the form. It uses to recognize the form in the form list in the admin panel.

1.2. Top Description

Admin can write the small or explanation detail about the form. It will display on top of the form. It will be very useful to give an overview of how you are going to handle the customer data or respond to the customer after getting the request.

1.3. Bottom Description

The written information will display below the form.

1.4. Button Name

Enter the text for submit button. For example, the admin can write the text “Contact Me”. And Submit button will have the text “Contact Me”.

1.5. Reset Button Name

Just like submit button. Admin can write the name of the reset button.

1.6. Popup Link Name

It will display on the product page. On the product page, the link on the text will display. Customers can click on that text to open the popup. Admin can write the representative text so that customers will be able to understand it and when to require, open the popup and submit their query.

1.7. SEO Data

Search engine optimization is an important part of a website. Write the title, meta description, and keywords. This information will be used by search engines to understand the purpose of the form.
Meta Title
Meta Keyword
Meta Description

2. SETTING TAB

Admin can enable captcha, header-footer, assign product, and more.

2.1. Show Captcha

Google Recaptcha and basic captcha are both supported. To enable the captcha to follow the below step.

2.1.1 OpenCart Verison 3x

Click on the extensions menu.
Select Captcha in extension type
Edit the Google re-captcha
Admin can enter the site key/secret key for your domain. Save the setting.

Note: If you do not have this information, please follow the Google ReCaptcha documentation to obtain the keys.

2.2. Show Reset Button

Select “YES” to show the reset Button on the form. “No” will hide the button

2.3. Product

Select the product where you want to display the form.

2.4. Base Price

Enter the base price of the product. The price without any option price.

2.5. Show and Hide Header, Footer

Check the header and footer to display on the form.

2.6. Product image size.

When the form popup opened. The product name and image are displayed on top of the form. This has been designed to give acknowledgment to customers for which product they are going to enter the form. Enter the size of width and height in pixels. OpenCart form builder extension will automatically resize the product image according to width and height.

2.7. Status

Mark the status “enable” to display the form on the website. If you want to hide the form or form is no longer in use. Select the disabled in status.

3. Form Fields

Admin can configure the fields for the form. Add and delete the form fields. OpenCart form builder module accepts all the default form fields of OpenCart. For multi-language sites, language tabs will create, and the admin must configure the fields for each active language.

3.1. Field Name

It is the label of the field.

3.2. Help Text

After the label, a question mark icon will appear. Customers can hover over the question mark icon to read why this field should be a field and what data it accepts.

3.3. Placeholder

Text will display inside the input fields.

3.4. Error Message

When a customer forgot or wrote the wrong value for the field then this error message will display the fields below.

3.5. Status

Decide either the field should display on the form or not.

3.6. Required

Markt the field import and must be filed. The form won’t be submitted when the field is not

3.7. Sort Order

Position of the field in the form. It accepts “integer” only.

3.8. Type

Select the field type. There are 16 default OpenCart fields present in the list. Just select the one and it will display on the form. For example, if you want your customer to enter the information in a single line, select TextBox, If they upload the file, then select the file field. If there are multiple choices, go with the checkbox or radio button, and so on.
If you go with the Radio or checkbox or select type, Then you can enter their option values.
The Option value consists of
3.8.1. Option Value Name
3.8.2. Image
3.8.3. Price +/- decimal supports
3.8.4. Sort Order

4. Link

It let the admin restrict the form access and visibility of the form. Set the condition when the form is accessible to whom. Assign the product category, manufacturer, and more.

4.1. Display Type

Admin can set the visibility condition of the form. It will restrict access to the form. Decide form should visible to guests, customers, or all. Selecting the Guest will hide the form to logged-in customers and vice versa for customers. If you selected All, then the form will display to all guests and logged-in customers.

4.2. Customer Group

This setting is only applicable when display type All or customer is selected. It does not work with Guest display type.
All the customer groups will display with a checkbox. OpenCart form builder extension will automatically check the customer’s account customer group and display the form to only those customers whose customer group matched.

4.3. Store

OpenCart allows multi-store. Only selected stores will display the form.

4.4. Assign Product

Write the initial or full name of the product. Products will display in the list. The selected Product’s page will have an extra button for the form popup. For Button text, please general setting above.

4.5. Categories

If the admin wants to assign the form to all the products of a specific category instead of selecting the products manually.

4.6. Manufacturer

OpenCart popup form module will check the products and add the form popup button to those products that are linked with the same manufacturer.

4.7. Information

The form will automatically be added to selected pages. The form will display below the content of the page. only those information pages will be present in the list whose status is enabled.

NOTE: After doing the setting, you or others might not be able to see the form on the product page. If this is the case, please make sure all the condition set in the Link tab is matched or not.

5. Notification

After the form submit. A confirmation email will be sent to those who submitted the form and the website admin. OpenCart form builder module gives you the option to edit or create your own email template. Follow the steps

5.1. Customer and Admin

Select the tab for which you are going to edit the email template

5.2. Notification

Yes: Email will send
NO: don’t send email

5.3. Subject

Email subject line

5.4. Message: Email Content

A WYSIWYG editor is given in the message field so that the admin can write the email template in simple text or Html format.
Add the shortcode “{formrecord}” in the message to include all the fields and the data of the form.

NOTE: Steps are the same for customer and admin email templates.

6. Success Page

A success page will show after the form is submitted successfully. They will automatically redirect this page. Admin can enter the Meta title, and title and, write the content of the page in the multi-language. It can increase trust and hence can improve the order percentage in the graph. You can use one page checkout in your OpenCart store too

7. SEO:

Write the keyword without space. If you need space then write (-) hyphen instead of space. It will use for the form page url. For example, if your form is about appointment booking then you can write appointment booking. The form page will be yourwebsite.com/appointment-booking.

By default, OpenCart will create its own link with some id with the module name, and this is not good for SEO and hard to remember the url of the page.

8. Custom Style

This is an additional setting. Admin can write the CSS (Cascading Style Sheet) code to improve the existing design of the form. Or change the entire design of the form.
Only for experienced developers otherwise, the design of the form may break in mobile or desktop versions. Use this feature with caution

9. Clone The Existing Form

Admin can clone the existing forms. The new form will have the same fields and setting as the one it was cloned before. Any record of the existing form will not inherit the newly created form. Different unique IDs will assign to each new form. It is ready to accept the customer request on your website.
Follow the steps

1. Navigate to the Extension Menu
2. Click on TMD Form builder
3. Here you will see a list of forms. You can select the form by clicking on the checkbox present on the left side of each form’s name
4. Now click on the clone button located at the top right.
5. It will take a few seconds. You will see the success message and new form created and appear in the list.
6. Admin can edit the form. Also, copy the embed code to display the form on the website.

10. Form List

All the created form lists will be available. It will have the form title, url of the form page, status, and action buttons.

10.1. Embed Code

It is auto-generated by OpenCart form builder extension and the form id is unique. Copy this code and paste where you want to show the form popup button. The embed code can be pasted into the editor from the admin panel.
OpenCart form builder module will change the code into a form button. And when the customer/user clicks on the button then the form will show in the popup.

10.2. Edit

Admin can edit the existing form by clicking on the edit button.

10.3. URL of Form Page

Want to see how the form will look and test it. Admin can open the form on its page by clicking on the form url. It will bring you to the page containing the form. Admin can check the form and do the test.

10.4. Download

Export all form submission records of specific forms in CSV format. The exported CSV file will have all the fields of the form and customer information. For detail view

10.5. View Individual Form Records

Admin can check the individual form submission data by clicking on the view button. It will redirect you to the website record list page. Here you can view and delete each record manually.
This page contains an overview of record data. Each record can be viewed in detail. Just click on the “eye” button.

11. Multi-language Enabled

It is important to have a multi-language website when your business is booming. You can add all the representative text in all the active languages on your ecommerce website. Language name + country flag will be shown in tab. Admin must write the text in the same language.

When the customer changes the langauge of the website to another language, the form text will change to the selected language.

TMD OpenCart form builder extension is working perfectly with all available themes. You can check our latest OpenCart themes list.

You can visit our official site for more OpenCart modules and themes. Or you can buy this OpenCart form builder extension from OpenCart website

If you have any sale-related questions or looking for support. Please create a  support ticket. Our team will assist you.