So if you go to my website dublincomputers.

  • Profile Image
    Steve
    Asked on May 15, 2011 at 10:21 PM

    So if you go to my website dublincomputers.net, you can see its a very basic website for now I am just getting into it, if you click on any of the pages you will see the gray background, I would like to place this form over the gray background on the Contact Us page is there a way to do this, and remember this page is just a photoshop image chopped up.  Thank you

  • Profile Image
    NeilVicente
    Answered on May 17, 2011 at 03:43 AM

    Hello Steve,

    It is not advisable to create websites directly by exporting a Photoshop mock-up.  Since each element or part of the mock-up is coded tightly as a table cell, introducing a new element or a code (in this case, the form) will drastically mess up the table's structure.

    It would be better if you use a web editor such as Dreamweaver to convert your Photoshop mock-up into a real code-structured website. That way you can easily embed your form using the codes provided by the Embed Form Wizard.

    Hope this information helps. Let me know if you have further questions.


    Neil

  • Profile Image
    Steve
    Answered on May 17, 2011 at 09:53 AM

    Yea how would I go about creating a real code structured website.

  • Profile Image
    NeilVicente
    Answered on May 18, 2011 at 06:23 AM

    Like I said you may use a web editor such as Dreamweaver. If that is out of your budget, there are free webhosts out there with WYSIWYG (What You See Is What You Get) web editors.

    Try Weebly.com or Webs.com. Feel free to ask questions on how to embed forms in the platforms that I have given you.


    Neil

  • Profile Image
    Steve
    Answered on May 18, 2011 at 09:14 AM

    I have dreamweaver and that is how I put together my website but like you said it is just tables and I want to put it over one of the tables/images

  • Profile Image
    liyam
    Answered on May 18, 2011 at 11:29 AM

    Hello Steve,

    This is quite a complicated matter.  You will really need to learn basic HTML with this.  Anyway to accomplish this, open your HTML file using your dreamweaver.  Now look for this part of the HTML source code:

    <td colspan="3" rowspan="10">
                <img src="Images/contact_03.gif" width="548" height="548" alt=""></td>
            <td>

    Once you're able to find it, replace that code above with this:

    <td colspan="3" rowspan="10" style="background: url('http://dublincomputers.net/Images/contact_03.gif') no-repeat left top;" valign="top"><script src="//form.jotform.com/jsform/11334107600"></script>
                 </td>

    To explain what I did:

    1. First I noticed that contact_03.gif is placed as an image, I converted it to become a background.
    2. I placed the form script source inside <td> and </td>
    3. I added valign="top" inside the <td> tag so that the content of the table data will move on top.

    I do think you will need to do step one on the rest of your pages.

    If there's something that you don't understand on my instructions, please let us know.

    Warm regards,

    Liyam