# How to Create Linkable Button Links to a Form Getting users to your form is half the battle. Whether it's a contact form, a signup sheet, or a survey, a well-crafted button link that drops visitors directly onto that form can meaningfully improve your conversion rate. But "button link to a form" can mean several different things depending on your setup — and the right approach depends heavily on how your site is built. ## What a Button Link to a Form Actually Does At its core, a **button link** is a clickable element styled to look like a button but behave like a hyperlink — navigating the user somewhere when clicked. When that destination is a form, you're essentially creating a shortcut that removes extra clicks and makes the path to action obvious. There are two main scenarios: - **The form is on a separate page** — the button links to that page's URL - **The form is on the same page** — the button uses an **anchor link** to jump directly to the form section Both are legitimate approaches. Which one suits your use case depends on your page structure and how prominently you want the form featured. ## The Basic HTML Approach 🔗 If you're working directly with HTML, the cleanest method is wrapping a ` ` element inside an `` tag, or using an `` tag styled as a button with CSS. **Option 1 — Link wrapping a button:** ```html Contact Us ``` **Option 2 — Anchor tag styled as a button (recommended):** ```html Get in Touch ``` The second option is generally preferred because wrapping interactive elements inside each other can cause minor validation issues in HTML5. Styling an ` ` tag with CSS to look like a button is cleaner and fully accessible. ### Linking to a Form on the Same Page with Anchor IDs If your form lives further down the same page, you use a **fragment identifier** — a `#` followed by the form element's `id` attribute. Step 1 — Give your form an ID: ```html

``` Step 2 — Link the button to that ID: ```html Jump to Form ``` Clicking this button smoothly scrolls (or jumps, depending on your CSS settings) directly to the form. You can add `scroll-behavior: smooth;` to your CSS `html` selector to make the transition animated rather than abrupt. ## Button Links in Website Builders and CMS Platforms Not everyone writes raw HTML. Most website builders and CMS platforms — including **WordPress**, **Squarespace**, **Wix**, and **Webflow** — have their own methods for creating button links. | Platform | How to Add a Button Link to a Form | |---|---| | **WordPress (Block Editor)** | Add a Button block → set the URL to your form page or `#form-id` | | **WordPress (Elementor)** | Drag in a Button widget → set link to form page or anchor | | **Squarespace** | Add a Button block → enter the URL or page anchor in the link field | | **Wix** | Add a Button element → connect to a page or anchor point | | **Webflow** | Add a Link Block styled as a button → link to a section or page | In most of these platforms, **anchor linking within a page** requires you to first set an anchor name or element ID on the form section, then reference it in the button's link field as `#anchor-name`. ## Making the Button Accessible and Functional ♿ A button that looks good but fails accessibility standards can hurt your site's usability and SEO. A few non-negotiable considerations: - **Descriptive link text** — "Fill Out Our Contact Form" communicates more than "Click Here" to both users and search engines - **Focus styles** — ensure keyboard users can see when the button is focused (don't remove the `outline` without replacing it) - **Color contrast** — button text should meet WCAG contrast ratios against the button background - **`type="button"`** — if you're using a ` ` element outside a form, set this attribute explicitly to prevent it from accidentally submitting a parent form ## Variables That Change the Right Approach Several factors determine which method works best for your situation: **Your tech stack** — Raw HTML gives you full control. A page builder may limit how you assign IDs or handle anchor links, especially if it auto-generates element IDs that change on republish. **Form location** — A dedicated form page simplifies the link structure. A form embedded partway down a long landing page makes anchor linking more useful but slightly more complex to configure. **JavaScript dependencies** — Some form tools (like embedded third-party forms from Typeform, HubSpot, or Google Forms) load asynchronously. An anchor link to them may not work correctly if the form hasn't fully rendered when the page loads. **Smooth scroll behavior** — Browser support for CSS `scroll-behavior: smooth` is broad, but some older browsers ignore it. JavaScript-based smooth scroll libraries offer more consistent behavior across environments. **Mobile experience** — Buttons need to be large enough to tap comfortably on touchscreens. A button that works perfectly on desktop can frustrate mobile users if it's undersized or poorly positioned relative to the form destination. ## When One Page vs. Multiple Pages Matters If your form is the primary goal of a dedicated landing page, a **direct page link** keeps things simple and measurable — one URL, one purpose, easy to track in analytics. If your form is one section among many on a long-form page — say, after product details or testimonials — an **anchor link button** creates a direct path without requiring the user to leave or reload the page. This pattern is common on sales pages and service pages where you want users to read first, then act. The right structure ultimately depends on how your form fits into your broader content flow, how your platform handles IDs and anchors, and what kind of user journey you're designing around it.