Submission form style settings give you the opportunity to customize the form's buttons, labels, fields, headings, error messages, and more so the form reflects your brand and looks the way you want.
Use the Styles tab to customize the appearance of your event submission form.
When setting the submission form's styles, you don't have to start completely from scratch. If you already set your color palette using your organization's logo, that color palette is available to you as you assign the form's text and background colors.
I'd like to know more about the Color Picker and setting a color palette from a logo.
For detailed descriptions of each section's settings, see Submission form style settings explained.
You may have to go back and forth between the style settings and the preview window before you get the final look you want.
Click the submission form styles section you want to learn more about.
You can replace, with your own custom buttons, the default Next, Submit, Back, and Submit Another Event buttons that appear on the first, second, and third pages of the published submission form.
Select or search for button images you already uploaded or upload a new image.
I'd like a little more help with selecting, searching for, and uploading images.
An example of what's possible: custom Back and Submit buttons on the second page of the published submission form.
The font styles you choose in the Default Styles section of the Styles tab determine the default settings for all other sections of the tab. You can change those defaults as needed.
Default style settings become the submission form defaults.
If you already set your color palette using your organization's logo, that color palette is available to you in the Color Picker.
The image color palette you set in base styles is available to you on the submission form Styles tab.
If you didn't set an image color palette, you can use the Color Picker to set the default font color to any value you want.
I'd like to know more about using the Color Picker.
Label styles control the appearance and position of the field labels on the submission form.
Same as default settings unless you change them. Control the size and appearance of the label text.
Control the space above, below, and to the right and left of the labels. For example, larger top and bottom padding puts more vertical space between the labels.
Tip If you prefer, you can use ems instead of pixels to control label padding. One em equals the current font size. If you set label font size to 10px, a padding setting 0.5em equals 5px.
Right-aligned field label with default padding.
Left-aligned field label with default padding.
Tip Be sure to coordinate margin and padding settings for labels and fields so the two line up with one another.
Control the position of the field labels in relationship to field boxes and the other text on the form.
By default, the labels are aligned right. You can left align or center the labels if you prefer.
Fields refer to the content boxes on your form that correspond to each label. You can control the appearance of the field text and size of and distance between the field boxes themselves.
Same as default settings unless you change them. Control the size and appearance of text provided or typed by submitters in field boxes.
Control the space between field boxes and between the boxes and content above or below them. To add vertical space between fields, use larger top and bottom margins.
The left-margin setting affects the amount of space between the the field box and its label (you might want to coordinate this setting with the right-padding label setting).
Tip Setting a right margin affects required fields and fields with drop-down arrows in a way you might not expect. It adds space between the field box and the arrow or required asterix.
Submitter information and event information refer to the headings of the submitter and event sections of the submission form. You set styles for each section heading separately.
Tip In addition to controlling text and padding styles as described below, you can replace the default heading labels (Submitter Information and Event Information) with your own custom labels. To replace the labels, on the Event Submission Form Settings page, click the Settings tab. In the Submitter Info and Event Info sections, for Submitter header label and Event Info header label, replace the default text with the custom text you prefer.
Same as default settings unless you change them. Control the size and appearance of the heading text.
Control the space above, below, and to the left and right of each heading. Larger padding values indent headings and put more space between headings and the content above or below them.
Custom submitter and event information headings with 12pt font size and 10px left padding.
Error styles refer to the appearance of error messages submitters see when they forget to provide required information or make other submission errors. You can change the default settings.
Control error message background color. The default background color is yellow.
Control the size and appearance of the error message text. The default settings are red 8pt bold text.
Tip To see the default error message settings or to preview your custom settings, on the Edit Submission tab, in the Event Submission Form box, click Preview. In the preview window, DO NOT fill out at least one of the required fields. Click Next.
Error message background and text customized to match the organization's brand.
The submission review page is where submitters have a chance to review the information they provided before they submit it. It's the second page of the submission form, the page submitters see after they click Next on the first page.
Same as default settings unless you change them. Control the size and appearance of the text at the top and bottom of the submit page (outlined in red in the image that follows).
By default, the text is aligned left. You can center or right align it.
You can customize the appearance and alignment (but not the content) of the two text blocks outlined in red.
