Features<\/h3>\n<\/div>\n<\/div>\n\n\n\n- The admin can enter the default address and coordinates of the store<\/li>\n
- Select where to display the contact us button – top left or top right.<\/li>\n
- Show Google Maps store location within the contact us form.<\/li>\n
- The admin can select yes to Show Email Id on the Frontend.<\/li>\n
- Customers see thank you message clicking send button.<\/li>\n
- Display name, email, and full address inside the contact us form.<\/li>\n
- Set the inbox email address for receiving the messages.<\/li>\n
- Mail Template can be customized.<\/li>\n
- The module source code is open for customization.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n\n\nTo install this extension, please follow each and every step carefully as follows:<\/p>\n
Step 1:<\/h3>\n
After extracting the downloaded zip file and you will get the src<\/strong> folder. Inside src<\/strong> folder, you will find the app<\/strong> folder, copy the app<\/strong> folder to the Magento2 root directory. Please view the below screenshot.<\/p>\n![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-22-45.png\")
<\/p>\n
Step 2:<\/h3>\n
After the successful installation, you have to run these commands in the\u00a0Magento2 root directory.<\/p>\n
First command –<\/strong><\/p>\nphp bin\/magento setup:upgrade<\/pre>\nSecond Command –<\/strong><\/p>\nphp bin\/magento setup:di:compile<\/pre>\nThird Command –<\/strong><\/p>\nphp bin\/magento setup:static-content:deploy<\/pre>\nAfter running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through System>Cache Management<\/strong>. Click Flush Magento Cache<\/strong> button as shown below:<\/p>\n![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-09-25.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\nMulti-Lingual Configuration<\/h3>\n<\/div>\n<\/div>\n\n\n\u00a0For Multilingual support, please navigate. Store>Configuration>General >Locale Options<\/strong>. And select your desired language from the Locale<\/strong> option.<\/p>\n![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-40-51.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\nLanguage Translation<\/h3>\n<\/div>\n<\/div>\n\nIf you need to do the module translation, please navigate the following path in your system. app\/code\/Webkul\/Ajaxcontactform\/i18n<\/strong>. Open the file named en_US.CSV<\/strong> for editing as shown in below screenshot.<\/p>\n![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/22-3.png\")
<\/p>\n
Once you have opened the file for editing. Replace the words after the comma(,)<\/strong> on the right with your translated words.<\/p>\n![\"screenshot_1-3\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/screenshot_1-3.png\")
<\/p>\n
After editing the CSV file, save it and then upload it to the same folder. Now your module translation is complete.<\/p>\n
![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2016-05-02_16-25-34-3.png\")
<\/p>\n<\/div>\n<\/div>\n
\n\n\nGoogle Maps API Key and Coordinates<\/h3>\n<\/div>\n<\/div>\n\n\nAfter the module installation, you need to get the Google Maps API key and store coordinates. These two things will be required at the time of widget configuration.<\/p>\n
API Key<\/h3>\n
Please visit the following link<\/a> for getting the API Key. Log into your Google account and then click GET A KEY<\/strong> button as visible below:<\/p>\n![\"api\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2017-05-15_16-56-08.png\")
<\/a><\/p>\nA pop-up window will appear, Create Project<\/strong> and give any name to it. Then, click ENABLE API<\/strong>.<\/p>\n![\"create\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2017-05-15_16-56-42.png\")
<\/a><\/p>\nAfter few seconds, the API Key will be generated. Copy the API key, it will be used at the time of widget configuration.<\/p>\n
![\"copy\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2017-05-15_16-54-34.png\")
<\/p>\n
Store Coordinates<\/h3>\n
To find your store coordinates please go to the Google Maps<\/a> website and enter your store name, address, locality, or any nearby place. After that, right-click on the place or area on the map and select What’s here?<\/em><\/strong><\/p>\n![\"Screenshot_65_\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Screenshot_65_.png\")
<\/p>\n
Now, at the bottom, you\u2019ll see a card with the coordinates. Copy the coordinates, it will be used in the widget configuration.<\/p>\n
![\"New_York_Google_Maps\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/New_York_Google_Maps.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\nAdmin Configuration<\/h3>\n<\/div>\n
After the successful installation of the module, the admin needs to configure the module by navigating through Stores> Configuration> Ajax Contact Form<\/strong>.<\/p>\n![\"config-admin-2\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/config-admin-2.png\")
<\/p>\n
The admin needs to configure general settings:<\/p>\n
\n- Map Status:<\/strong> The admin can enable\/ disable map status.<\/li>\n
- Maps API Key:<\/strong> Here, the admin needs to enter the generated Google API key.<\/li>\n
- Set Default Address:<\/strong> The admin needs to enter the default address of the store.<\/li>\n
- Show Email ID on Frontend:<\/strong> Select Yes to show the Email ID on the frontend.<\/li>\n
- Map Coordinates:<\/strong> Here, the admin needs to enter the generated Google maps coordinates.<\/li>\n
- Select Ajax Contact us Email Template:<\/strong> The selected email template will be used to contact the customer. The mail templates can even be customized.<\/li>\n<\/ul>\n
Widget Configuration<\/h3>\n<\/div>\n\nAfter the module configuration, the admin needs to navigate to Content>Pages<\/strong>. The following page will open, select the page where you want to display the Contact Form<\/strong>, click Edit<\/strong> option.<\/p>\n![\"new\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/new.png\")
<\/p>\n
Now, go to the Content<\/strong> section, and click on the Insert Widget<\/strong> icon.<\/p>\n![\"insert-widget-6\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/insert-widget-6.png\")
<\/p>\n
A pop-up window will appear, select Widget Type<\/strong> as Ajax Contact Form.<\/b><\/p>\n![\"webkul-magento-ajax-form-insert-widget-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/webkul-magento-ajax-form-insert-widget-1.png\")
<\/p>\n
After that, the following options will be available for the Ajax Contact Form settings:<\/p>\n
Widget Options:<\/h3>\n
Alignment<\/strong> – Select where to display the Contact Us button. Left or Right.<\/p>\nTitle<\/strong> – Enter the title which will appear on the front-end in the contact us form.<\/p>\nAddress<\/strong> – Enter the store address which will appear in the contact us form.<\/p>\nEmail<\/strong> – Enter the store email which will appear in the contact us form.<\/p>\nShow Full Address<\/strong> – Select Yes to display the complete store address.<\/p>\nThank You Message<\/strong> – Enter the content for the thank you message which will appear after clicking the send button.<\/p>\nClick Insert Widget<\/strong> when done.<\/p>\n![\"Home-Page-Pages-Elements-Content-Magento-Admin\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Home-Page-Pages-Elements-Content-Magento-Admin.png\")
After setting up the widget options, the widget will appear in the content section. Click Save<\/strong>\u00a0to apply your changes.<\/p>\n<\/div>\n<\/div>\n\n\n\nUser Front-End View<\/h3>\n<\/div>\n<\/div>\n\n\nOn the front-end, the users will be seeing the contact us button on top.<\/p>\n
![\"contact](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/contact-us-button.png\")
<\/a><\/p>\nAfter clicking the Contact Us button, the following form will appear. The users will view the name, address, and email. It will also show the store location in Google Maps.<\/p>\n
The users need to enter their name, email, subject, and message content. After that click Send button and the message will be sent to the configured email address.<\/p>\n
![\"Home-Page-1-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Home-Page-1-1.png\")
<\/p>\n
After clicking the Send button, the users will see a thank you message inside the contact us form.<\/p>\n
![\"Home-Page-2\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Home-Page-2.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
Just after the form is completely filled and send from the customer end, the admin will receive an email on the email ID that is configured in the backend. The email at the admin end will be similar as shown in the image below:<\/p>\n
![\"screenshot_from_2020_08_12_14_17_11\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/screenshot_from_2020_08_12_14_17_11.png\")
<\/p>\n
Thank you for viewing this blog for the Magento 2 Ajax Contact Form extension. If you have any query or need more information, please visit webkul.uvdesk.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
- \n
- The admin can enter the default address and coordinates of the store<\/li>\n
- Select where to display the contact us button – top left or top right.<\/li>\n
- Show Google Maps store location within the contact us form.<\/li>\n
- The admin can select yes to Show Email Id on the Frontend.<\/li>\n
- Customers see thank you message clicking send button.<\/li>\n
- Display name, email, and full address inside the contact us form.<\/li>\n
- Set the inbox email address for receiving the messages.<\/li>\n
- Mail Template can be customized.<\/li>\n
- The module source code is open for customization.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n
\n\nTo install this extension, please follow each and every step carefully as follows:<\/p>\n
Step 1:<\/h3>\n
After extracting the downloaded zip file and you will get the src<\/strong> folder. Inside src<\/strong> folder, you will find the app<\/strong> folder, copy the app<\/strong> folder to the Magento2 root directory. Please view the below screenshot.<\/p>\n
<\/p>\nStep 2:<\/h3>\n
After the successful installation, you have to run these commands in the\u00a0Magento2 root directory.<\/p>\n
First command –<\/strong><\/p>\n
php bin\/magento setup:upgrade<\/pre>\n
Second Command –<\/strong><\/p>\n
php bin\/magento setup:di:compile<\/pre>\n
Third Command –<\/strong><\/p>\n
php bin\/magento setup:static-content:deploy<\/pre>\n
After running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through System>Cache Management<\/strong>. Click Flush Magento Cache<\/strong> button as shown below:<\/p>\n
<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nMulti-Lingual Configuration<\/h3>\n<\/div>\n<\/div>\n
\n\n\u00a0For Multilingual support, please navigate. Store>Configuration>General >Locale Options<\/strong>. And select your desired language from the Locale<\/strong> option.<\/p>\n
<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nLanguage Translation<\/h3>\n<\/div>\n<\/div>\n
\nIf you need to do the module translation, please navigate the following path in your system. app\/code\/Webkul\/Ajaxcontactform\/i18n<\/strong>. Open the file named en_US.CSV<\/strong> for editing as shown in below screenshot.<\/p>\n
<\/p>\nOnce you have opened the file for editing. Replace the words after the comma(,)<\/strong> on the right with your translated words.<\/p>\n
<\/p>\nAfter editing the CSV file, save it and then upload it to the same folder. Now your module translation is complete.<\/p>\n
<\/p>\n<\/div>\n<\/div>\n\n\n\nGoogle Maps API Key and Coordinates<\/h3>\n<\/div>\n<\/div>\n
\n\nAfter the module installation, you need to get the Google Maps API key and store coordinates. These two things will be required at the time of widget configuration.<\/p>\n
API Key<\/h3>\n
Please visit the following link<\/a> for getting the API Key. Log into your Google account and then click GET A KEY<\/strong> button as visible below:<\/p>\n
<\/a><\/p>\nA pop-up window will appear, Create Project<\/strong> and give any name to it. Then, click ENABLE API<\/strong>.<\/p>\n
<\/a><\/p>\nAfter few seconds, the API Key will be generated. Copy the API key, it will be used at the time of widget configuration.<\/p>\n
<\/p>\nStore Coordinates<\/h3>\n
To find your store coordinates please go to the Google Maps<\/a> website and enter your store name, address, locality, or any nearby place. After that, right-click on the place or area on the map and select What’s here?<\/em><\/strong><\/p>\n
<\/p>\nNow, at the bottom, you\u2019ll see a card with the coordinates. Copy the coordinates, it will be used in the widget configuration.<\/p>\n
<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nAdmin Configuration<\/h3>\n<\/div>\n
After the successful installation of the module, the admin needs to configure the module by navigating through Stores> Configuration> Ajax Contact Form<\/strong>.<\/p>\n
<\/p>\nThe admin needs to configure general settings:<\/p>\n
- \n
- Map Status:<\/strong> The admin can enable\/ disable map status.<\/li>\n
- Maps API Key:<\/strong> Here, the admin needs to enter the generated Google API key.<\/li>\n
- Set Default Address:<\/strong> The admin needs to enter the default address of the store.<\/li>\n
- Show Email ID on Frontend:<\/strong> Select Yes to show the Email ID on the frontend.<\/li>\n
- Map Coordinates:<\/strong> Here, the admin needs to enter the generated Google maps coordinates.<\/li>\n
- Select Ajax Contact us Email Template:<\/strong> The selected email template will be used to contact the customer. The mail templates can even be customized.<\/li>\n<\/ul>\n
Widget Configuration<\/h3>\n<\/div>\n
\nAfter the module configuration, the admin needs to navigate to Content>Pages<\/strong>. The following page will open, select the page where you want to display the Contact Form<\/strong>, click Edit<\/strong> option.<\/p>\n
<\/p>\nNow, go to the Content<\/strong> section, and click on the Insert Widget<\/strong> icon.<\/p>\n
<\/p>\nA pop-up window will appear, select Widget Type<\/strong> as Ajax Contact Form.<\/b><\/p>\n
<\/p>\nAfter that, the following options will be available for the Ajax Contact Form settings:<\/p>\n
Widget Options:<\/h3>\n
Alignment<\/strong> – Select where to display the Contact Us button. Left or Right.<\/p>\n
Title<\/strong> – Enter the title which will appear on the front-end in the contact us form.<\/p>\n
Address<\/strong> – Enter the store address which will appear in the contact us form.<\/p>\n
Email<\/strong> – Enter the store email which will appear in the contact us form.<\/p>\n
Show Full Address<\/strong> – Select Yes to display the complete store address.<\/p>\n
Thank You Message<\/strong> – Enter the content for the thank you message which will appear after clicking the send button.<\/p>\n
Click Insert Widget<\/strong> when done.<\/p>\n
After setting up the widget options, the widget will appear in the content section. Click Save<\/strong>\u00a0to apply your changes.<\/p>\n<\/div>\n<\/div>\n\n\n\nUser Front-End View<\/h3>\n<\/div>\n<\/div>\n
\n\nOn the front-end, the users will be seeing the contact us button on top.<\/p>\n
<\/a><\/p>\nAfter clicking the Contact Us button, the following form will appear. The users will view the name, address, and email. It will also show the store location in Google Maps.<\/p>\n
The users need to enter their name, email, subject, and message content. After that click Send button and the message will be sent to the configured email address.<\/p>\n
<\/p>\nAfter clicking the Send button, the users will see a thank you message inside the contact us form.<\/p>\n
<\/p>\n<\/div>\n<\/div>\n<\/div>\nJust after the form is completely filled and send from the customer end, the admin will receive an email on the email ID that is configured in the backend. The email at the admin end will be similar as shown in the image below:<\/p>\n
<\/p>\nThank you for viewing this blog for the Magento 2 Ajax Contact Form extension. If you have any query or need more information, please visit webkul.uvdesk.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
- Maps API Key:<\/strong> Here, the admin needs to enter the generated Google API key.<\/li>\n
- Map Status:<\/strong> The admin can enable\/ disable map status.<\/li>\n