(V5) Custom Form setup Print

What is Custom Form?

With Custom Form, you can create unlimited forms using drag and drop functionality, and then place them nearly anywhere on your website either using our Layouts Builder or shortcodes. You can even place a form as a Product Tab by checking the 'Show as Product Tab' button.

You can set up different email addresses for each form, customize email notifications for both the store owner and the client who submits a message, view records/entries to see past messages sent by clients, add between 3 types of CAPTCHAs, including Google reCAPTCHA, to any form, accept PayPal payments via a form, allow attachments, customize error messages to provide hints, and more.

Important note 1: If you want to receive email notifications, make sure to enter your email address in the "Enter admin email" field in Form Options or else you will not receive any email notifications for contact requests.

Important note 2: Custom Form forms and email notifications (i.e., your email address as entered in note 1) are not related to the default Ozcart form that is found in Store Settings > General Settings > Store: Email.

Important note 3: Make sure that your form is enabled. If its status is set to Disabled, your form will no longer appear on the front-end of your website and you will not receive any email notification.

Access Custom Form

To use Custom Form, log in to your Ozcart admin area and click on Custom Form which is found on the left menu.

Note: The setting 'Client side validation' under Integration means validation using JavaScript. Custom Form will validate the form's data on the client side before submitting it to the server.  It just gives another layer of validation along with the server side.

Important: If you choose to disable Custom Form in Design > Blocks, you will lose ALL your forms and ALL records. When you reactivate it, only the default Contact Us form will be available and will only contain the default text and configuration (no records).

View past records

Records are past entries and can be accessed by navigating to Design > Blocks > editing Custom Form and clicking on the View Records icon.
On this page, you will see all the previously visitor submitted messages for that specific form.

Not all columns are visible by default. Click the cog button at the top right of the records page, Heading Settings, select the columns that you want visible, and save the headings.
More column choices will appear when you add more fields to your form.

You can edit a record a record to modify its data (e.g., if you know a visitor entered a wrong email address).
You can view a record. Viewing a record allows you to reply to that visitor. To do so, click on the email address and the reply section will open up. Type in your message and submit it. The visitor will then receive a reply to his inbox.

Add a form as a product tab

With Custom Form, you can create a form, e.g., a contact form, and have it show up in the product tabs section on product pages, which is the section where the description and reviews tabs are.

To add a form as a product tab, read this knowledge base article.

Add CAPTCHA to a form

Follow these steps to add CAPTCHA to a form:

1. Navigate to Design > Blocks > Custom Form.
2. Enable and edit Custom Form.
3. In the 'Add new field' section, you'll see CAPTCHA. Drag and drop it to the right side, or simply click on it and then drag and drop it to your desired location.
4. In the Field Option, enter a label name or hide the label.
5. Save your form.

If you want to change the type of CAPTCHA displayed (Ozcart offers 3 types of CAPTCHAs), read this knowledge base article.

Accept PayPal payments

You can set up a form and have it accept PayPal payments. Follow these steps to do so:

1. Create or edit a form.
2. Add a new field, 'Payment' by clicking on it.
3. Save the form.
4. Once you're back in editing the form, go to the Integration tab and you'll see a new field called PayPal Email.
5. Enter your PayPal email.
6. Save the form.

Shortcodes and how to show data in a custom template

Once you have previously submitted messages as records, you can choose to display that data in a table. The system will build it automatically and all you have to do is place the shortcode on a page. You can obtain this shortcode from Custom Form's admin area in the Integration tab. This is convenient for certain businesses or nonprofits that want to display data publicly.

To show the form data/records on an information page, you will have to place the following shortcode in the text editor of that page: [customformdata id=formID limit=20][/customformdata]

You will have to substitute formID with your form ID number.

By default, the data will be shown in tabular format but you can show the data in your customized template. In that case, you will have to place your template inside the shortcode. For example:

[customformdata id=formID limit=20]YOUR_TEMPLATE[/customformdata]

You can create your template by placing Custom Form placeholders, and this allows you to get various form data.

Here's an example of a template that is made using the above placeholders, as shown in the screenshot.

[customformdata id=formID limit=20]<div>{c2.value}</div><div>{c17.value}</div><div>{c14.value}</div>[/customformdata]

To integrate a form and have it show up on any information page or elsewhere, place this shortcode [customform]FORM ID NUMBER HERE[/customform] in the text editor of that page. To enable AJAX submit, add attribute AJAX inside the shortcode, e.g., [customform ajax]FORM ID NUMBER HERE[/customform]. AJAX allows users to submit their enquiry without reloading the page.

To find the form ID, in your admin area, edit Custom Form and navigate to the 'Integration' tab. At the end of the Form URL, you'll see "formId=numberhere". Substitute "numberhere" with the actual number. That would be your form ID. You can also find it in one of the help texts in the 'Integration' tab.

How to overwrite the default contact page with Custom Form’s form?

You can follow these steps if you want to overwrite the default contact form created by Custom Form.

1. Navigate to Custom Form > Integration and check the 'Enable layout block' setting to enable it .
2. Add the following CSS code in Custom Form > Other tab in the Custom CSS section. This is required to hide the default contact form.
   <style>
   form.form-horizontal {
       display: none;
   }
   </style>
3. Navigate to Design > Theme Settings > Layouts Builder and next to 'Currently building this layout', choose the Contact layout.
4. Add your form (Block) to the Content Bottom position or your preferred position.

Custom Form regular expression for validation