diff --git a/.eslintrc.js b/.eslintrc.js
index d2e75e9..9eaccae 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
     'react/prop-types': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    'jsx-a11y/no-autofocus': 'off'
   },
   settings: {
     react: {
diff --git a/components/form/layouts/card/field.tsx b/components/form/layouts/card/field.tsx
index 7575233..8e80524 100644
--- a/components/form/layouts/card/field.tsx
+++ b/components/form/layouts/card/field.tsx
@@ -11,11 +11,12 @@ import { TextType } from '../../types/text.type'
 import { FieldTypeProps } from '../../types/type.props'
 
 interface Props {
+  focus: boolean
   field: FormPublicFieldFragment
   design: FormPublicDesignFragment
 }
 
-export const Field: React.FC<Props> = ({ field, design, ...props }) => {
+export const Field: React.FC<Props> = ({ field, design, focus, ...props }) => {
   const router = useRouter()
 
   const FieldInput: React.FC<FieldTypeProps> = fieldTypes[field.type] || TextType
@@ -56,7 +57,7 @@ export const Field: React.FC<Props> = ({ field, design, ...props }) => {
           <StyledMarkdown design={design} type={'question'} source={field.description} />
         )}
 
-        <FieldInput design={design} field={field} urlValue={getUrlDefault()} />
+        <FieldInput design={design} field={field} urlValue={getUrlDefault()} focus={focus} />
       </div>
     </div>
   )
diff --git a/components/form/layouts/card/index.tsx b/components/form/layouts/card/index.tsx
index c11d7d2..0c7b3d4 100644
--- a/components/form/layouts/card/index.tsx
+++ b/components/form/layouts/card/index.tsx
@@ -81,7 +81,7 @@ export const CardLayout: React.FC<LayoutProps> = (props) => {
                   return null
                 }
 
-                return <Field key={field.id} field={field} design={design} />
+                return <Field key={field.id} field={field} design={design} focus={i === 0} />
               })}
               <div
                 style={{
diff --git a/components/form/layouts/layout.props.ts b/components/form/layouts/layout.props.ts
index 8369c01..2e35c18 100644
--- a/components/form/layouts/layout.props.ts
+++ b/components/form/layouts/layout.props.ts
@@ -1,4 +1,4 @@
-import { FormPublicFragment, } from '../../../graphql/fragment/form.public.fragment'
+import { FormPublicFragment } from '../../../graphql/fragment/form.public.fragment'
 import { Submission } from '../../use.submission'
 
 export interface LayoutProps {
diff --git a/components/form/layouts/slider/page.module.scss b/components/form/layouts/slider/page.module.scss
index e69de29..1a729ba 100644
--- a/components/form/layouts/slider/page.module.scss
+++ b/components/form/layouts/slider/page.module.scss
@@ -0,0 +1,19 @@
+.main {
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    overflow: auto;
+    padding: 16px;
+
+    @media (max-width: 600px) {
+      display: block;
+    }
+  }
+}
+
diff --git a/components/form/types/date.type.tsx b/components/form/types/date.type.tsx
index 8d403c4..bfe876c 100644
--- a/components/form/types/date.type.tsx
+++ b/components/form/types/date.type.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledDateInput } from '../../styled/date.input'
 import { FieldTypeProps } from './type.props'
 
-export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const [min, setMin] = useState<Dayjs>()
   const [max, setMax] = useState<Dayjs>()
   const { t } = useTranslation()
@@ -42,6 +42,7 @@ export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
         initialValue={initialValue}
       >
         <StyledDateInput
+          autoFocus={focus}
           size={'large'}
           design={design}
           disabledDate={(d: Moment) => {
diff --git a/components/form/types/dropdown.type.tsx b/components/form/types/dropdown.type.tsx
index e065647..a650df4 100644
--- a/components/form/types/dropdown.type.tsx
+++ b/components/form/types/dropdown.type.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledSelect } from '../../styled/select'
 import { FieldTypeProps } from './type.props'
 
-export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const [open, setOpen] = useState(false)
   const { t } = useTranslation()
 
@@ -16,6 +16,7 @@ export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue
         initialValue={urlValue || field.value || null}
       >
         <StyledSelect
+          autoFocus={focus}
           design={design}
           open={open}
           onBlur={() => setOpen(false)}
diff --git a/components/form/types/email.type.tsx b/components/form/types/email.type.tsx
index b0f8b52..1fd2db4 100644
--- a/components/form/types/email.type.tsx
+++ b/components/form/types/email.type.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledInput } from '../../styled/input'
 import { FieldTypeProps } from './type.props'
 
-export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const { t } = useTranslation()
 
   return (
@@ -17,7 +17,7 @@ export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
         ]}
         initialValue={urlValue || field.value}
       >
-        <StyledInput design={design} allowClear size={'large'} />
+        <StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
       </Form.Item>
     </div>
   )
diff --git a/components/form/types/link.type.tsx b/components/form/types/link.type.tsx
index 8ff9e36..372dc0b 100644
--- a/components/form/types/link.type.tsx
+++ b/components/form/types/link.type.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledInput } from '../../styled/input'
 import { FieldTypeProps } from './type.props'
 
-export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const { t } = useTranslation()
 
   return (
@@ -17,7 +17,7 @@ export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
         ]}
         initialValue={urlValue || field.value}
       >
-        <StyledInput design={design} allowClear size={'large'} />
+        <StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
       </Form.Item>
     </div>
   )
diff --git a/components/form/types/number.type.tsx b/components/form/types/number.type.tsx
index 118791b..70a4cd0 100644
--- a/components/form/types/number.type.tsx
+++ b/components/form/types/number.type.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledNumberInput } from '../../styled/number.input'
 import { FieldTypeProps } from './type.props'
 
-export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const { t } = useTranslation()
 
   let initialValue: number = undefined
@@ -27,7 +27,7 @@ export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue }
         ]}
         initialValue={initialValue}
       >
-        <StyledNumberInput design={design} size={'large'} />
+        <StyledNumberInput autoFocus={focus} design={design} size={'large'} />
       </Form.Item>
     </div>
   )
diff --git a/components/form/types/text.type.tsx b/components/form/types/text.type.tsx
index 5bc9933..97a3064 100644
--- a/components/form/types/text.type.tsx
+++ b/components/form/types/text.type.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledInput } from '../../styled/input'
 import { FieldTypeProps } from './type.props'
 
-export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const { t } = useTranslation()
   // TODO focus when becomes visible
 
@@ -15,7 +15,7 @@ export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={urlValue || field.value}
       >
-        <StyledInput design={design} allowClear size={'large'} />
+        <StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
       </Form.Item>
     </div>
   )
diff --git a/components/form/types/textarea.type.tsx b/components/form/types/textarea.type.tsx
index 86f492d..4c6f1db 100644
--- a/components/form/types/textarea.type.tsx
+++ b/components/form/types/textarea.type.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StyledTextareaInput } from '../../styled/textarea.input'
 import { FieldTypeProps } from './type.props'
 
-export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
   const { t } = useTranslation()
 
   return (
@@ -14,7 +14,7 @@ export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={urlValue || field.value}
       >
-        <StyledTextareaInput design={design} allowClear autoSize />
+        <StyledTextareaInput autoFocus={focus} design={design} allowClear autoSize />
       </Form.Item>
     </div>
   )
diff --git a/components/form/types/type.props.ts b/components/form/types/type.props.ts
index 4c7be8c..7320593 100644
--- a/components/form/types/type.props.ts
+++ b/components/form/types/type.props.ts
@@ -6,5 +6,6 @@ import {
 export interface FieldTypeProps {
   field: FormPublicFieldFragment
   design: FormPublicDesignFragment
+  focus?: boolean
   urlValue?: string
 }