Contact Us Module with Google Map User Manual


1 WHAT IS DOTNETNUKE MODULE
DotNetNuke is a program that runs on Microsoft ASP.NET. It is also a framework, meaning, it is a program that is designed to be extended. One of the ways to extend the framework is through custom modules. Various functionality and features required as per various business needs, it can be incorporated to DNN Framework with the use of DotNetNuke Custom Module.

2 WHO ARE DNNDEVELOPER.IN

We are a group of dedicated and enthusiastic professionals who offer the full range of creative services for the DotNetNuke and ASP.Net MVC, C#, SQL Server with years of cumulative experience in web based development that include DNN/DotNetNuke module development, DNN/DotNetNuke Skin solutions, and DNN/DotNetNuke maintenance services. Please visit us at http://www.DnnDeveloper.In

3 CONTACT US MODULE

#1 DnnDeveloper has developed a custom module that can be used to collect the end user’s feedback, queries and any communication to the webmaster/superuser of DNN portal through emails. Once module installed and configured correctly with email settings (SMTP details) it offers a simple form for the end user to enter the required details and it can be posted with email communication.
#2 Contact Us module has another great feature to render the Google Map beside contact us form. The Superuser can get a Google JavaScript API key and set the Google Map along with the address to configure the module from the settings section of the module.

4 INSTALL DNN MODULE

If you need to install a module on your DotNetNuke website you can follow the steps below for the DotNetNuke version running on your site.

#1 Installing a DotNetNuke 9.x Module
– Log into your site as either HOST or super user level account.

Expert DNN Module Developer

– Open Settings -> Extensions

Expert DNN Module Developer
– Click “install extension”

Expert DNN Module Developer

– Drag and drop the package into the window, or click to browse and select the install package (.zip file) to upload the module.

Expert DNN Module Developer
– Click the next button, accept the license and continue through the install. When finished click on the Return button.

Expert DNN Module Developer

– Click the next button, read the release note it describes features and known issue summary.

Expert DNN Module Developer
– Click the next button, after accepting the license if you are agreed.

Expert DNN Module Developer

– Click the Done button, module installed to be configured to DotNetNuke Portal.

Expert DNN Module Developer
#2 Installing/Updating a DotNetNuke 7.x & 8.x Module (Video tutorial: https://www.youtube.com/watch?v=xDRjzFrKECA)
– Log into your site as either HOST or another superuser level account.
– Navigate to the Host menu and select Extensions.
– Click on Install Extension Wizard.
– As directed browse to the zip file that contains the data for your module, select it then click Open.
– Click Next, accept the license, continue through the install. When finished click on the Return button.

#3 Installing/Updating a DotNetNuke 6.x Module

– Log into your site as either HOST or another superuser level account.
– Navigate to the Host menu and select Extensions.
– Hover over the title Extension for a few seconds to generate the Manage button. Click Manage.
– Click on Install Extension Wizard.
– As directed browse to the zip file that contains the data for your module, select it then click Open.
– Click next, accept the license, and continue through the install. When finished click on the Return button.

#4 Installing/Updating a DotNetNuke 5.x Module

– Log into your site as either HOST or supers user level account.

– Navigate to the Host > Extensions. From this page, you can see all of the modules or extensions that you have installed on your site. You can also see the version information and whether or not it is in use.
– If there is a DNN registered update or upgrade to the module or extension, it will be listed on the right side of the page.
– Click the link and the site will either take you to a module installation page for the module or walk you through an automatic upgrade of the module.

5 SETTING/CONFIGURING CONTACT US MODULE

#1 Add Contact Us module on the page

Expert DNN Module Developer

– Navigate to the Page where Module needs to setup.
– Click on the Add Module button at the bottom of the page
– Enter the DNNDeveloer text at “Add Module” popup overlay/window
– Click on DnnDeveloper Contact Us Module, Drag and drop the module on the Panel you want it to be located.’

Expert DNN Module Developer

#2 Settings section of Contact Us module

Expert DNN Module Developer
– Mouse hover the settings icon at top right corner of Module, Click on Settings Submenu
#3 Setting SMTP (First section at the Contact Us Settings tab)
– If Admin wants to use the DotNetNuke instance level SMTP Settings to use, Choose Host Setting radio button.

Expert DNN Module Developer

If the superuser has selected Host Settings, SMTP related settings configured for the DotNetNuke Server will consider and use to send emails.

Expert DNN Module Developer

– If super user want to use other than configures SMTP details for the Portal than it can be configured by selecting Module Settings where option will be visible to set the SMTP Details

Expert DNN Module Developer
– Superuser can set the From and To email address, Contact Email will use the email address mentioned at Module Settings for the Email Settings section.

Expert DNN Module Developer

– If superuser wants to show Google Map on the Right part of Module, it needs to check and provide the Google Javascript API Key along with Address.

Expert DNN Module Developer
– Enable Show Google Map, enter your business office address at “Address” input box.
– Google Javascript API Key can be obtained from the Google (How to get Google MAP JavaScript API – https://www.youtube.com/watch?v=_HYYJelTExE) @ https://developers.google.com/maps/documentation/javascript/get-api-key
– Goole API Key is Free until exceeding 25,000 map loads per 24 hours, per day 25000 up to visitors can visit/load map and there would be no charge.
– Click “GET A KEY” button and select existing project or “Create a new project”, Click on “Create and Enable API”
– It will give you an API Key, it needs to copy and enter at the “Google API Key” input box for the Settings section of the module.
– Front end form can be configured to have fixed width in the case it not adjusting within DNN Skin/Container
– Front-end layout of contact us form’s button color and label color can be set as per matching the Skin/Theme.

– Every field/input can be hiding or show on front end page; also input required validation can be declared from the settings section.

Expert DNN Module Developer

Expert DNN Module Developer– Every field/input can be hiding or show on front end page; also input required validation can be declared from the settings section.

Expert DNN Module Developer Expert DNN Module Developer

Mobile Preview

Expert DNN Module Developer

0 Comments

Leave a reply