<form>
<Container
sx={{
alignItems: 'center',
display: 'grid',
gap: 16,
margin: '0 auto ',
maxWidth: 600,
paddingBottom: 3,
}}
>
<Container
sx={{
display: 'grid',
gridTemplateColumns: '0.5fr 1fr 1fr',
gap: 16,
}}
>
<FormControl fullWidth>
<FormControl.Label>Title</FormControl.Label>
<Select defaultValue="">
<Select.Option value="" disabled>
Title
</Select.Option>
<Select.Option value="miss">Miss</Select.Option>
<Select.Option value="mr">Mr</Select.Option>
<Select.Option value="mrs">Mrs</Select.Option>
<Select.Option value="mx">Mx</Select.Option>
</Select>
</FormControl>
<FormControl fullWidth required>
<FormControl.Label>First name</FormControl.Label>
<TextInput required />
</FormControl>
<FormControl fullWidth required>
<FormControl.Label>Last name</FormControl.Label>
<TextInput required />
</FormControl>
</Container>
<FormControl fullWidth required>
<FormControl.Label>Enterprise name</FormControl.Label>
<TextInput required />
</FormControl>
<FormControl fullWidth required>
<FormControl.Label>Enterprise URL</FormControl.Label>
<TextInput leadingText="github.com/" required />
</FormControl>
<FormControl fullWidth required>
<FormControl.Label>Country</FormControl.Label>
<Select defaultValue="">
<Select.Option value="" disabled>
Country
</Select.Option>
<Select.Option value="us">United States of America</Select.Option>
<Select.Option value="uk">United Kingdom</Select.Option>
</Select>
</FormControl>
<FormControl hasBorder required>
<FormControl.Label>
Contact me about GitHub Enterprise Server{' '}
<FormControl.Hint>
<Text size="200" variant="muted">
I'm interested in learning more about{' '}
<InlineLink
size="200"
href="https://github.com/enterprise"
target="_blank"
>
GitHub Enterprise Server
</InlineLink>{' '}
and would like to be contacted by GitHub’s sales team.
</Text>
</FormControl.Hint>
</FormControl.Label>
<Checkbox />
</FormControl>
<Container
sx={{
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'var(--brand-control-color-border-default)',
backgroundColor: 'var(--brand-color-canvas-inset)',
height: 150,
width: '100%',
borderRadius: 6,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text size="200" variant="muted">
Captcha
</Text>
</Container>
<FormControl required>
<FormControl.Label>
<Text size="200" variant="muted">
I hereby accept the{' '}
<InlineLink
size="200"
href="https://github.com/customer-terms"
target="_blank"
>
GitHub Customer Agreement
</InlineLink>{' '}
on behalf of my organization and confirm that I have the authority to
do so. For more information about GitHub's privacy practices, see
the{' '}
<InlineLink
size="200"
href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
target="_blank"
>
GitHub Privacy Statement.
</InlineLink>{' '}
</Text>
</FormControl.Label>
<Checkbox />
</FormControl>
<Container
sx={{
justifyContent: 'end',
display: 'inline-grid',
gap: 16,
}}
>
<Button variant="primary" type="submit">
Start trial
</Button>
</Container>
</Container>
</form>