diff --git a/src/components/fieldsCreateForm/FieldFooterOptions.js b/src/components/fieldsCreateForm/FieldFooterOptions.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6446f0b9fbd69735a1c055d79c59f301da37250
--- /dev/null
+++ b/src/components/fieldsCreateForm/FieldFooterOptions.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+function FieldFooterOptions(props) {
+
+ return (
+ <>
+ <FormControlLabel
+ control={
+ <Switch
+ onChange={e => props.setRequiredField(props.idq) }
+ value="required"
+ color="primary"
+ checked={props.required}
+ />
+ }
+ label="Obrigatória"
+ />
+ <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
+ <DeleteOutlinedIcon />
+ </IconButton>
+ </>
+ );
+
+
+}
+
+
+export default FieldFooterOptions;
\ No newline at end of file
diff --git a/src/components/fieldsCreateForm/FormFieldCheckbox.js b/src/components/fieldsCreateForm/FormFieldCheckbox.js
new file mode 100644
index 0000000000000000000000000000000000000000..c4f88cdb7b2f7fd0b3855755d220effae4145d65
--- /dev/null
+++ b/src/components/fieldsCreateForm/FormFieldCheckbox.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(3),
+ width: theme.spacing(100),
+ minheight: theme.spacing(16),
+ margin: theme.spacing(2)
+ },
+ questionsGrid: {
+ marginBottom: '20px'
+ },
+}));
+
+
+
+function FormFieldCheckbox(props) {
+ const classes = useStyles();
+
+ return (
+ <Paper className={classes.paper}>
+ <Grid container>
+ <Grid item xs={12} className={classes.questionsGrid}>
+ <TextField value={props.question} label="sua pergunta"
+ onChange={e => props.setQuestionField(e.target.value, props.idq)}/>
+ </Grid>
+ <Grid item container
+ direction="column"
+ justify="flex-start"
+ alignItems="flex-start" xs={5} className={classes.questionsGrid}
+ >
+ {
+ props.options.map((x, index) => {
+ return <Grid container>
+ <Grid item container
+ justify="center"
+ alignItems="center"
+ xs={1}
+ >
+ <CheckBoxOutlineBlankIcon/>
+ </Grid>
+ <Grid item xs={10}>
+ <TextField label={"opção "+index} value={x} fullWidth
+ onChange={e => props.setSelectOption(e.target.value, props.idq, index)} />
+ </Grid>
+ <Grid item xs={1}>
+ <IconButton aria-label="remove option"
+ onClick={() => { props.removeSelectOption(props.idq, index) } }>
+ <CloseIcon />
+ </IconButton>
+ </Grid>
+ </Grid>
+ })
+ }
+ </Grid>
+ <Grid item container
+ direction="column"
+ justify="flex-start"
+ alignItems="flex-start"
+ xs={4}
+ >
+ <IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }>
+ <AddCircleIcon />
+ </IconButton>
+ </Grid>
+ <Grid item container
+ direction="row"
+ justify="flex-end"
+ alignItems="flex-end"
+ xs={3}
+ >
+ <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq}
+ setRequiredField={props.setRequiredField} required={props.required}/>
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+
+}
+
+export default FormFieldCheckbox;
\ No newline at end of file
diff --git a/src/components/fieldsCreateForm/FormFieldRadio.js b/src/components/fieldsCreateForm/FormFieldRadio.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce10709559547929e966015952f0e48e8dd03d4a
--- /dev/null
+++ b/src/components/fieldsCreateForm/FormFieldRadio.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(3),
+ width: theme.spacing(100),
+ minheight: theme.spacing(16),
+ margin: theme.spacing(2)
+ },
+ questionsGrid: {
+ marginBottom: '20px'
+ },
+}));
+
+
+
+function FormFieldRadio(props) {
+ const classes = useStyles();
+
+ return (
+ <Paper className={classes.paper}>
+ <Grid container>
+ <Grid item xs={12} className={classes.questionsGrid}>
+ <TextField value={props.question} label="sua pergunta"
+ onChange={e => props.setQuestionField(e.target.value, props.idq)}/>
+ </Grid>
+ <Grid item container
+ direction="column"
+ justify="flex-start"
+ alignItems="flex-start" xs={5} className={classes.questionsGrid}
+ >
+ {
+ props.options.map((x, index) => {
+ return <Grid container>
+ <Grid item container
+ justify="center"
+ alignItems="center"
+ xs={1}
+ >
+ <RadioButtonUncheckedIcon/>
+ </Grid>
+ <Grid item xs={10}>
+ <TextField label={"opção "+index} value={x} fullWidth
+ onChange={e => props.setSelectOption(e.target.value, props.idq, index)} />
+ </Grid>
+ <Grid item xs={1}>
+ <IconButton aria-label="remove option"
+ onClick={() => { props.removeSelectOption(props.idq, index) } }>
+ <CloseIcon />
+ </IconButton>
+ </Grid>
+ </Grid>
+ })
+ }
+ </Grid>
+ <Grid item container
+ direction="column"
+ justify="flex-start"
+ alignItems="flex-start"
+ xs={4}
+ >
+ <IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }>
+ <AddCircleIcon />
+ </IconButton>
+ </Grid>
+ <Grid item container
+ direction="row"
+ justify="flex-end"
+ alignItems="flex-end"
+ xs={3}
+ >
+ <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq}
+ setRequiredField={props.setRequiredField} required={props.required} />
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+
+}
+
+export default FormFieldRadio;
\ No newline at end of file
diff --git a/src/components/fieldsCreateForm/FormFieldSelect.js b/src/components/fieldsCreateForm/FormFieldSelect.js
new file mode 100644
index 0000000000000000000000000000000000000000..3158b466acf45f9495309eade1ac2859283e6fb0
--- /dev/null
+++ b/src/components/fieldsCreateForm/FormFieldSelect.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(3),
+ width: theme.spacing(100),
+ minheight: theme.spacing(16),
+ margin: theme.spacing(2)
+ },
+ questionsGrid: {
+ marginBottom: '20px'
+ },
+}));
+
+
+
+function FormFieldSelect(props) {
+ const classes = useStyles();
+
+ return (
+ <Paper className={classes.paper}>
+ <Grid container>
+ <Grid item xs={12} className={classes.questionsGrid}>
+ <TextField value={props.question} label="sua pergunta"
+ onChange={e => props.setQuestionField(e.target.value, props.idq)}/>
+ </Grid>
+ <Grid item container
+ direction="column"
+ justify="flex-start"
+ alignItems="flex-start" xs={5} className={classes.questionsGrid}
+ >
+ {
+ props.options.map((x, index) => {
+ return <Grid container>
+ <Grid item xs={11}>
+ <TextField label={"opção "+index} value={x} fullWidth
+ onChange={e => props.setSelectOption(e.target.value, props.idq, index)} />
+ </Grid>
+ <Grid item xs={1}>
+ <IconButton aria-label="remove option"
+ onClick={() => { props.removeSelectOption(props.idq, index) } }>
+ <CloseIcon />
+ </IconButton>
+ </Grid>
+ </Grid>
+ })
+ }
+ </Grid>
+ <Grid item container
+ direction="column"
+ justify="flex-start"
+ alignItems="flex-start"
+ xs={4}
+ >
+ <IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }>
+ <AddCircleIcon />
+ </IconButton>
+ </Grid>
+ <Grid item container
+ direction="row"
+ justify="flex-end"
+ alignItems="flex-end"
+ xs={3}
+ >
+ <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq}
+ setRequiredField={props.setRequiredField} required={props.required} />
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+
+}
+
+export default FormFieldSelect;
\ No newline at end of file
diff --git a/src/components/fieldsCreateForm/FormFieldText.js b/src/components/fieldsCreateForm/FormFieldText.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b032df32bef6d8a69b7730ea78b21821a3dfb85
--- /dev/null
+++ b/src/components/fieldsCreateForm/FormFieldText.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(3),
+ width: theme.spacing(100),
+ height: theme.spacing(16),
+ margin: theme.spacing(2)
+ },
+ questionsGrid: {
+ marginBottom: '20px'
+ },
+}));
+
+function FormFieldText(props) {
+ const classes = useStyles();
+
+ return (
+ <Paper className={classes.paper}>
+ <Grid container>
+ <Grid item xs={12} className={classes.questionsGrid}>
+ <TextField value={props.question} label="sua pergunta"
+ onChange={e => props.setQuestionField(e.target.value, props.idq)}/>
+ </Grid>
+ <Grid item xs={9} className={classes.questionsGrid}>
+ <TextField
+ disabled
+ id="outlined-disabled"
+ label=""
+ defaultValue="Resposta curta"
+ />
+ </Grid>
+ <Grid item container
+ direction="row"
+ justify="flex-end"
+ alignItems="flex-end"
+ xs={3}
+ >
+ <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq}
+ setRequiredField={props.setRequiredField} required={props.required} />
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+
+}
+
+export default FormFieldText;
\ No newline at end of file
diff --git a/src/components/fieldsCreateForm/FormFieldTitle.js b/src/components/fieldsCreateForm/FormFieldTitle.js
new file mode 100644
index 0000000000000000000000000000000000000000..019765277d39183f827570683cf2417ca117fc40
--- /dev/null
+++ b/src/components/fieldsCreateForm/FormFieldTitle.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(3),
+ width: theme.spacing(100),
+ height: theme.spacing(16),
+ margin: theme.spacing(2)
+ },
+ questionsGrid: {
+ marginBottom: '20px'
+ },
+ title: {
+ fontSize: 'xx-large'
+ },
+ description: {
+ fontSize: 'x-large'
+ },
+}));
+
+function FormFieldText(props) {
+ const classes = useStyles();
+
+ return (
+ <Paper className={classes.paper}>
+ <Grid container>
+ <Grid item xs={12} className={classes.questionsGrid}>
+ <TextField value={props.question} label="Formulário sem título" fullWidth
+ onChange={e => props.setTitleField(e.target.value, props.idq)}
+ InputProps={{
+ classes: {
+ input: classes.title,
+ },
+ }}/>
+ </Grid>
+ <Grid item xs={9} className={classes.questionsGrid}>
+ <TextField value={props.question} label="Descrição do formulário"
+ onChange={e => props.setDescriptionField(e.target.value, props.idq)}
+ InputProps={{
+ classes: {
+ input: classes.description,
+ },
+ }}/>
+ </Grid>
+ <Grid item container
+ direction="row"
+ justify="flex-end"
+ alignItems="flex-end"
+ xs={3}
+ >
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+
+}
+
+export default FormFieldText;
\ No newline at end of file