How do I show a different form when someone views my website page on mobile?

Last updated: March 7, 2016

While you begin to experiment with form optimization, you may want to learn how to show a different form to a user if they're visiting on a mobile device versus a desktop. This article will show you how to show a different form to a visitor who is viewing your website on mobile.

Please note: this process requires the use of Smart Content, which means you must have a Professional or Enterprise HubSpot account.

Follow the steps below to edit a form on an existing website or landing page:

  • First, make sure you have created a new form that you want to be the one to display on a mobile device. This process will require two separate forms - one that will display to all users (or desktop users) on the page and another that will show to users on mobile devices.
  • Navigate to Content > Website Pages or Content > Landing Pages (depending on where the website page that has your form is located)
  • Edit your page by hovering over the page until you see the action buttons, then click Edit
  • Locate the form editor within the page editor
  • Hover over the form module until you see the action buttons, then click the Make Smart icon (as shown below)

  • Choose Device Type then click Next step
  • Choose Mobile then click Next step
  • Edit the form options (make sure you choose a form and a redirect, at the very least) under the "Mobile" form section then click Done

  • Make sure you click Update or Publish on your website or landing page in order to push your changes live.


Was this article helpful?