Try ShortPoint now

How can we help you today?

Details

How to Add a Search Box to Your SharePoint Page Using the Code Design Element

Modified on: Tue, 26 Aug, 2025 at 11:10 AM

When you enable Focus Mode using ShortPoint Theme Builder, the search box is not readily accessible:


page in focus mode


This article will demonstrate how to add a functional search box right on your SharePoint page using the Code Design Element:


sample search box

TABLE OF CONTENTS

Prerequisites

  • You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Start the interactive tutorial to learn how to add a search box to your page:

Below is the code used in the tutorial:

<style>
    .shortpoint-search-widget-container *,
    .shortpoint-search-widget-container *:focus,
    .shortpoint-search-widget-container *:hover,
    .shortpoint-search-widget-container *:active {
        outline: none !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .shortpoint-search-widget-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        position: relative;
    }

    .shortpoint-search-widget-container .search-form {
        display: flex;
        align-items: center;
        background: white;
        border: 2px solid #e1e5e9;
        border-radius: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-form:hover {
        box-shadow: 0 4px 16px rgba(0, 120, 212, 0.15);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-form:focus-within {
        box-shadow: 0 4px 16px rgba(0, 120, 212, 0.25);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-dropdown {
        padding: 11px 8px;
        margin: 4px;
        border: none;
        outline: none !important;
        font-size: 14px;
        color: #323130;
        background-color: #f3f2f1;
        border-radius: 100px;
        cursor: pointer;
        min-width: 110px;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px;
        padding-right: 28px;
    }

    .shortpoint-search-widget-container .search-dropdown option {
        padding: 10px 12px;
        background: white;
        color: #323130;
        border: none;
        border-radius: 8px;
        margin: 2px 0;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .shortpoint-search-widget-container .search-dropdown option:hover {
        background: #f3f2f1;
    }

    .shortpoint-search-widget-container .search-dropdown option:checked {
        background: #e3f2fd;
        color: #0078d4;
    }

    .shortpoint-search-widget-container .search-dropdown option:focus {
        background: #e3f2fd;
        outline: none;
    }

    .shortpoint-search-widget-container .search-dropdown:focus {
        background-color: white;
        border: 1px solid #0078d4;
        box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-dropdown:hover {
        background-color: #edebe9;
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-input {
        flex: 1;
        padding: 11px 16px;
        border: none;
        outline: none;
        font-size: 16px;
        color: #323130;
        background: transparent;
    }

    .shortpoint-search-widget-container .search-input::-webkit-input-placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input::-moz-placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input:-ms-input-placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input::placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input:focus {
        outline: none;
    }

    .shortpoint-search-widget-container .search-button {
        padding: 11px 11px;
        margin: 4px;
        border: none;
        background: #8a8886 !important;
        color: white;
        cursor: pointer;
        transition: background-color 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        border-radius: 100px;
    }

    .shortpoint-search-widget-container .search-button:hover {
        background: #736f6d !important;
    }

    .shortpoint-search-widget-container .search-button:active {
        background: #605e5c !important;
        transform: translateY(1px);
    }

    .shortpoint-search-widget-container .search-icon {
        width: 18px;
        height: 18px;
        fill: white;
    }

    .shortpoint-search-widget-container .search-title {
        text-align: center;
        margin-bottom: 30px;
        color: #323130;
        font-size: 24px;
        font-weight: 600;
    }

    .shortpoint-search-widget-container .search-button:focus {
        box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-dropdown:focus {
        outline: none !important;
    }



    .shortpoint-search-widget-container .tooltip {
        position: absolute;
        top: 75px;
        left: 50%;
        transform: translateX(-50%);
        background: #323130;
        color: white;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .shortpoint-search-widget-container .tooltip::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #323130;
    }

    .shortpoint-search-widget-container .tooltip.show {
        opacity: 1;
        visibility: visible;
    }

    @media (max-width: 768px) {
        .shortpoint-search-widget-container {
            padding: 10px;
        }

        .shortpoint-search-widget-container .search-dropdown {
            font-size: 14px;
            padding: 9px 6px;
            margin: 3px;
            min-width: 90px;
            padding-right: 24px;
            border-radius: 18px;
        }

        .shortpoint-search-widget-container .search-input {
            font-size: 16px;
            padding: 9px 12px;
        }

        .shortpoint-search-widget-container .search-button {
            padding: 9px 12px;
            margin: 3px;
            min-width: 44px;
            border-radius: 18px;
        }

        .shortpoint-search-widget-container .search-icon {
            width: 16px;
            height: 16px;
        }

        .shortpoint-search-widget-container .search-title {
            font-size: 20px;
            margin-bottom: 20px;
        }
    }
</style>
<div class="shortpoint-search-widget-container">
    <form class="search-form" id="searchForm" role="search">
        <select class="search-dropdown" id="searchType" aria-label="Search type" title="Select search type">
            <option value="everything">All</option>
            <option value="documents">Files</option>
            <option value="sites">Sites</option>
            <option value="people">People</option>
            <option value="news">News</option>
            <option value="conversations">Messages</option>
            <option value="images">Images</option>
            <option value="videos">Videos</option>
        </select>
        <input type="search" class="search-input" id="searchInput" name="query" placeholder="Search for people, files, or content..." autocomplete="off" aria-label="Search intranet">
        <button type="submit" class="search-button" aria-label="Search" title="Search">
            <svg class="search-icon" viewBox="0 0 24 24">
                <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z" />
            </svg>
        </button>
    </form>
    <div class="tooltip" id="tooltip">Please enter a term to search for</div>
</div>

<script>
    // Helper function to navigate using SharePoint page router with fallback
    function navigateWithPageRouter(url) {
        try {
            // Create a hidden anchor element with data-interception="on"
            const anchor = document.createElement('a');
            anchor.href = url;
            anchor.setAttribute('data-interception', 'on');
            anchor.style.display = 'none';
            anchor.style.visibility = 'hidden';

            // Add to DOM temporarily
            document.body.appendChild(anchor);

            // Simulate click to trigger SharePoint page router
            anchor.click();

            // Clean up the anchor element
            setTimeout(() => {
                if (anchor.parentNode) {
                    document.body.removeChild(anchor);
                }
            }, 100);

        } catch (error) {
            // Fallback to traditional navigation if anything goes wrong
            console.warn('SharePoint page router navigation failed, falling back to traditional redirect:', error);
            window.top.location.href = url;
        }
    }

    document.getElementById('searchForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const searchInput = document.getElementById('searchInput');
        const searchType = document.getElementById('searchType');
        const tooltip = document.getElementById('tooltip');
        const query = searchInput.value.trim();
        const selectedType = searchType.value;

        tooltip.classList.remove('show');

        if (!query) {
            tooltip.classList.add('show');
            searchInput.focus();

            setTimeout(() => {
                tooltip.classList.remove('show');
            }, 3000);

            return;
        }

        const encodedQuery = encodeURIComponent(query);

        let searchUrl;

        switch (selectedType) {
            case 'images':
                searchUrl = `/_layouts/15/search.aspx/images?q=${encodedQuery}`;
                break;
            case 'conversations':
                searchUrl = `/_layouts/15/search.aspx/conversations?q=${encodedQuery}`;
                break;
            case 'news':
                searchUrl = `/_layouts/15/search.aspx/news?q=${encodedQuery}`;
                break;
            case 'people':
                searchUrl = `/_layouts/15/search.aspx/people?q=${encodedQuery}`;
                break;
            case 'sites':
                searchUrl = `/_layouts/15/search.aspx/sites?q=${encodedQuery}`;
                break;
            case 'documents':
                searchUrl = `/_layouts/15/search.aspx/files?q=${encodedQuery}`;
                break;
            case 'videos':
                searchUrl = `/_layouts/15/search.aspx/videos?q=${encodedQuery}`;
                break;
            case 'everything':
            default:
                searchUrl = `/_layouts/15/search.aspx/?q=${encodedQuery}`;
                break;
        }

        navigateWithPageRouter(searchUrl);
    });

    document.getElementById('searchInput').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            document.getElementById('searchForm').dispatchEvent(new Event('submit'));
        }
    });

    document.getElementById('searchInput').addEventListener('input', function () {
        const tooltip = document.getElementById('tooltip');
        if (tooltip.classList.contains('show')) {
            tooltip.classList.remove('show');
        }
    });

    document.getElementById('searchType').addEventListener('change', function (e) {
        const searchInput = document.getElementById('searchInput');
        const selectedType = e.target.value;

        switch (selectedType) {
            case 'images':
                searchInput.placeholder = 'Search for images...';
                break;
            case 'conversations':
                searchInput.placeholder = 'Search for messages...';
                break;
            case 'news':
                searchInput.placeholder = 'Search for news...';
                break;
            case 'people':
                searchInput.placeholder = 'Search for people...';
                break;
            case 'sites':
                searchInput.placeholder = 'Search for sites...';
                break;
            case 'documents':
                searchInput.placeholder = 'Search for files...';
                break;
            case 'videos':
                searchInput.placeholder = 'Search for videos...';
                break;
            case 'everything':
            default:
                searchInput.placeholder = 'Search for people, files, or content...';
                break;
        }
    });
</script>

Step-by-step Tutorial

Follow the detailed guide below to learn how to add a search box:


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit:


Edit


  • Close the Toolbox:


close icon


  • Click the Edit properties icon:


Edit properties icon

Step 2: Copy Code

  • Copy the HTML code below:
<style>
    .shortpoint-search-widget-container *,
    .shortpoint-search-widget-container *:focus,
    .shortpoint-search-widget-container *:hover,
    .shortpoint-search-widget-container *:active {
        outline: none !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .shortpoint-search-widget-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        position: relative;
    }

    .shortpoint-search-widget-container .search-form {
        display: flex;
        align-items: center;
        background: white;
        border: 2px solid #e1e5e9;
        border-radius: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-form:hover {
        box-shadow: 0 4px 16px rgba(0, 120, 212, 0.15);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-form:focus-within {
        box-shadow: 0 4px 16px rgba(0, 120, 212, 0.25);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-dropdown {
        padding: 11px 8px;
        margin: 4px;
        border: none;
        outline: none !important;
        font-size: 14px;
        color: #323130;
        background-color: #f3f2f1;
        border-radius: 100px;
        cursor: pointer;
        min-width: 110px;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px;
        padding-right: 28px;
    }

    .shortpoint-search-widget-container .search-dropdown option {
        padding: 10px 12px;
        background: white;
        color: #323130;
        border: none;
        border-radius: 8px;
        margin: 2px 0;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .shortpoint-search-widget-container .search-dropdown option:hover {
        background: #f3f2f1;
    }

    .shortpoint-search-widget-container .search-dropdown option:checked {
        background: #e3f2fd;
        color: #0078d4;
    }

    .shortpoint-search-widget-container .search-dropdown option:focus {
        background: #e3f2fd;
        outline: none;
    }

    .shortpoint-search-widget-container .search-dropdown:focus {
        background-color: white;
        border: 1px solid #0078d4;
        box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-dropdown:hover {
        background-color: #edebe9;
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-input {
        flex: 1;
        padding: 11px 16px;
        border: none;
        outline: none;
        font-size: 16px;
        color: #323130;
        background: transparent;
    }

    .shortpoint-search-widget-container .search-input::-webkit-input-placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input::-moz-placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input:-ms-input-placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input::placeholder {
        color: #605e5c;
        opacity: 0.8;
    }

    .shortpoint-search-widget-container .search-input:focus {
        outline: none;
    }

    .shortpoint-search-widget-container .search-button {
        padding: 11px 11px;
        margin: 4px;
        border: none;
        background: #8a8886 !important;
        color: white;
        cursor: pointer;
        transition: background-color 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        border-radius: 100px;
    }

    .shortpoint-search-widget-container .search-button:hover {
        background: #736f6d !important;
    }

    .shortpoint-search-widget-container .search-button:active {
        background: #605e5c !important;
        transform: translateY(1px);
    }

    .shortpoint-search-widget-container .search-icon {
        width: 18px;
        height: 18px;
        fill: white;
    }

    .shortpoint-search-widget-container .search-title {
        text-align: center;
        margin-bottom: 30px;
        color: #323130;
        font-size: 24px;
        font-weight: 600;
    }

    .shortpoint-search-widget-container .search-button:focus {
        box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
        outline: none !important;
    }

    .shortpoint-search-widget-container .search-dropdown:focus {
        outline: none !important;
    }



    .shortpoint-search-widget-container .tooltip {
        position: absolute;
        top: 75px;
        left: 50%;
        transform: translateX(-50%);
        background: #323130;
        color: white;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .shortpoint-search-widget-container .tooltip::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #323130;
    }

    .shortpoint-search-widget-container .tooltip.show {
        opacity: 1;
        visibility: visible;
    }

    @media (max-width: 768px) {
        .shortpoint-search-widget-container {
            padding: 10px;
        }

        .shortpoint-search-widget-container .search-dropdown {
            font-size: 14px;
            padding: 9px 6px;
            margin: 3px;
            min-width: 90px;
            padding-right: 24px;
            border-radius: 18px;
        }

        .shortpoint-search-widget-container .search-input {
            font-size: 16px;
            padding: 9px 12px;
        }

        .shortpoint-search-widget-container .search-button {
            padding: 9px 12px;
            margin: 3px;
            min-width: 44px;
            border-radius: 18px;
        }

        .shortpoint-search-widget-container .search-icon {
            width: 16px;
            height: 16px;
        }

        .shortpoint-search-widget-container .search-title {
            font-size: 20px;
            margin-bottom: 20px;
        }
    }
</style>
<div class="shortpoint-search-widget-container">
    <form class="search-form" id="searchForm" role="search">
        <select class="search-dropdown" id="searchType" aria-label="Search type" title="Select search type">
            <option value="everything">All</option>
            <option value="documents">Files</option>
            <option value="sites">Sites</option>
            <option value="people">People</option>
            <option value="news">News</option>
            <option value="conversations">Messages</option>
            <option value="images">Images</option>
            <option value="videos">Videos</option>
        </select>
        <input type="search" class="search-input" id="searchInput" name="query" placeholder="Search for people, files, or content..." autocomplete="off" aria-label="Search intranet">
        <button type="submit" class="search-button" aria-label="Search" title="Search">
            <svg class="search-icon" viewBox="0 0 24 24">
                <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z" />
            </svg>
        </button>
    </form>
    <div class="tooltip" id="tooltip">Please enter a term to search for</div>
</div>

<script>
    // Helper function to navigate using SharePoint page router with fallback
    function navigateWithPageRouter(url) {
        try {
            // Create a hidden anchor element with data-interception="on"
            const anchor = document.createElement('a');
            anchor.href = url;
            anchor.setAttribute('data-interception', 'on');
            anchor.style.display = 'none';
            anchor.style.visibility = 'hidden';

            // Add to DOM temporarily
            document.body.appendChild(anchor);

            // Simulate click to trigger SharePoint page router
            anchor.click();

            // Clean up the anchor element
            setTimeout(() => {
                if (anchor.parentNode) {
                    document.body.removeChild(anchor);
                }
            }, 100);

        } catch (error) {
            // Fallback to traditional navigation if anything goes wrong
            console.warn('SharePoint page router navigation failed, falling back to traditional redirect:', error);
            window.top.location.href = url;
        }
    }

    document.getElementById('searchForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const searchInput = document.getElementById('searchInput');
        const searchType = document.getElementById('searchType');
        const tooltip = document.getElementById('tooltip');
        const query = searchInput.value.trim();
        const selectedType = searchType.value;

        tooltip.classList.remove('show');

        if (!query) {
            tooltip.classList.add('show');
            searchInput.focus();

            setTimeout(() => {
                tooltip.classList.remove('show');
            }, 3000);

            return;
        }

        const encodedQuery = encodeURIComponent(query);

        let searchUrl;

        switch (selectedType) {
            case 'images':
                searchUrl = `/_layouts/15/search.aspx/images?q=${encodedQuery}`;
                break;
            case 'conversations':
                searchUrl = `/_layouts/15/search.aspx/conversations?q=${encodedQuery}`;
                break;
            case 'news':
                searchUrl = `/_layouts/15/search.aspx/news?q=${encodedQuery}`;
                break;
            case 'people':
                searchUrl = `/_layouts/15/search.aspx/people?q=${encodedQuery}`;
                break;
            case 'sites':
                searchUrl = `/_layouts/15/search.aspx/sites?q=${encodedQuery}`;
                break;
            case 'documents':
                searchUrl = `/_layouts/15/search.aspx/files?q=${encodedQuery}`;
                break;
            case 'videos':
                searchUrl = `/_layouts/15/search.aspx/videos?q=${encodedQuery}`;
                break;
            case 'everything':
            default:
                searchUrl = `/_layouts/15/search.aspx/?q=${encodedQuery}`;
                break;
        }

        navigateWithPageRouter(searchUrl);
    });

    document.getElementById('searchInput').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            document.getElementById('searchForm').dispatchEvent(new Event('submit'));
        }
    });

    document.getElementById('searchInput').addEventListener('input', function () {
        const tooltip = document.getElementById('tooltip');
        if (tooltip.classList.contains('show')) {
            tooltip.classList.remove('show');
        }
    });

    document.getElementById('searchType').addEventListener('change', function (e) {
        const searchInput = document.getElementById('searchInput');
        const selectedType = e.target.value;

        switch (selectedType) {
            case 'images':
                searchInput.placeholder = 'Search for images...';
                break;
            case 'conversations':
                searchInput.placeholder = 'Search for messages...';
                break;
            case 'news':
                searchInput.placeholder = 'Search for news...';
                break;
            case 'people':
                searchInput.placeholder = 'Search for people...';
                break;
            case 'sites':
                searchInput.placeholder = 'Search for sites...';
                break;
            case 'documents':
                searchInput.placeholder = 'Search for files...';
                break;
            case 'videos':
                searchInput.placeholder = 'Search for videos...';
                break;
            case 'everything':
            default:
                searchInput.placeholder = 'Search for people, files, or content...';
                break;
        }
    });
</script>

Step 3: Add the Code Design Element

  • Choose where you want to add the search box and click the plus icon:


plus icon


  • Look for the Code Design Element and select it:


code design element

Step 4: Paste Code

  • Paste the code in the HTML field:


paste code

Step 5: Disable Sandbox Mode

  • Go to the Design tab.
  • Disable Sandbox Mode:


disable Sandbox Mode

Step 6: Save and Publish

  • Click the green check mark.
  • Select the eye icon to see your page in real-time:


eye icon


  • Save your changes:


Save


  • Publish your page:


Publish


Congratulations! You now have a functional search box on your SharePoint page:


sample search box

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Visit our dedicated courses on ShortPoint Academy

Click Here!

World's best intranet sites are designed using ShortPoint

Get started today! Learn more

Visit our dedicated courses on ShortPoint Academy

Click Here!
See all 94 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more