Windows 10 USB Auto Play, Ask Me Message Stopped Working

Have you ever searched for one of the below in Google because the Windows 10 ‘Auto Play’ ‘Ask Me’ messages and sounds stopped working correctly?

  • Windows 10 USB Auto Play stopped working
  • Windows 10 USB Auto Play Ask Me message doesn’t work
  • Windows 10 notification sounds don’t work
  • Windows 10 notification messages stopped working
  • Windows 10 notification messages stopped working when I add USB

Then read on:

I like things to work how they should; so, I had to share this tip.

Working Autoplay Ask Me Messages

Working Autoplay Ask Me Messages

A couple of months ago I noted that when I added a new USB device to Windows 10, the ‘Auto Play’ ‘Ask Me’ option which was set to ‘On’ stopped working, as did the system sounds and slide out message. Instead, nothing happened.

After trying just about every setting on my PC related to ‘Auto Play’ and ‘Notifications’ and making sure I was using a compatible USB drive, I turned to the online community.

Searching online under all the above search terms and many others delivered lots of possibilities and solutions: registry fixes, installing missing files, replacing corrupt files, editing the group policy and more. However, none solved my problem.

As the issue was not stopping me working I set ‘Auto Play’ to ‘Open Folder’ which worked, just without the taskbar message and sounds.

Every now and then after being reminded of the irritation by adding a USB I would take another took another look into why the ‘Ask Me’ option didn’t work, always without joy.  Then today, I found the answer by accident – sometimes the case.

Win 10 Quiet Hours

Win 10 Quiet Hours

Turn off, the Windows 10 ‘Quiet Hours’ setting. That’s it.  OK; I should have tried it sooner.

Who Says You Shouldn’t Self Host Videos on Your Website?

Video Site

Video Site

In late 2015, I was given a new brief by an existing customer. The company was branching into news, media and publishing and the directors wanted a YouTube/ Worldstarhiphop style website to front the brand.

Following an initial meeting with the client I knew my next step would be research, then more research. worldstarhiphop.com doesn’t allow users to upload content directly from a PC, only from YouTube and such like. The site doesn’t appear to have a direct upload option anyway. That was very different to what my client required; he wanted to self host the video.

I had integrated video into many customer websites in the past, including a site for a sound design company whose large showcase portfolio was made up of mainly video content. On that build I developed a masonry wall of video content for the client, not the same, but similar to the planned new site. The video was not on the scale of this new build, but I still ran into performance issues.

After suffering a loss of connection numerous times during development while on the client’s own shared hosting, I tried to convince the client to let me move the website to us so I could offer assurances about uptime and performance.

The client had already paid for one year of hosting upfront so they insisted on staying put; I had made my point though. As it was, I used Vimeo to deliver the video through embedded URLs as the client had put together an excellent Vimeo portfolio. The ‘to remain nameless’ host’s uptime was the main issue, the performance delivered by Vimeo powered by Fastly via the client’s host was acceptable.

The new brief was different though, the client wanted the ability to self host video. With some hosts, how you allow users to upload video can greatly effect the amount the hosting is going to cost, this was a major concern of mine. However, there are clear advantages to be gained by hosting the original content, in particular one is in a stronger position when it comes to monetising the site.

Of course, original content can be stolen; however, URL’s can be changed every now and then so the links break.

Nevertheless, as the site grows it can come at a cost. When user numbers start growing the hosting costs can increase inline and quickly reach numbers in the £100s, according to research.

After informing the client that self hosted video websites are not straight forward, can be expensive to maintain and to that end there are many blog posts advising against building them, I asked the client if they were 100% sure they needed to allow users to upload video content, as opposed to using embedded video. I got a definite ‘yes’.

As a developer, I understood the importance of ensuring good levels of website performance and I knew that a number of factors could lead to negative usability issues if I got things wrong.

At the start of my research, I already had a few alternative architectures in mind that could potentially deliver the performance needed to self host video: cloud vs. content delivery network (CDN) or both. My main concerns surrounded performance usability and cost to the client. Therefore, I focused my research on the individual offerings of suppliers.

This was new ground I was treading as I had limited experience of self hosted video on a scale the client required. I only wanted to do this once, but I knew that if I got the video content delivery aspects of the build wrong and the site became unusable I would have to rebuild the site on another platform at my own cost. Equally, I knew the client would be less than pleased if the monthly hosting bill rocketed from an acceptable amount into £100s per month.

Customers want guarantees, or at least assurances. I pride myself on having a strong reputation for customer service and quality and I was aware that one misjudgement could possibly tarnish this with the client

Each option had pros and cons which varied according to price, performance, scalability, compatibility, complexity, setup and configuration. I had to try and find a good balance.

Questions needed to be asked; so, I started with our own Windows hosting supplier, Web Wiz, based in Poole, Dorset. Web Wiz are excellent for what my average customers need: reliability, performance and excellent customer service. Bruce who fronts Web Wiz customer service is particularly good and really knows his stuff. I highly recommend Web Wiz to anyone for your average site or reseller hosting. If you use our contact page I will setup an account for you.

Unfortunately, even though I was proposing to use a content delivery network (CDN) to deliver the video content, Web Wiz still did not want the resource hugging video website on their servers.

Therefore, I left hosting for the moment and moved to the major CDN suppliers. Out of all of them MetaCDN were about the only company offering to let me test the network without signing up. However, even after follow ups, I never received an account activation email.

So, I tried MaxCDN. The customer service at MaxCDN seemed efficient, but I wasn’t sure if my card would be debited just for testing their service and they didn’t confirm otherwise even though I asked. All the other CDN companies seemed to charge whatever.

All I needed to do was hook up a CDN using the W3 Total Cache plug-in to see whether the delivery of video performed better.  What I thought would be a straight forward test started to take days to sort out.

Although, my research into the best way to host the site and deliver the video content was not going straightforward, I saw the hard work as an investment in the future, because I’m sure to be in this situation again at some time, at which point I will be much more informed.

Due to not having great luck trying to setup a video through CDN test, I shifted focus to cloud solutions with or without an integrated content delivery network.

After undertaking research into cloud hosting and CDNs it became clear that a number of cloud hosting options were available and there were pros and cons for each.

I looked closely at Azure, but I stumbled across too many posts about slow website and dashboard performance, as well as large bills, so I decided that Azure was a no go until they could speed things up and for a cheaper price.

Amazon Web Services stood out. Out of the AWS cons, two were repeated across posts time and again. The first was the fact that AWS is particularly complicated to setup. This held no fear for me though, as I do this for a living. AWS have also put a lot of documentation online and there a number of tutorials available.

The other con that kept cropping up for AWS, was the fact that a DNS attack or a really busy month could mean a large bill. This was a concern, but I figured this is pretty much going to be the case across the board.

As most of the research pointed to AWS that is what I recommended. There were more favourable blogs about AWS than any other cloud hosts, AWS offered an integrated CDN too, so AWS seemed to be the cloud host that the majority, who write blogs anyway, were using.

On that basis, along with other mixed research I determined that AWS combined with CloudFront was the way to go.

I reservedly recommended Amazon Web Services with CloudFront to the client.

Amazon CloudFront is a content delivery web service. It integrates with other Amazon Web Services products to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no minimum usage commitments (aws.amazon.com, 2016)

Through research I learned that if one is only using Amazon S3 (and not CloudFront), when videos are paused the video will continue to load all the way until the end even if users never watch it all. But with CloudFront enabled, the video will not continue to load, users only pay for the bandwidth that is used.

So, I emailed the client notifying that I was satisfied I had a way forward in respect of the hosting and that I was ready to start work in earnest. Something was still bugging me though, I don’t know why, call it being obsessive about getting things right, but I just still wasn’t happy.

Without the client knowing, I broke off and did a little bit more research just on AWS.  It was then that I found a couple of posts discussing horror stories of AWS users getting $400+ bills for their scalable hosting after publishing really popular blog articles.

Digging deeper I discovered that there was no way to set a spending cap on AWS. My client wanted to host original video content, so I wondered what the bill would be if one of the videos went viral and there was only one version online, theirs

Then, everything changed while reading a post by another AWS customer that had a large monthly bill from AWS after posting a popular article. At the bottom was a small comment from somebody saying, “This happened to me, try Flywheel.

What’s Flywheel? So, I continued my journey, this time to the Flywheel homepage. I read on: monthly limit, managed WordPress, integrated CDN, pay nothing until the site is built then transfer billing to the client, affiliate kick backs, this was all music to my ears.
Flywheel
So, I dropped Flywheel an email about my dilemma and asked if they would welcome a worldstarhiphop.com style site but with self hosted video on their equipment. Flywheel efficiently replied with a yes.

Better still, if the client’s site started hugging resources Flywheel wouldn’t take the site offline when the spending cap is reached like the other cloud hosts, they send an email out instead recommending you scale up.

So, I set up a Flywheel account, installed and configured WordPress and any associated scripts, then started uploading and playing self hosted videos in the most commonly used browsers.

What about the performance? The performance was great, we didn’t even need the integrated CDN at $9.99 per month. That card is up my sleeve if the site needs it some day.

This is how good the performance is, Flywheel has a range of packages (below), the client is on the Personal plan. Remember this is a YouTube style site delivering pages of self hosted video.

  • Tiny @ $15 p/m
  • Personal @ $30 p/m
  • Professional @ $75 p/m
  • Custom
  • The integrated CDN is an additional $9.99 per month

Flywheel is dedicated to WordPress and managed. So, forget updating WordPress, that’s taken care of.

Flywheel Backups

(1) Flywheel Backups

The dashboard is simple, which is great, because I love simple. There’s a handy backup dashboard too with daily backups for the previous 10 days or so.

Designers can build sites for clients without paying a penny and then transfer billing over to the client, neat.

There are different types and levels of affiliate programs too. Bigint is now a Flywheel affiliate. If you would like to sign up with Flywheel we would be very grateful if you signed up through our affiliate link for sharing the good news with you.

Hopefully, all this will save someone else time and effort. If you need a WordPress site that performs well with self hosted video try Flywheel through our affiliate link below. Best of all, it won’t cost you a penny, because you get two weeks of free hosting to develop the site (I asked this to be extended by email – no problem), then you just hand over billing to your client when the site is ready to go.

So, this story has a happy ending. Happy for me, happy for the client and happy for you if you have a WordPress site you need hosting. I guarantee you will not be disappointed, if you Get Flywheel.
 

Flywheel

 

Flywheel

 

Windows 10 System Sounds are Quieter after Upgrade or November Update

Hi,

Here is a little tip that could put your Windows 10 system sound settings back how they were if they have gone a little quieter after the November Update.

It took me a little while to find the source of my issue; so, I thought I’d share the solution. I would recommend trying this before uninstalling and reinstalling the Realtek audio drivers (or equivalent).

Here we go:

1 Right mouse click speaker icon on task bar

2 Choose ’Sounds’

Sound Repair Instruction 1

Sound Repair Instruction 1

3 Choose ‘Playback’

4 Highlight ‘Speakers’, right click and choose ‘Properties’

Sound Repair Instruction 2

Sound Repair Instruction 2

5 Then pick the ‘Enhancements’ tab

6 Put a check mark (tick) in ‘Loudness Equalisation’

Sound Repair Instruction 3

Sound Repair Instruction 3

7 Click on OK

8 Click on OK

That’s it; now navigate through your File Explorer folders to see if your sound are back to the previous level.

So, You Need a Mobile Website

Note: This is not an academic piece of work or meant to be technically detailed. The post simply includes some of the information I use to explain what mobile website options are open to our customers.

Explained: Some Options in Customer Talk

Bigint Blog Smart Phone App

Bigint Blog Smart Phone App

 

Customer service quality and integrity are right at the top of our list of musts at Bigint; therefore, we feel it is important that customers understand all the options available to them when we prepare a website proposal.

Building for desktop and mobile often takes more time; however, this approach has now become best practice. Personally, I have never built a website for a customer that is not mobile friendly; although, desktop only websites have been a viable option to propose in years past.

That was before Google’s April 2015 Mobile Friendly Update, from which websites designed for large screens only could see a significant decrease in ranking position in Google’s mobile search results list.

So, making sure your website displays well on mobiles is more important than ever. But, what options are out there? Here are some of the options we offer to our customers, hopefully explained in language customers can understand.

Bridging the technological gap with customers in respect of terminology can be challenging when preparing a proposal; therefore, we aim to keep jargon to a minimum. However, sometimes there is no alternative, so we endeavour to provide further meaning or include a glossary of terms.

The same applies here; so, I have included a glossary at the bottom of this post.

Options

When choosing a website there are hidden issues for customers to consider in addition to the design and functionality; for example, it is important that modern websites display correctly across all modern devices.

Ideally the site should be search engine optimized (SEO), connected to social media and registered with Google Webmaster Tools and Google Analytics to provide management information on website performance and customer demographics.

The site should be registered with the main anti virus software applications to gain an enhanced online reputation and be hosted on a server that delivers good levels of performance to users.

Our websites consider all these factors, and more. We provide our clients with a complete package that delivers the website they need, including a company mailbox and the essential add-ons to promote the website on Google and analyse its performance online.

It is important that we help our customers understand these options, so they can make an informed decision when deciding what type of website they need.

Some customer foresight is often required at this stage as we ask customers to envisage the future of the proposed website; it could influence the approach we take.

Platform, mobile display approach and design are the options we explain to customers. Functionality is not specific each.

Platform

Regarding platform, Bigint usually offer customers three options: A bespoke website custom designed and coded from the ground up by Bigint, a content management system (CMS) with a premium theme or a bespoke content management system

A custom website is what it says, the website is custom designed and coded from the ground up. The process of building the website includes a full design process in which customers are presented with custom mock-up designs. Once a design has been chosen code is written to create the website design and functionality. This approach is design and development heavy and therefore usually costs the most.

A content management system (CMS) is a purchased software application used to upload, edit, and manage the content displayed on a website. Using a CMS usually reduces the development time because much of the administration and maintenance functionality is already in place; therefore reducing costs. A CMS often makes the future administration of the website easier and more cost effective.

CMS can integrate premium themes that determine how the website looks. Themes are not ready built; they are a toolkit of code snippets that facilitate the development of the website layout and style. Themes are not set in stone though; additions and subtle changes can be made to the design.

A bespoke content management system features the benefits of both a bespoke website and a CMS. In brief, a bespoke CMS is a CMS without a design, style or layout. This provides the administrative benefits of a CMS with a fully bespoke front end design.

Display Approach

A Bigint Mobile Website

A Bigint Mobile Website

Now you have chosen your platform  we need to help you choose an approach to achieving mobile optimisation.

We can achieve mobile optimisation on custom websites and CMS using the same techniques. Here are some different approaches to achieving mobile optimisation.

Mobile Specific Pages

Mobile pages: An approach to mobile optimisation in which we use a separate page for mobile devices and desktop devices. If a mobile device calls the page the mobile page is displayed, and likewise for desktop devices.

Layout Pages: Use a different layout page design for smaller devices. When a mobile device calls a page, the page utilises the mobile layout for the content, likewise if a desktop calls the page.

One advantage of using mobile and desktop pages is that we can change the content in each and then let users switch manually between desktop and mobile versions of a website using a view switcher.  You may want to make the mobile version faster and lighter, but allow access to the full version by means of a link.

Responsive or Fluid Designs

Responsive website design: The website displays differently according to what device is calling it, smart phone, tablet or desktop PC. In responsive design there is only one version of each page; however, code is written to make page elements adjust by growing or shrinking according to what device is calling the page. Custom websites and CMS can feature responsive or fluid designs.

Fluid Designs: Use just one page for all devices; however, the page elements adjust by growing or shrinking according to what device is calling the page.

Techniques to Achieve Responsive or Fluid Designs

CSS Transitions and Media Queries: Change the content styling when a specific screen width is detected.

Viewports: Inform mobile browsers that the site is optimised for mobile viewing so that the page is displayed at the devices dimensions.

Is Your Website Mobile Friendly?

According to Google’s April 2015 update there may be a significant decrease in Google Search traffic to your website if the site is not mobile friendly.

If you are a Bigint customer, you have no worries, because we have always built mobile friendly websites for our customers. Not, all website designers meet the mobile friendly standard though.

If you would like to know if your website is mobile friendly Google has a mobile friendly test tool you can use to find out.

We Can Help You Go Mobile

If you need a mobile website contact us at: admin@bigint.co.uk or Tel: 07743 347 271.  We often have deals on new websites.  This month we are offering free SEO on all new websites.

Feel free to contact us to ask more

Our advice is free of charge. Got a question, ask us at: admin@bigint.co.uk.

Glossary

Algorithm: Process or set of rules to be followed in calculations or other problem-solving operations, especially by a computer.

Content management system (CMS): A content management system (CMS) is a purchased software application used to upload, edit, and manage the content displayed on a website.

Google Analytics: Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic.

Google Webmaster Tools: Helps you monitor and maintain your site’s presence in Google Search results.

Mobile friendly or mobile optimisation: A website that displays well on mobile devices

Mock-up designs: A visual representation of what the website will look like

Ranking Position: the place a website appears in Google’s list of search results

Search engine optimisation (SEO): Search engine optimization is a methodology of strategies, techniques and tactics used to increase the amount of visitors to a website by obtaining a high-ranking placement in the search results page of a search engine (SERP) — including Google, Bing, Yahoo and other search engines.

Server: A computer or computer program which manages access to a centralized resource or service in a network

Software application: a computer program designed to permit users to perform a group of coordinated functions, tasks, or activities.

Hide a Layout Page Div Using JavaScript

Hidden

Hidden

There’s so much I need to share; however, I’m usually busy or I forget.  This time, I remembered though; so, here’s a neat snippet that someone might fine useful.

When I develop bespoke sites I usually use the ASP. Net C# Razor framework with _SiteLayout pages.  Layout pages are pages that contain HTML formatted content that can be shared by other pages on the website.

In this particular project I am using a _SiteLayout page situated in the  root/shared folder.  The _SiteLayout page is run from the _PageStart page.

My _SiteLayout page uses content blocks to add a header and footer to the layout.  Content blocks, are files that contain HTML-formatted content to be inserted in multiple pages.

When a browser requests a the layout page from the web server, ASP.NET inserts the content blocks (_header.cshtml and _footer.cshtml) at the point where the ‘RenderPage’ method is called in the _Layout page.  Phew!

The ASP. Net website explains _SiteLayout pages and the _PageStart page better than me; so, go the ASP. Net site if you want to know more.

The issue is, my _header.cshtml content block page contains a Bootsrap Carousel and I didn’t want to show the Carousel on certain pages.

I considered using an alternative layout page to do this, then I though that JavaScript could be a quick option.

So, I created a variable and set it to hide any element on the page with an id the same as the carousel div id using the style property and values display=’none’.

Then I placed the JavaScript snippet in script tags at the top of the page.

I called my variable ‘hide’, but this can be named anything you like as long as the variable name is not duplicated. See the code below:

<script type="text/javascript">

var hide = document.getElementById('carousel-741055');
hide.style.display='none';

</script>

And here is the opening div tag for the carousel:

<div class="carousel slide" id="carousel-741055">

Try it, it works.

Hope this helps someone.

Update error 80242016 installing KB2952664 on Windows 7

Hello,

Covering how I sort the Windows update errors that I deal with is something that I have been meaning to do for a while.  While I don’t have time to provide solutions for previous errors I will try to document the new ones.

So, today I was updating my desktop PC running Windows 7 X64 Home Premium when I ran into the update fail error code 80242016 when installing update KB2952664.  Breaking it down, the update error code 80242016 is commonly due to a break in the internet connection while installing the update or possibly a firewall interrupting the install.

Update KB2952664 is a recommended update; therefore, don’t be too concerned.  In fact, you may wish to leave it altogether; the update helps Microsoft make improvements to the current operating system in order to ease the upgrade experience to the latest version of Windows; read more here.

To resolve the failed installation I searched for the failed update in Programs and Features/Installed Updates, then I right clicked the update and chose uninstall to remove the failed update.

Finally, I restated the PC and ran windows update again which found the same update.  So, I chose to install it again and it worked fine this time.

More info can be found on Microsoft Tech net here.

Webmatrix Asp.net Razor Email Contact Form Example

Hi everyone,

When I have the time I am going to endeavour to share some of the basic code and techniques featured on the bigint.co.uk site.

Today, I am going to share the email contact form that can be seen here.

All I ask in return for the free code is that you visit the bigint.co.uk site by searching on Google or Bing for [Web Development Huddersfield] and then choosing the bigint.co.uk from the results.  You can also like us on our site.  If you are really grateful, you may wish to make a donation to heavy horse heritage using the button on the left.

Firstly the code.  I built the Bigint Ltd site using the ASP.NET Razor C# syntax.  There are two common approaches in tutorials online to developing an email contact form like ours using the WebMail Helper.  The first uses two pages; a page that contains the html mark up for the contact form and a page to process the request and return a response, such as “email sent”.

The second method in my opinion is slightly neater because the contact form mark up and the code for processing the request are contained in the same page; however, the WebMail helper code is also added to the _AppStart page which is an option in both approaches.  Today, we are going to look at the second approach.

If you are using a Webmatrix template you will probably already have a root file named _AppStart.cshtml, if not create one.

To make use of the WebMail Helper the following code needs adding to the _AppStart.cshtml page to define your SMTP server settings.  The SMTP server settings can be defined in the same page as the processing code and email form, or in the _AppStart page.  It is best practice to use the _AppStart page because users cannot access Razor pages that begin with an underscore “_”.  Putting the SMTP code and password in the page that contains the contact form will provide direct access to your account username and password which is extremely unsafe.

     WebMail.SmtpServer = "mailserver.example.com";
     WebMail.UserName = "Username@example.com";
     WebMail.Password = "Your-Password"
     WebMail.From = "Username@example.com";
     WebMail.EnableSsl = true; (add this if smtp is encrypted)
     WebMail.SmtpPort = 587;

You will need to change the SMTP settings in the code to match your email account and hosts server settings.

  • Mailserver.example.com should be changed to the name of your host’s SMTP server.
  • Username@example.com is the email address for your SMTP server account or the email address of the account you would like the emails to be sent to. This address can be used as the from address too.
  • Your-password is the password for your SMTP server account.  Again, this is usually your  host account password.
  • If you have secure SSL, which costs more with some hosts, mark ‘Enable SSL True’.
  • Finally set the correct SMTP port.

Please note that if you have a secure encrypted SSL connection you should use port 465; otherwise port 587 is the default for plain text emails.  If you are having issues though, try using port 25 which is usually an alternative port and might get you up and running with some hosts.

Next, we need a form and some code to process the request.  Create a new page and add the code below remembering to change Username@example.com for the email address of the account you would like the email to be sent to; this will normally be the same address you used for the username and from address in the SMTP settings above.

@{

    Layout = "/_SiteLayout.cshtml";
    Page.Title = "Contact Bigint Web Development Huddersfield";

    var message = "";
    var companyname = Request.Form["emailAddress"];
    var contactname = Request.Form["emailSubject"];
    var employeecount = Request.Form["emailBody"];

    try{
        if (IsPost && Validation.IsValid()) {

        // Send email
        WebMail.Send(to:"Username@example.com",
            subject: Request.Form["emailSubject"],

            body: "Help request from -   " + Request.Form["customerName"] + " - " + "Email Subject -   " + Request.Form["emailSubject"]  + " - " + "Customer email -   " + Request.Form["emailAddress"]
           );
           message = "Email sent!";
        }
    }
    catch(Exception ex){
        message = "Email could not be sent!";
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
</head>

  <body>
    <h1>Test Email</h1>

    <form method="post">
       <p>
        <label for="customerName">Name:</label>
        <input type="text" name="customerName" placeholder="e.g. Joe Bloggs" required />
       </p>
      <p>
        <label for="emailAddress">Email address:</label>
        <input type="email" name="emailAddress" placeholder="e.g. me@me.com" required />
      </p>
      <p>
        <label for="emailSubject">Subject:</label>
        <input type="text" name="emailSubject" placeholder="e.g. Quote Request" required /> 

      </p>
      <p>
        <label for="emailBody">Text to send:</label><br/>
        <textarea name="emailBody" rows="6" placeholder="Request"  required></textarea>
       </p>
    <p><input type="submit" value="Send!" /></p>
    @if(IsPost){
        <p>@message</p>
    }
    </form>
  </body>
</html>

You may have noticed that I have added some additional functionality to the contact form.  Validation has been incorporated by adding “required” to the text input fields.  The form will not submit until all the required fields have been completed correctly.

Also, the placeholder attribute has been added to pre-populate the text input fields to prompt users.

If the email is sent successfully a message appears showing, “Email sent!”.  If there is a problem with the settings you will see, “Email could not be sent!”

If you have custom errors turned on in your web.config file it will be more difficult to diagnose the problem.  Instead, switch custom errors to off – <customErrors mode=”Off”>.  You can then use the more accurate browser error messages to get to the root of the problem.

Finally, the styling.  I used Twitter Bootstrap to style aspects of the bigint.co.uk website.  When I built the site Bootstrap version 2.3.2 was out; although, the package has since been updated.

If you don’t know what Bootstrap is, you should read up because it’s great, looks cool and can save you a lot of time.  In brief, Bootstrap adds styling to html mark up wherever the appropriate class is given to an object.  Bootstrap has already been well documented; so, I am not going to reinvent the wheel.

All you need to do is drop the Bootstrap assets folder into the root of your site and then link to the style sheets by adding the links below into the head section of the page.

Then, when you create a html object such as a form give it a form class from the Bootstrap documentation like I have done below.  This will apply the pre-defined CSS styling.

        <!-- Le Bootstrap Styles -->
       <link href="assets/css/bootstrap.css" rel="stylesheet">
       <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Bootstrap v2.3.2 download is available here.

For your convenience I have even included our full contact form styled with Bootstrap – below.  Just remember to add the Bootstrap assets folder to the root of your site.  Voila!

@{
    Layout = "_SiteLayout.cshtml";
    Page.Title = "Contact Us | Huddersfield Website Design | Web Hosting";

    var message = "";
    var emailAddress = Request.Form["emailAddress"];
    var emailSubject = Request.Form["emailSubject"];
    var emailBody = Request.Form["emailBody"];

    try{
        if (IsPost && Validation.IsValid()) {

        // Send email
        WebMail.Send(to:"Username@example.com",
            subject: Request.Form["emailSubject"],

            body: "Help request from -   " + Request.Form["customerName"] + " - " + "Email Subject -   " + Request.Form["emailSubject"]  + " - " + "Customer email -   " + Request.Form["emailAddress"]  + " - " + "Request -   " + Request.Form["emailBody"]
           );
           message = "Thank you, Email sent!";
        }
    }
    catch(Exception ex){
        message = "Email could not be sent!";
    }
}

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
            <title>Contact Us | Huddersfield Website Design | Web Hosting</title>

            <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>	          

      <div class="row">

          <div class='well span5'>

            <form class='form-stacked' method="post">

 <div style="text-align: center; margin-top: 20px; font-size: 16px; font-weight: bold; color: green">
@if(IsPost){
<span class="alert alert-success">@message</span>
}
</div>

<h2>Email Contact Form</h2>

</br>

<!-- Text input-->
<div class="control-group">
  <label class="control-label">Full Name</label>
  <div class="controls">
    <input id="customerName" name="customerName" value="@Request.Form["customerName"]" placeholder="e.g. Joe Bloggs" class="input-xlarge" required="" type="text">
 </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label">Subject</label>
  <div class="controls">
    <input id="emailSubject" name="emailSubject" value="@emailSubject" placeholder="e.g. Quote Request" class="input-xlarge" required="" type="text">
</div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label">Email Address</label>
  <div class="controls">
    <input id="emailAddress" name="emailAddress" value="@Request.Form["emailAddress"]" type="email" placeholder="e.g. me@me.com" class="input-xlarge" required="" type="text">
   </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label">Text Area</label>
  <div class="controls">
    <textarea class="span4" id="emailBody" name="emailBody" rows="10" placeholder="Request" required></textarea>
  </div>
</div>

<!-- Button -->
<div class="control-group">
  <label class="control-label"></label>
  <div class="controls">
    <button id="singlebutton" name="singlebutton" class="btn btn-success">Send</button>

     <input value='Reset' class="btn" type="reset"/>
  </div>
</div>

  <p style="text-align: center; color: green">Refresh page to re-send.</p>

</form>
</div>

 <div class='span4'>

          <h3 style="padding-left: 20px">Contact Information</h3>
          <p style="padding-left: 20px"><strong>Email: </strong>bigint.contact@gmail.com<br/>
          <strong>Phone: </strong>01484 473191</p>

          <div class='cleaner_h10'></div>
          <h3 style="padding-left: 20px">Address</h3>
<address style="padding-left: 20px">
<strong><abbr title="New Hudderfield Office">Bigint</abbr></strong><br>
3M Buckley Innovation Centre<br>
Huddersfield, HD1 3BD<br>
</address>

         <div class='cleaner_h10'></div>
          <h3 style="padding-left: 20px">Find Us</h3>
          <div class='span6'>
          <br /><small><a href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=3m+buckley+innovation+center,+firth+street+huddersfield&amp;aq=&amp;sll=53.741446,-1.686054&amp;sspn=0.472705,0.699005&amp;ie=UTF8&amp;hq=&amp;hnear=3M+Buckley+Innovation+Centre,+Firth+St,+Huddersfield,+West+Yorkshire+HD1+3BD,+United+Kingdom&amp;t=m&amp;ll=53.641585,-1.777039&amp;spn=0.015265,0.029182&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
         </div>

        </div>
</div> 

    </body>
</html>
      <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>

That’s all you should need in order to get a working email contact form like ours.

Bigint Contact Form

Find us on Google+ here