Showing posts with label website design. Show all posts
Showing posts with label website design. Show all posts

Saturday, May 26, 2012

HTML and Javascript Show / Hide form fields and make specific fields conditionally required

Another small project I have been working on lately is to modify / simplify the contact / request webhosting / domain name registration form found on Katan Website Designs. Eventually I plan to have it set up so that people can place orders directly and pay via credit card, but, for now, I'm just simplifying and making it so that people only submit the information required for a quotation.
Here is a screen shot of what that form currently looks like (when I'm done with it it should look a bit different):

Step 1: Finding the best way to show / hide form fields. 

I googled this and investigated any number of solutions some of which worked and some did not. Eventually I discovered Infopitcher and that seemed to work the best for me. I did not have to do much to make changes. My plan was to take the "Your Requirements" drop down list (from my original contact form) and turn them into radio buttons (I tried it first with check boxes, but I wanted something where people could choose only one option and radio buttons seemed best), then take the fields below that (except for the last one titled "Other") and apply them to the hide / show selections. I decided to try it first with some sample forms, making sure that it worked for all different types of fields and determining what variables I'd have to add / change.

I should note here that my original form was done with html in php for processing. For the purposes of testing these scripts, however, I decided to initially do them in straight html and then convert to php.

This script requires the following:
  1. place between the <head></head> tags:
  2.   <!-- Begining Javascript Code for show / hide form elements using Radio Buttons-->
    <script language="javascript" type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!--End Javascript Code for show / hide form elements using Radio Buttons-->
  3.  Place between the <body></body> tags:
  4.  <form name="formname1" action="" onSubmit="return validateFunction();">field1A
      <input type="radio" name="type" value="1" id="type_1"/><br/>
    field2
       <input type="radio" name="type" value="2" id="type_2"/><br/>
         field3
       <input type="radio" name="type" value="3" id="type_3"/><br /> 
              field4 <input type="radio" name="type" value="4" id="type_4"/><br />      field5 <input type="radio" name="type" value="5" id="type_5"/><br />   
         field6 <input type="radio" name="type" value="6" id="type_6"/><br />     field7 <input type="radio" name="type" value="7" id="type_7"/><br />   field8 <input type="radio" name="type" value="8" id="type_8"/><br />
       <div id="1_box">
         DropField1
         <select name="DropField1" id="DropField1">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
         <br/><br/></div>
    <div id="2_box">
              DropField2
         <select name="DropField2" id="DropField2">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
         <br/><br/></div>
       <div id="3_box">

         DropField3
         <select name="DropField3" id="DropField3">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
         <br /><br /></div>
       <div id="4_box">

         DropField4
         <select name="DropField4" id="DropField4">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
         <br /><br /></div><div id="5_box">
        

         DropField5
         <select name="DropField5" id="DropField5">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select><br />
         DropField5A
         <select name="DFA5" id="DFA5">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select><br />TextField5 <input type="text" name="DF5" id="DF5" />
         <br /><br /></div><div id="6_box">

         DropField6
         <select name="DropField6" id="DropField6">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
         <br />TextField6 <input type="text" name="DF6" id="DF6" /><br /><br /></div><div id="7_box">

         DropField7
         <select name="DropField7" id="DropField7">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select><br />     DropField7a
         <select name="DF7" id="DF7">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
       </div><div id="8_box">

         Field8 <input type="text" name="DropField8" id="DropField8" />
         <br />
         <br /></div>
        
         <input type="submit" value="submit"/>
       </p>
     </form>
     <p>
       <!--Begining Javascript Code for Form Radio Button Show / Hide Elements-->
       <script type="text/javascript">

    $(document).ready(function(){
      $("input[name$='type']").click(function(){
      var value = $(this).val();
      if(value=='1') {
        $("#1_box").show();
         $("#2_box").hide();
         $("#3_box").hide();
         $("#4_box").hide();
         $("#5_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
      }
      else if(value=='2') {
       $("#2_box").show();
        $("#1_box").hide();
        $("#3_box").hide();
        $("#4_box").hide();
        $("#5_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
       }
       else if(value=='3') {
       $("#3_box").show();
        $("#1_box").hide();
        $("#2_box").hide();
        $("#4_box").hide();
        $("#5_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
       }
       else if(value=='4') {
       $("#4_box").show();
        $("#1_box").hide();
        $("#2_box").hide();
        $("#3_box").hide();
        $("#5_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
       }
          else if(value=='5') {
       $("#5_box").show();
        $("#1_box").hide();
        $("#2_box").hide();
        $("#3_box").hide();
        $("#4_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
       }
          else if(value=='6') {
       $("#6_box").show();
        $("#1_box").hide();
        $("#2_box").hide();
        $("#3_box").hide();
        $("#4_box").hide();
         $("#5_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
       }
          else if(value=='7') {
       $("#7_box").show();
        $("#1_box").hide();
        $("#2_box").hide();
        $("#3_box").hide();
        $("#4_box").hide();
         $("#5_box").hide();
         $("#6_box").hide();
         $("#8_box").hide();
       }
          else if(value=='8') {
       $("#8_box").show();
        $("#2_box").hide();
        $("#3_box").hide();
        $("#4_box").hide();
        $("#5_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#1_box").hide();
       }
      });
      $("#1_box").show();
      $("#2_box").hide();
      $("#3_box").hide();
      $("#4_box").hide();
      $("#5_box").hide();
         $("#6_box").hide();
         $("#7_box").hide();
         $("#8_box").hide();
    });

       </script>

       <!--End of Javascript Code for Form Radio Button Show / Hide Elements-->
What's important to note here is that for the radio buttons, they all have to have the same name but different values (<input type="radio" name="type" value="1" id="type_1"/><input type="radio" name="type" value="2" id="type_2"/>) and the elements that you wish to show / hide according to which radio button is selected must each be enclosed within div tags that have unique id's (eg. <div id="1_box">) and you must identify all of these things in the javascript code below the form (see the example code above).

Step 2: Finding a way to make the fields referred to in the above form validate / become required only when their respective radio button was / is selected.


Once again I experimented with a number of different alternatives. Some only worked with checkboxes and text areas, others only worked with radio buttons and single drop down lists. Finally I discovered on the webdeveloper.com forums, where someone had a similar problem and Suhas Dhoke had answered it in such a way that I could work with it. His solution works well (so far) with the hide / show coding I refer to above and with multiple drop down lists and other form fields. Please note: the page may not validate properly, but I'm sure that can be sorted out eventually by placing the javascript code in a separate javascript file, however, for our purposes right now (ensuring that it works at all) we're just leaving it as part of the html file.

To start:
Place the following code between the <head></head> tags:
<!-- Start Javascript Code to validate conditional form elements -->
<script type="text/javascript">
 function validateFunction() {
 var j = 1;
 for (var i = 0; i < document.formname1.elements.length; i++) {
 var elem = document.formname1.elements[i];
 if (elem.type == "radio") {
 var chk_field_name = 'type_'+j;
 var drop_field_name = 'DropField'+j;
  var drop_field_name_a = 'DF'+j;
    var drop_field_name_b = 'DFA'+j;
 if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name).value == '') {
 alert("You must select at least one option from "+drop_field_name+" drop down.");
 return false;
 }if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
 alert("You must select one option from "+drop_field_name_a+" drop down.");
 return false;
 }if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_b).value == '') {
 alert("You must select one option from "+drop_field_name_b+" drop down b.");
 return false;
 }
 j++;
 }/*{
 var chk_field_name = 'type_'+j;
 var drop_field_name_a = 'DF'+j;
 if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
 alert("You must select at least one option from "+drop_field_name_a+" drop down.");
 return false;
 }
 j++;
 }*/
 }
 return true;
 }
 </script>
<!-- End Javascript Code to validate conditional form elements -->
Make sure you note the name of the form (if your form does not have a name, give it one eg. <form name="form1">) and in the code above find where it says formname1 and change that to your form's correct name, eg where it says:
 for (var i = 0; i < document.formname1.elements.length; i++) {
 var elem = document.formname1.elements[i];
change the bold type formname1 to your form name.

Next, locate where it says  if (elem.type == "radio") and where it says radio, change that to what ever selection field type you  wish to have the other conditionally required elements validate against (your options are radio, checkbox and dropdown).

Then, note where it says  var chk_field_name = 'type_'+j; - the "type_" is the beginning of the radio button's id title and in the actual radio button code it will end with a unique number, eg. <input type="radio" name="type" value="1" id="type_1"/>

Finally note where it says  var drop_field_name = 'DropField'+j; because that is where you must put the name and id of the fields that must be validated against their respectively selected radio buttons, eg.: <select name="DropField1" id="DropField1"> and <select name="DropField2" id="DropField2">

Please note here two things:
  1. just like the radio buttons id title('type') ending with unique numbers, the name and id's for the fields that must be validated against each radio button must also end in the same numbers that are associated with their radio buttons id. eg. if the radio button code is: <input type="radio" name="type" value="1" id="type_1"/>, then the respective conditionally required field must have the following name and id: <select name="DropField1" id="DropField1">
           <option value="">Select #</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
  2. whilst the drop down (and probably also check boxes and radio buttons) fields that are conditionally required, must have identical names and id's, text fields (and probably text areas) do not, the latter only require id's.

Step 3: Piecing it all together:

Here is the entire example code all together:
 <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Radio Button validation</title>
  <!-- Begining Javascript Code for show / hide form elements using Radio Buttons-->
<script language="javascript" type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--End Javascript Code for show / hide form elements using Radio Buttons--><!-- Start Javascript Code to validate conditional form elements -->
<script type="text/javascript">
 function validateFunction() {
 var j = 1;
 for (var i = 0; i < document.formname1.elements.length; i++) {
 var elem = document.formname1.elements[i];
 if (elem.type == "radio") {
 var chk_field_name = 'type_'+j;
 var drop_field_name = 'DropField'+j;
  var drop_field_name_a = 'DF'+j;
    var drop_field_name_b = 'DFA'+j;
 if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name).value == '') {
 alert("You must select at least one option from "+drop_field_name+" drop down.");
 return false;
 }if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
 alert("You must select one option from "+drop_field_name_a+" drop down.");
 return false;
 }if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_b).value == '') {
 alert("You must select one option from "+drop_field_name_b+" drop down b.");
 return false;
 }
 j++;
 }/*{
 var chk_field_name = 'type_'+j;
 var drop_field_name_a = 'DF'+j;
 if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
 alert("You must select at least one option from "+drop_field_name_a+" drop down.");
 return false;
 }
 j++;
 }*/
 }
 return true;
 }
 </script>
<!-- End Javascript Code to validate conditional form elements -->
 </head>
 <body>


 <form name="formname1" action="" onSubmit="return validateFunction();">field1A
  <input type="radio" name="type" value="1" id="type_1"/><br/>
field2
   <input type="radio" name="type" value="2" id="type_2"/><br/>
     field3
   <input type="radio" name="type" value="3" id="type_3"/><br /> 
          field4 <input type="radio" name="type" value="4" id="type_4"/><br />      field5 <input type="radio" name="type" value="5" id="type_5"/><br />   
     field6 <input type="radio" name="type" value="6" id="type_6"/><br />     field7 <input type="radio" name="type" value="7" id="type_7"/><br />   field8 <input type="radio" name="type" value="8" id="type_8"/><br />
   <div id="1_box">
     DropField1
     <select name="DropField1" id="DropField1">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
     <br/><br/></div>
<div id="2_box">
          DropField2
     <select name="DropField2" id="DropField2">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
     <br/><br/></div>
   <div id="3_box">

     DropField3
     <select name="DropField3" id="DropField3">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
     <br /><br /></div>
   <div id="4_box">

     DropField4
     <select name="DropField4" id="DropField4">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
     <br /><br /></div><div id="5_box">
    

     DropField5
     <select name="DropField5" id="DropField5">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select><br />
     DropField5A
     <select name="DFA5" id="DFA5">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select><br />TextField5 <input type="text" name="DF5" id="DF5" />
     <br /><br /></div><div id="6_box">

     DropField6
     <select name="DropField6" id="DropField6">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
     <br />TextField6 <input type="text" name="DF6" id="DF6" /><br /><br /></div><div id="7_box">

     DropField7
     <select name="DropField7" id="DropField7">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select><br />     DropField7a
     <select name="DF7" id="DF7">
       <option value="">Select #</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
   </div><div id="8_box">

     Field8 <input type="text" name="DropField8" id="DropField8" />
     <br />
     <br /></div>
    
     <input type="submit" value="submit"/>
   </p>
 </form>
 <p>
   <!--Begining Javascript Code for Form Radio Button Show / Hide Elements-->
   <script type="text/javascript">

$(document).ready(function(){
  $("input[name$='type']").click(function(){
  var value = $(this).val();
  if(value=='1') {
    $("#1_box").show();
     $("#2_box").hide();
     $("#3_box").hide();
     $("#4_box").hide();
     $("#5_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
  }
  else if(value=='2') {
   $("#2_box").show();
    $("#1_box").hide();
    $("#3_box").hide();
    $("#4_box").hide();
    $("#5_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
   }
   else if(value=='3') {
   $("#3_box").show();
    $("#1_box").hide();
    $("#2_box").hide();
    $("#4_box").hide();
    $("#5_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
   }
   else if(value=='4') {
   $("#4_box").show();
    $("#1_box").hide();
    $("#2_box").hide();
    $("#3_box").hide();
    $("#5_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
   }
      else if(value=='5') {
   $("#5_box").show();
    $("#1_box").hide();
    $("#2_box").hide();
    $("#3_box").hide();
    $("#4_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
   }
      else if(value=='6') {
   $("#6_box").show();
    $("#1_box").hide();
    $("#2_box").hide();
    $("#3_box").hide();
    $("#4_box").hide();
     $("#5_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
   }
      else if(value=='7') {
   $("#7_box").show();
    $("#1_box").hide();
    $("#2_box").hide();
    $("#3_box").hide();
    $("#4_box").hide();
     $("#5_box").hide();
     $("#6_box").hide();
     $("#8_box").hide();
   }
      else if(value=='8') {
   $("#8_box").show();
    $("#2_box").hide();
    $("#3_box").hide();
    $("#4_box").hide();
    $("#5_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#1_box").hide();
   }
  });
  $("#1_box").show();
  $("#2_box").hide();
  $("#3_box").hide();
  $("#4_box").hide();
  $("#5_box").hide();
     $("#6_box").hide();
     $("#7_box").hide();
     $("#8_box").hide();
});

   </script>

   <!--End of Javascript Code for Form Radio Button Show / Hide Elements-->This form is a variation of the following:</p>
 <p>Show / Hide fields taken from: <a href="http://www.infopitcher.com/2011/10/showhide-form-elements-based-on-radio-button-selections-using-jquery/">Infopitcher</a></p>
 <p>Validate fields taken from: <a href="http://www.webdeveloper.com/forum/showthread.php?t=143955">Suhas Dhoke</a></p>
 <p>Where radio buttons must have the same name but can have different id's and must have different values and the different fields to validate must each have unique names which must be identical to their respective id's. In this example, drop down lists must also have a &quot;value&quot; in addition to the text contained in the list, whilst the text fields don't require this. Also to have multiple conditionally required fields required that each field type has a unique ID and some variations needed to be made to the javascript code provided by Suhas Doke in the link above.</p>
 </body>
 </html>

And that's it!

Next: make all these changes to my contact form, create and link to javascript file, convert html form to php (include security code at bottom), and check / recreate php file to process the inputs.

Thursday, December 29, 2011

Has my website crashed?

A lot of the time when clients come to me to design a website, especially those who are not so familiar with the internet and information technology equipment and software, they expect that once the website is up and running on a webhost, it will always be up and running, and they don't want it to ever come down, not even temporarily. Recently I had a couple incidents with one client's website crashing and I've also had incidents with other clients websites being taken down because some fee or the other was not paid to the respective host in a timely fashion.

The reality is websites do crash from time to time and there is nothing a webhost or website designer can do to prevent it from crashing 100% of the time (sometimes it can be avoided, but not all the time). However, there are times when it may not have crashed, but it is just unavailable to you the viewer.

Websites may become unavailable for many reasons:

  1. You the individual user have lost your internet connection, or your internet cache needs to be deleted, or your firewall (or the company's firewall) is blocking you from viewing the website or the internet, or that specific website got blocked from your specific computer or the network on which your computer is located;
  2. There are so many people looking at your website (or another website that is located on your webhost's server) that the server timed out.
  3. You (or someone representing you) may have neglected to pay the webhosting or domain hosting fee on time.
  4. The amount and size of the files on your webhost (files required for your website to run) may have maxed out / used up the amount of disk space your webhost has allocated for you.
  5. The website or the webserver (your host is using) may be down for maintenance.
  6. Your website may be down due to a programming error either on the webserver or on the website.
  7. It may be that your website got hacked or blacklisted by an internet monitoring service.
Solutions:
  1. The first thing you should do is determine, whether or not you are the only one experiencing this problem. To do this, check http://www.downforeveryoneorjustme.com/google.com, type in the website in the space provided and click the text that says "or just me?". If it says it's just you, then check your internet connection, firewalls, internet cache, etc. or get your computer repairs technician to do that for you.
  2. Make sure you are familiar with your webhosting and domain hosting agreement and the features associated with your webhosting account. More specifically, be familiar with the cost of everything, how often you are required to pay, the amount of disk space and the amount of internet traffic your webhost allocated to you. Some webhosts will tell you that the disk space and / or the amount of traffic allocated is unlimited, please note this is not really the case, but, they usually say this, when the amount allocated is so high that it is unlikely you will ever need all of it, whilst others will be more specific. As for the fees, if they are not paid on time, your webhost and / or your domain host will suspend your account. In any of these cases (where the disk space or traffic is maxed out or webhosting or domain hosting fees are not paid), you should contact and consult your webhost to either pay off outstanding fees or to upgrade the account to get more traffic or disk space
  3. Your website may also go down for maintenance purposes. This may mean anything from a bug being discovered and repaired in the webhost's software, to an upgrade to the webhosting hardware or software, or a major update or upgrade to the website itself. Webhosts and website designers usually try their best to avoid taking down the website while doing these things, but this is not always possible, because sometimes you have to switch things off and then turn them back on again. Talk to your website designer and your webhost about the problem, get both of them to investigate it. If you know your website designer is currently doing some work on the website (for example if you asked them to make some changes) talk to them and determine if they had to take it down for some reason. If, however, this is not the case, go straight to the webhost and enquire.
  4. Programming errors can cause websites to go down, but first you have to determine what type of programming error, before you can find a solution:
    1. there's something wrong with the code for the website. Unless there were any major recent changes to the website, there should not be anything wrong with the code, except in #3 below. If there was some major changes to the website recently concluded or currently going on, talk to your current website designer, if not, see #3 below.
    2. There's a bug on your webhost's software or operating system. If this is the case, you need to report this to your webhost and have them deal with it.
    3. Your website might be so old (it may have been up for a very long time) that modern internet protocols may no longer support it. To resolve this you would need to consult your website designer about redesigning it.
  5. On occasion websites do get hacked. Your webhost is typically responsible for your website's basic security, and they provide free tools for your website designer to secure your website properly, so you should first have a chat with your webhost about the problem. In addition, there are other security measures you can pay for to add more protection to your website. One example is a secure sockets layer (ssl) certificate and others are website anti virus and anti hacker solutions. Discuss purchasing additional protection with your website designer before buying.
  6. My website or domain name got blacklisted. This does not happen very often except when various internet monitoring agencies determine that your website, webhost or domain registrar is responsible (whether intentionally or not) for transmitting spam, phishing, internet viruses and other malicious activity. Usually when this happens, when you attempt to view the website, you will be presented with a page telling you your website has been blacklisted and a link to provide more information. Very often, if it is your website, this may either be the result of someone with an infected computer visiting your website, or it may mean that your website or webhost was hacked. Take a look at the link provided (on the default "this website has been blacklisted) with your website designer and depending on the causes & reasons, your website designer will be able to advise you how to proceed.
You may read more about these issues at: 


How can I be on top of things?
Pay attention to the emails received from your webhost because if they plan any maintenance on your webserver, they typically will inform you about this via email (usually days) before they conduct the maintenance.

What about restoring the website after it has gone down?
Both your webhost and your website designer should be capable of restoring the website for you. They each may have terms and conditions under which they'll agree to restore the website, so discuss it with them.