Attempting to create dynamic webpage

Nutshell: I have an image I'd like to add textboxes to and need to know the best language to use.

Story: I have an Excel document with very complex formulas spanning multiple pages. The front page has been designed for an end user and prints as a single page while the other pages remain hidden holding all the formula. The layout of the first page is superb and I want to keep it which is why I've output the first Excel page as a pdf, then used Photoshop to convert it to a .png to retain it's original size. What I'd like to do now is use the .png as a background image on a webpage and insert text boxes over the areas that require input/output to do the calculations so when it prints, it looks just like the original Excel document with the coding being done in the background. Also, it's very important for the information in the textboxes to be savable, preferably as a text file on my server that can be uploaded back into the forms later.

So my question is, what programming language would work best for this? I feel like if there's one where I can specify where my text boxes go over the image freely (drag/drop preferably, not having to calculate exactly what pixel the textbox should start at), that this would be much simpler. I've never done anything like this before and am at a complete loss! I can program in vb.net, c, html, and css, but I'm definitely open to learning new languages or scripting languages to accomplish this. Thank you for any replies ahead of time, and I sincerely look forward to any and all responses!

Quote:

---

I feel like if there's one where I can specify where my text boxes go over the image freely (drag/drop preferably, not having to calculate exactly what pixel the textbox should start at), that this would be much simpler

---

Most regulars here don't use WYSIWYG web builders so you will probably need to do some research to find something suitable. We tend to live in the code ;)

For your project, you'd start with HTML to markup your web page elements (your image and also your form/textboxes). You'd then position and style the elements using CSS. Now, with responsive websites becoming more commonplace (and recommended by the likes of Google), your perfectly crafted background image creates a problem because it (and the web page it sits within) would most likely have to stay a fixed size in order to keep the elements that are placed over it in their exact positions. This means that you'd lose mobile-friendliness, which might not be a problem if you only intend to use your application on desktops. If you wanted to go the responsive route and make your application accessible from multiple devices, you'd probably need to heavily modify, or even completely lose the background image, and instead build an interface that can flex/adapt more fluidly in an unknown environment. If this is the case, look into using media queries to resize and reposition elements at different screen sizes. Be aware of default browser CSS - elements that render one way in one browser can look quite different in other browsers. I mention this because form fields are big offenders for looking different and being different default sizes depending on what browser/OS they're being viewed in, and pixel-perfect positioning may be a bit hinky because of it.

Another potential problem could be with how search engines see your web page. Search engines can't see images - they just read the markup - so if this background image of yours contains text (information and instructions), including the labels usually required for form fields and accessibility, Google will not have much information to rate or assess your page on. This might not be a problem for an internal system though. But, if you're application is to be used externally, and is to be search engine friendly, it would probably be better to extract any text from the image and mark the web page up properly using HTML elements/markup that Google understands.

So once you've got the look and layout sorted, your next step would be functionality.

Quote:

---

it's very important for the information in the textboxes to be savable, preferably as a text file on my server that can be uploaded back into the forms later

---

If you want to save information into a text file on your server, you first need to establish if that information is going to remain the same and be retrievable for all users - in other words, will multiple users be editing the same file? If yes, then that's easy - you can use a server-side language such as PHP to save and retrieve from a single text file. If however you need users to save and retrieve their own data, you'd be looking at some sort of membership system, and that will most likely require MySQL and a database to store user login details and working form data.

You mention calculations in your spreadsheet. Calculations on the web can be done client-side or server-side. If you want visible, client-side calculations and feedback from on-the-fly user interactions, JavaScript could be used. However JavaScript-generated results will remain in the browser and not be saved to the server. Alternatively, if the calculations need only be done on the server-side (for example, only when a save button is pressed), you can do them with PHP. A combination of both - JavaScript to offer immediate user feedback, with PHP to calculate/validate/save results - is a good approach.

Thank you for your feedback. I was afraid of that. Originally, I tried remaking the form in vb.net, but realized that, 1. it'd take months of work and, 2. it's not compatible with the web. The picture idea seemed the easiest approach, but I felt re-sizing the would also cause the text boxes to, and it seems I was correct, unless somehow you can make dynamically sized textboxes, like how Bootstrap resizes based on media? As of now, I'm feeling like the best method will be a generic "no-frills" php page that displays the data I want and accepts user input, but when "Export" is hit, sends this info via vbscript to my excel document, fills the fields appropriately, then prints the page in .pdf for the user. Oh wait, that would require Excel to be installed on the server... Going to have to rethink this. Anyway, thank you for your suggestions and looks like I'm going to have to learn php. My webserver offers a variety of database choices, such s MySQLdatabases and phpMyAdmin, but I've never know how to use them without knowing php.