Make Auth0 Forms Appear Wider

Knowledge Articles
1

Overview

This article explains how to make Auth0 forms wider using page templates.

Applies To

  • Forms
  • Page Templates
  • Styling

Solution

To make a form appear wider using page templates:

There are 2 CSS variables that will help with this:

–prompt-width which is the container for the form (part of the ULP templates), by default is 400px

–form-max-width which is the form max width, by default is 500px

To add code that only affects the form page, use the below:

{% if prompt.name == "custom-form" ...

See below for a more substantial example:

<!DOCTYPE html>

<html>




<head>

{%- auth0:head -%}

{% if prompt.name == "custom-form" %}

<style>

:root {

--prompt-width: 800px;

-form-max-width: 800px;

}

</style>

{% endif %}

</head>




<body class="_widget-auto-layout">

{%- auth0:widget -%}

</body>

</html>