Introduction

Web Forms extension is an extension that helps you to manage pages like contacts us page that comes by default from Magento. Please note that you must have this extension in your store.

Steps

To manage the contact us page, follow the steps below:

• Go to you “Admin panel”.
• Navigate to Content > Web-forms.
• Manage Forms.
• Click Add New Form.

• Under Form Information

Information tab:

• Name: the name of the form.
• Code: Code is used to help identify this web-form in scripts.
• Description: put the description you want here, you can add images, links…
•  Success text: This text will be displayed after the form completion.
• Submit button text: Set text for the submit button of the form. If empty the default value “Submit” will be used.
• Display in menu: if you select yes the web-form will be shown in admin backend menu.
• Status: if it’s disabled it will not work.

Settings tab:

• Registered customers only: if you set it to yes, only registered customers can fill and submit this form.
• Survey mode: Survey mode allows filling up the form only one time.
• Enable approval: Enable approval of results.
• Redirect URL: the customer will be redirected to this URL after submitting this form.
• Send results by e-mail to admin: if you set it to yes, the admin will be notified on his email whenever a customer fills this form.
• Duplicate results by e-mail to customer: if the customer submits the form he will be notified.
• Notification e-mail address: the notifications for the admin will be sent to this email.
• Reply-to address for customer: Set reply-to parameter in customer notifications.
• Add header to the message: if it is set to yes, it will add a header with Store Group, IP and other information to the message. 
• After entering the fields above Click Save And Continue Edit.
• Now Field sets and Fields tabs will appear.

Field sets tab: here are the fields that appear in your form.

• Click Add Field Set.
• Name: the name of this field set.
• Position: the field set position in the form.
• Status: the status for this field set.

Fields tab: here you can manage the fields in fieldsets (personal info, survey..).

• Click Add Field.

Web-forms > Settings

• Default e-mail address for notifications: This address will be used by default to send you new results notifications. You can set multiple addresses comma-separated
• Reply-to e-mail address for customer: This address will be used in the reply-to field in customer notification.
• Block e-mail addresses: Block specified e-mail addresses from submission.
• ReCaptcha: 
• Select the mode if you want it to appear for logged in customers or both logged in and not logged in or turn it off.
• API: standard.
• Theme:  select the theme you want.
• Enable: enables the form instead of Magento’s default contact us form.
• Press Save Config.

To add the web-form you have created to a CMS Page, follow the steps below:

1. Log into your Admin Panel
2. From the top menu go to Content > CMS > Pages.
3. From the page that opens click on “Add new page”.

1- From the page Information page that opens:

• set the Page title, for example, “Contact Us”.
• set the URL for the page, it would be better if you set a similar to the page title URL for example “contact-us”.

URL must be in small letters, without underscores “_” .

• Choose the Store view you would like to display the new page in.
  • All store views display the page in English and Arabic stores.
  • English store view displays it only in the English store.
  • And Arabic store view displays it only in the Arabic store view.
• Now set the page to Enabled.

URL for English and Arabic store views must be the same.

2- From the tabs in the left bar, go to Page Content tab.

• Set the content heading, which is heading for the content that you going to display on the page.
• Press on add widget icon.

A pop-up menu will appear:

Select Widget type to Web-Forms: Form.

Widget Options:

1. “Web-form”: select the form you want to insert it in the Page.
2. Set “Front-end template” to Default.
3. “Focus on web-form”: Yes.
4. “Scroll down to success message”: Set it to Yes in order to Scroll to the top of success message after form submission.
5. Press “Insert Widget”.

3- Now go to design tab, in this tab you could set the layout for the page, the layout for the page is generally specified by the theme you choose for the website, but you can still change the layout, you can either choose :

1. 1 column which displays the page as a whole without any right or left bars.
2.  1 column with left bar which shows a left bar on the page.
3. 1 column with right bar which shows the page with the bar on the right.

Predefined designs are not available by default, they need customization, since they are not always compatible with all themes.

• Custom design allows you to set a custom theme for the page, you can use predefined themes. Users usually use this feature for displaying another design for the page, different from their website’s theme for a specific period of time.
• Set the date you would like to start displaying the custom design from in the Custom Design From box.
• Set the end date for displaying the custom design in the Custom Design To box.
• From the Custom theme drop down box, choose the predefined theme you would like to use.
• Choose the Custom Layout for the page, here I am going to set it to 1 Column.
• In the Custom Layout Update XML field, you can update the customization for the information displayed as XML, this is useful if you are familiar with XML coding, you can code the XML and design your preferred layout.

Using the Custom design feature could conflict with your store’s design which will require customization, we do not advice using the custom design feature.

4- Now go to Meta Data tab, and add the description of this page which can help you with SEO- search engine optimization, this description is not shown on the website but used for search engines

5- After finishing all the required data click on Save page.

When creating the same page for the Arabic store, with Arabic content, you should set the same URL for both.

Outcome

By end of this article, you will be able to build your own form and connect it to any CMS page on your store