Creating A Live Show Page

Lesson text coming soon...

CSS for Custom Inline Form

The following CSS codes can be entered into the Custom CSS field in a form's Styles settings to modify the form as described.

Inline Form Fields & Button

If you turn on the "Inline Form" setting located in "Styles & Options" in the Form Builder, then add the following CSS code to the "Custom CSS" field, it will ensure that your form field and button display next to eachother (as opposed to being stacked vertically):

.menu-field-wrap {
position: relative;
width: 50% !important;
}

NOTE: If you have one field and one button, the code above will work. If you have two fields and one button, change the width to 33%. If you have three fields, change it to 25%.

Remove Top Margin From Button

When you add the CSS code above, it will cause the button to display slightly lower than the field. To fix this, add the following CSS code to the "Custom CSS" field inside of "Styles & Options" in the Form Builder:

#_builder-form > div > div:nth-child(2) > div > div {
margin-top: 0px !important;
}

Change Button Text Font To Any Font

The Form Builder allows you to change the font on the button to a short list of fonts. If your font is not listed, you can override this setting and add any font you wish.

Simply replace [ADD YOUR FONT NAME] in the code below with the name of your font and add the full code to the "Custom CSS" field in the "Styles & Options" settings of the Form Builder:

button.btn p {
font-family: [ADD YOUR FONT NAME] !important;
}

Make The Button Change Color When Hovered Over

button.btn:hover {
background-color: [ADD YOUR COLOR HEX CODE] !important;
}

Remove White Space Around The Form

#_builder-form .fields-container {
padding: 0px !important;
}

#_builder-form {
padding: 0px !important;
}