Change An AI Forms Look With CSS

ℹ️

This documentation is currently under construction. As more users express interest in it, it will be enriched with in-depth examples.

When creating your form, you can select a theme by choosing the container block. You can either start from scratch or use the default theme as your foundation:

In this documentation, we will provide a comprehensive list of the different classes you can apply CSS to in order to customize the appearance of AI Forms. We will begin with a "None" theme.

📖

For each class, you will find the selector and a modified version along with the added CSS.

mwai-form-container

.mwai-form-container {
    background-color: #bbdfd5;
    border-radius: 5px;
    padding: 15px;
}

mwai-copy-button

.mwai-copy-button {
	opacity: 1;
  width: 22px;
  height: 22px;
}


.mwai-copy-button > .mwai-copy-button-one {
	position: absolute;
	background-color: #bbdfd5;
	border-radius: 5px;
}

.mwai-copy-button > .mwai-copy-button-two {
	position: absolute;
	background-color: #91aba4;
	border-radius: 5px;

	margin-top: 6px;
  margin-left: 6px;
}

mwai-form-field-container

.mwai-form-field-container {
    background-color: white;
    border-radius: 5px;
    padding: 10px 3px;
    box-shadow: inset 0 0 10px #00000030;
}

mwai-form-field

.mwai-form-field {
    border: 0;
    text-align: center;
}

.mwai-form-field > legend {
    font-size: larger;
}

mwai-form-field-container

.mwai-form-field-container > select, input[type='text']
{
    border: 0;
		border-radius: 999px;
		padding: 5px 15px;

    background-color: #91aba4;
		color: white;
    
    width: 80%;
    height: 30px;
}

.mwai-form-field-container > input[type='checkbox'] {
	accent-color: #91aba4;
}

mwai-form-submit-container

.mwai-form-submit > button {
		border: 0;
		border-radius: 999px;

    background-color: #91aba4;
		color: white;
    font-size: larger;

    padding: 10px;
    margin-top: 10px;
}

Did this answer your question?

😞

😐

🤩