Guides / Finipage / Fixing problems

Links and Buttons Not Working? Common Causes and Fixes

By the Qorlize team · Last reviewed November 12, 2026

Finipage guide · Edit HTML files without code. Open Finipage

The page looks finished, but the "Contact us" button does nothing, the menu item for Services jumps to the top instead of the Services section, and the phone number opens an error on a laptop. Broken links are rarely mysterious. Almost all of them come from a handful of patterns, and you can find them by reading the href of each link and knowing what the browser does with it.

Relative and absolute addresses

An href can point to a place in three ways, and mixing them up is the most common cause of a link that works on your computer but not online, or the other way round.

Three mistakes come up again and again:

• Missing https://. href="www.instagram.com/yourshop" is not an external link. The browser treats it as a relative path and goes to yoursite.com/www.instagram.com/yourshop, which is a "404 Not Found". External links always need https:// at the front.
• Root-relative links tested from a file. When you double-click index.html, the page is opened from your disk, and /contact.html means the root of the drive, not your project folder. The same link may work once the site is online. Plain relative links such as contact.html work in both places.
• Root-relative links on a sub-path. If your site lives at a sub-path such as username.github.io/project/, then /contact.html points to username.github.io/contact.html, outside your project. Relative links avoid this too.

Section links that jump to the wrong place

One-page sites usually have a menu of anchor links, such as <a href="#services">. Clicking one scrolls to the element whose id is services. When it does nothing or jumps to the top, check these in order:

1. The id exists. Search the HTML for id="services". If the section was renamed, deleted, or copied from a template where it was called id="service", the link has nothing to land on.
2. The spelling matches exactly, including case. #Services and id="services" do not match. Avoid spaces in ids; use hyphens, as in id="contact-form".
3. Each id is used once. If you duplicated a section, it may now carry the same id twice, and the browser picks the first one.
4. The link is not just #. href="#" with nothing after it means "the top of this page". Templates use it as a placeholder for links that were never filled in.

A Korean id such as id="문의" is valid HTML, but it becomes a long encoded string in the address bar when shared. Short English ids are easier to work with.

If the section is hidden under a fixed header after the jump, that is a styling issue: CSS scroll-margin-top on the target section leaves room for the header.

New tabs, phone numbers and email addresses

Opening in a new tab

target="_blank" opens the link in a new tab. Historically this let the new page reach back to yours through window.opener, which is why guides recommend adding rel="noopener":

<a href="https://blog.naver.com/yourshop" target="_blank" rel="noopener">Blog</a>

According to MDN, current browsers now treat target="_blank" as if noopener were set. Adding it explicitly costs nothing and covers older browsers. Use new tabs for external sites if you like, but keep links within your own site in the same tab; visitors find a pile of tabs of the same site confusing.

Phone and email links

A tel: link lets a phone visitor call with one tap. Write the number in international format: a plus sign, the country code, then the number without its leading zero. Korea's country code is 82.

Hyphens are allowed and ignored; spaces and brackets are best left out. The visible text can stay in the familiar local style. A domestic form such as tel:02-1234-5678 usually dials correctly from a phone in Korea, but the international form works from anywhere. Business numbers like 1588 are only reachable within Korea. On a desktop, a tel: link opens whatever calling app is installed, or nothing, so do not make it the only way to see the number.

A mailto: link opens the visitor's email program:

<a href="mailto:hello@yourcompany.co.kr?subject=Quote%20request">Email us</a>

Spaces in the subject must be written as %20. Many visitors, especially on shared or work computers, have no mail program set up, and the click does nothing visible. Show the address as text too, so they can copy it.

Buttons that are really buttons

Something that looks like a button can be one of two things in HTML. An <a> styled to look like a button is a link: it goes to its href with no script needed. A <button> element does nothing on its own. It needs JavaScript to react, or it needs to be inside a <form>, where it submits the form by default.

So if a template's "Get started" is a <button> and the script that handled it was removed or never existed, clicking it does nothing. If all you want is to go to a page or section, change it to a link: <a href="#contact" class="btn">, keeping the same class so it keeps its look. For a button inside a form, see forms on static pages, because a static page cannot receive form submissions by itself.

While you are reading the HTML, search for example.com, href="#" and javascript:void(0). Each is a link that was never given a real target.

File name case on the server

Windows and macOS usually treat About.html and about.html as the same file. Most web servers do not. A link to About.html that works on your computer gives a 404 online if the file is actually named about.html. The same applies to folders and images: Images/Logo.PNG and images/logo.png are different addresses. The simplest rule is lowercase file names with hyphens and no spaces, and links that match them exactly. Images not showing covers the same issue for pictures.

Testing every link before launch

1. Publish the page first, even to a temporary address, and test there. File-based testing hides root-relative and case problems.
2. Click every link in the header, body and footer, one by one. For section links, check that the right section lands at the top.
3. On a phone, tap the phone number and email link. Check that the dialer shows the right number.
4. Open the HTML in a text editor and search for href="#", example.com, http:// (should usually be https://) and the template author's domain.
5. For larger sites, an automatic checker such as the W3C Link Checker can crawl a published page and list broken links.

Fixing links in Finipage

If you edit the page in Finipage, click the link or button and change its address in the Link field of the properties panel. The field takes whatever address you type: web addresses starting with https://, section anchors such as #services, and tel: or mailto: links in the formats shown above. That covers most of the fixes in this guide. Turning a <button> into an <a> changes the element itself, so do that in a text editor such as Notepad or VS Code. Note that Finipage does not run the page's JavaScript while you edit, so a script-driven button will not respond in the editor even if it works in the browser.

When the links are sorted, go through the rest of the landing page checklist before you share the address.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.