Plugin Company brings merchants its extensively useful plugin enabling them to create unlimited custom contact forms without any coding skills. The Custom Contact Forms extension provides Magento online stores with an essential solution for building advanced contact forms using simple drag-and-drop form builder, big selection of form components, and a wide choice of Bootstrap frontend themes.
Table of contents
Key features of the Custom Contact Forms plugin
- Easy-to-use drag-and-drop form builder
The extension’s form builder makes it easy for merchants to create advanced contact forms. To build a contact form, you will just need to select a form component and drop in any area in the form builder interface. Selection of form components includes various input fields, radios and checkboxes, date and time pickers, a file upload option, several text elements, and more. You can also separate your contact form into multiple sections and columns.
- Wide choice of design and display options
The plugin allows adding various form components and combining them with one of the beautiful frontend themes to quickly create any type of contact form.
- Amazing Bootstrap-powered frontend themes
The Custom Contact Forms extension provides 18 Bootstrap themes and six form wrapper styles. The forms created with the plugin are fully responsive so that they will look great on any device. Moreover, these contact forms are AJAX-based, so users won’t have to reload a page after a form is submitted.
- User-friendly contact form widgets
Contact forms frontend URLs can be automatically created, as well as customized to be embedded in different website pages or blocks using extension’s contact form widget. You can also use the widget to build your form as a smooth lightbox pop-up, or a slide-out form.
- Auto-completed and pre-filled forms
With the extension, you can automatically pre-fill contact forms with variables related to customer or product details.
- Dynamic forms with conditional fields
Dynamic form feature enables users to create contact forms with conditional form fields. With this feature, it is possible to make any form field dependent on specific conditions.
- Integrated form validation and spam protection
The extension uses form validation function for input fields to ensure that the information submitted with a contact form is always correct. Moreover, the plugin has integration with Google ReCaptcha and Visual Captcha to protect online stores from spam and abuse.
- Fully customizable email notifications
The extension includes comprehensive email notification system with customer and admin notification settings. With this feature, customers and admins will be notified when a new contact form is submitted.
- Backend form submission management
The Custom Contact Forms plugin also allows viewing and managing form submissions data from the Admin Panel, including a copy of the admin and customer notifications. To enhance form submission management, merchants can modify the status of each submitted form and assign ID prefixes for every form.
Custom Contact Forms is an easy-to-use plugin, allowing anyone to build advanced contact forms without coding skills required. Here we will describe how to create and configure your custom contact form from the backend.
To start configuring your contact form, first, go to Content → Contact Forms → Configuration. You will see Plugin Company’s Contact Forms menu on the page.
You can also configure the extension per store view using the drop-down menu at the top left corner of the page.
Configuration page allows modifying General Settings and Default Notification Settings.
If you want to show breadcrumbs navigation on a contact form page, select Yes in a drop-down menu of the “Enable breadcrumbs” setting. To create a new page in the frontend for every contact form, select Yes in the “Create front-end URLs”. This can also be defined for every contact form separately in the Form Settings. “Default URL prefix” and “Default URL suffix” are optional fields. ReCaptcha settings help to protect your website from spammers. To use this feature, first, you should get your ReCaptcha API keys from Google, and then enter them in the form.
With the Custom Contact Forms extension, a new frontend URL for each form can be automatically created. If you want to create an URL key for a contact form, go to Content → Contact Forms → Manage Forms, click on “Add New Form”, and scroll down to the Form Settings.
Here you can specify a form name for admin reference, URL key of your contact form, and a custom ID prefix to use it as a reference for form submissions saved in the backend. To enable form submissions saving in the backend, choose Yes in “Save form submissions”. Then enable the form and click “Save Form” in the top right corner of the page. After this, the extension will generate an URL which you will see in the “Front-end URLs” field.
If you navigate to Content → Contact Forms → Form Submissions, you will be able to view and manage all the form submissions details in the Admin Panel, as well as export form submissions data to a CSV or Excel file.
Now let’s move on to the Notification Settings to configure default customer and admin notification settings.
If you enable customer or admin notifications, customers or admin users will be notified when a new contact form has been submitted. In the default settings, you can specify notification recipients’ emails, sender’s name and email, and notification subject. Customer and admin notifications can be customized for each form separately. These settings are available in the “Customer Notification” and “Admin Notification” tabs. You will find these tabs in the New Form interface.
The Admin Notification tab includes conditional email recipient option, which can be used to send a copy of the admin notification to the specified emails on condition that a specific form field value is submitted.
Using the “Match Type” menu you can choose, whether the form field submission should exactly (“Exact Match” option) or partially (“Partial Match” option) match a predefined value.
Email notifications, both for admin and customer, support custom variables that can be used to include form submission data in the notifications automatically.
To create a new contact form, navigate to Content → Contact Forms → Manage Forms, and click on “Add New Form” in the top right corner. The extension allows creating an unlimited amount of custom forms.
The Custom Contact Forms plugin’s easy-to-use drag-and-drop builder allows creating advanced contact forms with no hassle. To create your form just add and move form fields from the Form Components area to the Contact Form area on the left. Then you can easily configure content and settings of each form field in a handy pop-over.
With a wide choice of form components listed (in the tabs “Input”, “Select”, “Options”, “Other”, “Text”), you can build your contact form depending on your needs. By going to the “Other” tab, you can create a multi-page form by moving a form page component to any place in your contact form, dividing it into multiple pages or tabs.
Similar to multi-page contact forms, you can also build forms divided into multiple sections and columns. By dividing your forms into various sections and columns, you can set your contact form layout and place related form fields next to each other.
The extension also allows building advanced contact forms with conditional form fields that appear dynamically on the frontend based on the user’s input.
We have already explained how to create new frontend pages for a contact form in the Form Settings. The Custom Contact Forms plugin also allows you to embed forms in pages and blocks using custom contact form widget. To place your contact form in other areas of your website, navigate to Content → Elements → Pages, Content → Elements → Blocks, or Content → Elements → Widgets (“Widgets” allow adding contact forms to a specific section of a page layout).
You can choose to display a widget form as a regular form, a pop-up, or a slide-out form, and then configure it in the Widget Options. Below is an example of the settings for a pop-up form.
In the Front-end Style tab, you can customize your form choosing from 18 Bootstrap themes, 6 form wrapper styles, and lots of other designs and display options. Custom CSS can also be used to style form fields.
As already mentioned, Custom Contact Forms provide you with a selection from 18 beautiful Bootstrap themes, six form wrappers, and hundreds of design options to create the look and feel of your store on the frontend as you like it.
Below are a few examples of how contact forms, created using different themes and styles, might look on the frontend.
- Flatly theme
- Cyborg theme
- Amelia theme
- Superhero theme
Auto-generated contact form page looks like this:
To customize your contact form, you can add a popup form link or button anywhere in your frontend store, or use special sidebar block included in the contact form widgets.
Here is an example of a contact form built using a sidebar widget and a pop-up form:
You can also create fancy slide-out forms appearing from the side or bottom of the screen to make your website look more appealing.
The extension allows building fully responsive multi-page and multi-column contact forms.
Example of a multi-page form:
Example of a multi-column form:
With the extension, you can also build advanced forms with conditional form fields, allowing to add form components that appear dynamically on the frontend based on the preset conditions.
For extended spam protection, the extension is integrated with Google reCaptcha and Visual Captcha functionality.
Price of the Custom Contact Forms extension
You can purchase the Custom Contact Forms extension for the price of $119. The extension package includes extensive user manuals, full service, and free support. With the purchase, you will also get instant access to free plugin updates and bug fixes during one year. Plugin Company also ensures a money-back guarantee for 30 days.