MAGENTO CONTACT FORM

HOW TO CREATE DYNAMIC CONTACT FORM IN MAGENTO?Create a Dynamic Contact Form using Magento Custom Contact Forms extensionTutorial

WHAT IS DYNAMIC CONTACT FORM?

Magento Dynamic Contact Form is contactform with dependent fields that only appearon the front-end under certain conditions.

The condition on which a dependent formfield should be shown could be a certainvalue in form field X or a selected option inform field Y.

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

Dynamic contact form functionality is a great addition to theCustom Contact Forms extension for Magento, which enables usersto create advanced contact forms with its simple drag & drop formbuilder.

Using the Custom Contact Forms Extension by Plugin Company, youwill be able to make any of the custom contact form fieldsdependent, without any coding skills required!

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

WHAT IS DYNAMIC CONTACT FORM?

This e-book will explain how to easily create a dynamic contact formwith conditional form fields using Magento Custom Contact Formextension.

If you'd like to personally experience how easy it really is to createconditional contact forms check out our Custom Contact Forms livedemo.

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

BEFORE WE START

SHOW ME THE CUSTOM CONTACT FORMS DEMO

https://plugin.company

CREATING A CUSTOM CONTACT FORM FOR MAGENTO

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

CREATING A CUSTOM CONTACT FORM FOR MAGENTO

To create a new contact form, navigate to

CMS Contact Forms Manage Contact Forms

in the top Admin Panel Menu and click the 'Add Form' button.

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

This will open the Form Settings tab, where you can configure thegeneral settings of the form, including the form name and front-endURL settings. Besides that you can choose to save the formsubmissions in the back-end, allowing you to export submitted formdata to CSV or Excel.

CREATING A CUSTOM CONTACT FORM FOR MAGENTO

Form Settings Tab

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

CREATING A CUSTOM CONTACT FORM FOR MAGENTO

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

If you choose to automatically create a front-end page for thecontact form, you can find the form URL(s) in the bottom section ofthe Form Settings tab after saving the contact form.

These can be used as quick-view links to check the changes made toyour contact form on the front-end.

CREATING A CUSTOM CONTACT FORM FOR MAGENTO

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

Now open the Form Builder tab to build up your form by simplydragging and dropping the desired form components into theContact Form area.

Form Builder Tab Drag & Drop Form Builder

CREATING A CUSTOM CONTACT FORM FOR MAGENTO

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

For our dynamic contact form example we have created a form thatincludes various input and selection fields enabling customers toselect their:

[1] Account type[2] Preferred contact method & [3] Enter additional question details.

Check example in the next few slides.

How to create Dynamic Contact Form in Magento?

2

1

3

This is what the custom contact form example would look like on the back-end.

BACK-END VIEW

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

This is what the custom contactform example above would looklike on the front-end, using theCerulean theme in combinationwith the Well wrapper

You can find more informationabout configuring the contactform front-end style here

FRONT-END VIEW

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

FRONT-END VIEW

Because some form fields are only relevant under certainconditions, we will make them appear dynamically on the front-end by configuring conditional form fields in the next step.

Before saving the contact form, make sure that each form fieldhas a unique ID, which can be entered when customizing theform components.

This is not only important for setting up conditional form fields,but also to correctly display contact form submissions in the back-end and in the customer/admin e-mail notifications.

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

https://plugin.company

CREATINGCONDITIONAL FORM FIELDS

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

CREATING CONDITIONAL FORM FIELDS

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

After saving your custom contact form, open the Conditional FormFields tab to make any of the added form fields dependent. Selectthe field you would like to display dynamically from the drop-downmenu, which shows all fields included in the contact form sorted bytheir ID, then click 'Add Field'.

* The values wrapped in brackets below are the form field IDs usedin our example form (see slide 11). The descriptions in bold arethe label texts of the form fields.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

EXAMPLE

In this case we will make the Account type [account-type] drop-down menu conditional, which includes the options 'Private SalesMember', 'Retailer' and 'Wholesale'. We only want to show thisfield under the condition that 'Yes' is selected from the I have anaccount [account] radio buttons.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

Click the 'Add condition' button to add a new form field condition. Now you canselect the form field and its values that are required to display the conditional formfield, in this example the form field with ID 'account' that equals the value 'Yes'.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

You can add as many conditions per form field as you want byclicking 'Add conditions' and create more conditional form fieldswith the 'Add Field' button. Following the same method asdescribed in the previous slides , we will make the following formfields conditional as well:

[1] The Phone number [phone-number]

[2] The Subject [subject]

[3] The Order number [order-number]

[4] The Order date [order-date]

[5] The RMA number [rma]

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

The Phone number [phone-number] input field should be shown on condition that atleast the option 'Phone' is selected from the Contact me by [contact-method] check-boxes. Because check-boxes allow multiple selections, the Phone number input field willalso appear if both 'Phone' AND 'E-mail' are selected on the front-end.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

The Subject [subject] drop-down menu should be shown on conditionthat 'Customer Service' is selected from the Question for [department]drop-down.

This means that if 'Sales' is selected instead of 'Customer Service', theSubject drop-down won't be displayed on the front-end.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

The Order number [order-number] input field should be shown oncondition that at least one of the following values are selected from theSubject [subject] drop-down: 'Billing', 'Shipping & Delivery' or 'Warranty &Returns'.

Because the Subject field is a list box, multiple selection are possible andany combination of the fore-mentioned options will trigger the Ordernumber field.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

The Order date [order-date] picker should be shown on condition that atleast 'Shipping & Delivery' is selected from the Subject [subject] drop-down.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

The RMA number [rma] input field should be shown on condition that atleast 'Warranty & Returns' is selected from the Subject [subject] drop-down.

CREATING CONDITIONAL FORM FIELDS

GET IT NOW

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

The conditions exemplified in the previous slides are configured to equal aspecific value or include at least one of the listed values.

It's also possible to create conditions that DON'T equal a specific value, includeALL of the listed values or that match a specific regular expression.

When the dependent form field is a selection field, such as radio buttons, check-boxes, a drop-down menu or a list box, the conditional values can be selectedfrom the drop-down menu on the right. With regular input fields you canmanually enter conditional value(s) as a text.

https://plugin.company

USING DYNAMIC CONTACT FORMS IN MAGENTO

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

After adding the conditionalfields to our example contactform, it will look like this onthe front-end when openingthe contact form page

FRONT-END VIEW

USING DYNAMIC CONTACT FORMS IN MAGENTO

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

START BUILDING YOUR FIRST FORM IN MINUTES

The contact form will dynamicallyshow the conditional form fieldsdepending on the customer'sinput.

The example submission iscompleted in a way to show allconditional fields, which areAccount Type, Phone Number,Subject, Order Number and RMANumber

FRONT-END VIEW

USING DYNAMIC CONTACT FORMS IN MAGENTO

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

START NOW

ORDER NOW AND START BUILDING YOUR FIRST FORM IN MINUTES!

This tutorial has shown how easy it is to create conditional forms for Magento using our Custom Contact Forms extension, which shows dependent form fields dynamically based on the customer's input.

The conditional form used in this tutorial is just a simple example showcasing some of the possibilities for creating your ownDynamic Contact Form for Magento.

Don't forget to check out our Magento Custom Contact Forms live demo if you'd like to build your own conditional form or view the example form in our demo store!

From Our BlogCustomizing the Magento Contact Form, Part 1: Content & DesignCustomizing the Magento Contact Form, Part 2: E-mail NotificationsCustomizing the Magento Contact Form, Part 3: Front-end Display10 Great Custom Contact Form Examples for Magento

SUMMARY

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

FRONT-END FEATURES

18 beautiful Bootstrap themes and 100s of design options

Fully responsive and 100% AJAX-based front-end design

Integrated form validation & captcha spam protection

Create slick pop-up forms with optional exit intent feature

Spice up your webshop with fancy slide-out forms

Build extensive multi-page contact forms

Create dynamic contact forms with conditional form fields

ADMIN FEATURES

Create advanced forms with simple drag & drop builder

Build any type of form choosing from many form fields

Automatically create new contact form pages

Easily embed and insert forms anywhere using widgets

With fully customizable customer & admin notifications

Save, manage and export form submissions in the back-end

Create as many forms as you want without any coding skills!

https://plugin.companyMAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

GET IT NOW

FIND MORE 5 STAR RATED MAGENTO EXTENSIONS TO ENHANCE YOUR MAGENTO WEB STORE. PREMIUM SUPPORT INCLUDED!

Magento Custom Contact Form

Magento Lazy Image Loading Extension

Magento Product Questions /FAQ Extension

Magento Product Page PDF Extension

Magento CMS Revisions Extension

Magento Product Attribute Revisions

Drag & Drop Magento Menu Builder

Magento Syntax Highlighter Extension

FRONT-END EXPERIENCE CONTENT MANAGEMENT SHIPPING & CHECKOUT

Magento Product Shipping Rates Per Country

Product Shipping Rates Per Country & Customer Group

Magento Simple Shipping Estimate Extension

Magento Envelope Shipping Extension

FREE

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

FIND MORE 5 STAR RATED MAGENTO EXTENSIONS TO ENHANCE YOUR MAGENTO WEB STORE. PREMIUM SUPPORT INCLUDED!

CRM & AUTOMATION SEARCH & NAVIGATION PROMOTIONS

Magento Automatic Customer Group Switcher

Magento Store Locator / Store Finder Extension

Magento Search AutocompleteExtension

Magento Bulk Coupon Import Extension

Magento Fraud Prevention & Blacklist Extension

Newsletter Pop-Up Magento Extension

Slack Integration Extension

INTEGRATIONS

FREE

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?

We are a young and ambitious web developmentcompany located in Amsterdam, the Netherlands.

Our passionate and experienced team focuses oncreating top notch e-commerce solutions for ourcustomers.

Building high quality Magento extension is ourspecialization, our top priority providing ourcustomers with the best possible service andsupport.

About Plugin Company

https://plugin.company/

info@plugin.company

https://plugin.company/blog

http://bit.ly/PC-FBook

http://bit.ly/PC-Twitter

http://bit.ly/PC-LIn

http://bit.ly/PC-Tube

http://bit.ly/PC-GPlus

LET’S CONNECT

MAGENTO DYNAMIC CONTACT FORMS PLUGIN COMPANYHow to create Dynamic Contact Form in Magento?