diff --git a/funnel/assets/js/shortlink_form.js b/funnel/assets/js/shortlink_form.js
new file mode 100644
index 000000000..b84f89a9c
--- /dev/null
+++ b/funnel/assets/js/shortlink_form.js
@@ -0,0 +1,68 @@
+import toastr from 'toastr';
+
+$(() => {
+  async function getShortlink(url) {
+    const response = await fetch(window.Hasgeek.Config.shorturlApi, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({
+        url,
+      }).toString(),
+    }).catch(() => {
+      toastr.error(window.Hasgeek.Config.errorMsg.serverError);
+    });
+    if (response.ok) {
+      const responseData = await response.json();
+      $('.js-generated-url').text(responseData.shortlink);
+      toastr.success(window.gettext('Shortlink generated'));
+    } else {
+      toastr.error(window.gettext('This URL is not valid for a shortlink'));
+    }
+  }
+
+  $('.js-copy-shortlink').on('click', function clickCopyLink(event) {
+    event.preventDefault();
+    const url = $('.js-generated-url').text();
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(url).then(
+        () => toastr.success(window.gettext('Link copied')),
+        () => toastr.success(window.gettext('Could not copy link'))
+      );
+    } else {
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(url[0]);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      if (document.execCommand('copy')) {
+        toastr.success(window.gettext('Link copied'));
+      } else {
+        toastr.error(window.gettext('Could not copy link'));
+      }
+      selection.removeAllRanges();
+    }
+  });
+
+  $('#js-generate-shortlink').on('submit', (event) => {
+    event.preventDefault();
+    const url = $('.js-campaign-url').val();
+    const id = $('.js-campaign-id').val();
+    const source = $('.js-campaign-source').val();
+    const medium = $('.js-campaign-medium').val();
+    const name = $('.js-campaign-name').val();
+    const term = $('.js-campaign-term').val();
+    const content = $('.js-campaign-content').val();
+    const campaignUrl = new URL(url);
+
+    if (source) campaignUrl.searchParams.set('utm_source', source);
+    if (medium) campaignUrl.searchParams.set('utm_medium', medium);
+    if (name) campaignUrl.searchParams.set('utm_campaign', name);
+    if (id) campaignUrl.searchParams.set('utm_id', id);
+    if (term) campaignUrl.searchParams.set('utm_term', term);
+    if (content) campaignUrl.searchParams.set('utm_content', content);
+    getShortlink(campaignUrl.href);
+  });
+});
diff --git a/funnel/assets/sass/base/_utils.scss b/funnel/assets/sass/base/_utils.scss
index ad53ee2f1..3f9d64542 100644
--- a/funnel/assets/sass/base/_utils.scss
+++ b/funnel/assets/sass/base/_utils.scss
@@ -130,6 +130,10 @@
   flex-shrink: 0;
 }
 
+.flex-item-grow {
+  flex-grow: 1;
+}
+
 // ============================================================================
 // DISPLAY
 // ============================================================================
diff --git a/funnel/templates/siteadmin_generate_shortlinks.html.jinja2 b/funnel/templates/siteadmin_generate_shortlinks.html.jinja2
index 27a4c157f..3b671fc45 100644
--- a/funnel/templates/siteadmin_generate_shortlinks.html.jinja2
+++ b/funnel/templates/siteadmin_generate_shortlinks.html.jinja2
@@ -7,30 +7,74 @@
 {% endblock pageheaders %}
 
 {% block content %}
-  <div class="mui-form">
+  <form id="js-generate-shortlink" method="post" action="{{ url_for('create_shortlink') }}" accept-charset="UTF-8" class="mui-form mui-form--margins">
     <div class="mui-form__fields">
       <div class="mui-form__controls">
-        <div class="mui-textfield">
-          <input class="field-url js-url-inputbox" {% if request.referrer %}value="{{ request.referrer }}?utm_campaign="{%- endif -%} type="text" placeholder="Enter url"/>
-          <label for="title">Enter url with utm tags</label>
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="title" class="field-url js-campaign-url js-inbox-change" {% if request.referrer %}value="{{ request.referrer }}"{%- endif -%} type="text"/>
+          <label for="title">Url</label>
         </div>
       </div>
     </div>
-    <a href="#" onclick="return false;" class="js-copy-link margin-top" role="button" aria-label="{% trans %}Copy link{% endtrans %}">
-      <span class="js-copy-url mui-panel display-block" aria-hidden="true"></span>
-      <span class="js-shorturl-generate mui-btn mui-btn--primary mui-btn--small zero-bottom-margin zero-top-margin">{% trans %}Shorten link{% endtrans %}</span>
-    </a>
+    <div class="mui-form__fields">
+      <div class="mui-form__controls">
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="id" class="field-campaign-id js-campaign-id js-inbox-change" type="text"/>
+          <label for="id">Campaign ID</label>
+        </div>
+      </div>
+    </div>
+    <div class="mui-form__fields">
+      <div class="mui-form__controls">
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="source" class="field-campaign-source js-campaign-source js-inbox-change" type="text"/>
+          <label for="source">Campaign source</label>
+        </div>
+      </div>
+    </div>
+    <div class="mui-form__fields">
+      <div class="mui-form__controls">
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="medium" class="field-campaign-medium js-campaign-medium js-inbox-change" type="text"/>
+          <label for="medium">Campaign medium</label>
+        </div>
+      </div>
+    </div>
+    <div class="mui-form__fields">
+      <div class="mui-form__controls">
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="name" class="field-campaign-name js-campaign-name js-inbox-change" type="text"/>
+          <label for="name">Campaign name</label>
+        </div>
+      </div>
+    </div>
+    <div class="mui-form__fields">
+      <div class="mui-form__controls">
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="term" class="field-campaign-term js-campaign-term js-inbox-change" type="text"/>
+          <label for="term">Campaign term</label>
+        </div>
+      </div>
+    </div>
+    <div class="mui-form__fields">
+      <div class="mui-form__controls">
+        <div class="mui-textfield mui-textfield--float-label">
+          <input id="content" class="field-campaign-content js-campaign-content js-inbox-change" type="text"/>
+          <label for="content">Campaign content</label>
+        </div>
+      </div>
+    </div>
+    <button type="submit" class="mui-btn mui-btn--raised  mui-btn--primary" data-cy="form-submit-btn">{% trans %}Generate shortlink{% endtrans %}</button>
+  </form>
+
+  <div class="flex-wrapper flex-wrapper--center margin-bottom">
+    <div class="mui-panel flex-item-grow zero-bottom-margin" aria-hidden="true">
+      <p class="mui--text-subhead zero-bottom-margin js-generated-url"></p>
+    </div>
+    <span class="js-copy-shortlink link"aria-label="{% trans %}Copy shortlink{% endtrans %}" role="button">{{ faicon(icon='copy', baseline=true, icon_size='title', css_class="fa-icon--left-margin") }}</span>
   </div>
 {% endblock content %}
 
 {% block footerscripts %}
-  <script type="text/javascript">
-    $(() => {
-      $('.js-url-inputbox').on('change keyup paste', function() {
-        var url = $(this).val();
-        $("[data-shortlink]").attr('data-shortlink', '');
-        $('.js-copy-url').text(url);
-      });
-    });
-  </script>
+  <script src="{{ manifest('shortlink_form.js') }}" type="text/javascript"></script>
 {% endblock footerscripts %}
diff --git a/webpack.config.js b/webpack.config.js
index 5403a756e..4ec15883e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -55,6 +55,7 @@ module.exports = {
     labels_form: path.resolve(__dirname, 'funnel/assets/js/labels_form.js'),
     cfp_form: path.resolve(__dirname, 'funnel/assets/js/cfp_form.js'),
     rsvp_form_modal: path.resolve(__dirname, 'funnel/assets/js/rsvp_form_modal.js'),
+    shortlink_form: path.resolve(__dirname, 'funnel/assets/js/shortlink_form.js'),
     app_css: path.resolve(__dirname, 'funnel/assets/sass/app.scss'),
     form_css: path.resolve(__dirname, 'funnel/assets/sass/form.scss'),
     index_css: path.resolve(__dirname, 'funnel/assets/sass/pages/index.scss'),