Ready to create beautiful online forms?
Adding a custom design to your form's background can help those fields pop, especially if you want to make your form its own landing page.
Here's the step-by-step:
1. Select Form
If you selected an existing form, click 'Edit Form'.
2. Add and customize fields
Using the form's Builder tools, drag & drop the fields you need.
This is where you can reshape, resize and reposition your form fields. Remember to also edit each field's settings so they are optimized to your needs.
3. Go to Design
On the header of your builder dashboard you can see the Design tab. Click it.
4. Go to Form Background
On the right hand side of your form, you'll see the option to customize the form's background and select it.
Note: You can follow this same step-by-step to edit the form's page background. Simply select Page Background instead.
5. Choose a background Color
If you just want to add some color, you can choose from the color menu or add the specific color code.
You can also modify the color transparency of your form using the same menu.
6. Choose a background Image
You can add an image to your form's background by uploading the image of your choice into the box.
Notice that your fields get pretty hard to see when you upload an image or use a very dark color.
Your form might look like this:
This can be quickly fixed.
- Go to Global Settings
- Change the Style
Awesome! Now let's say you want a middle ground, you want those fields blending in a little better.
- Go to Fields
- Select the Background Color menu
- Change the transparency to your taste.
Or Choose a Theme
The quickest way to customize a form's design is to select an existing theme.
On the left side of your form builder you can see your Themes menu. You can apply an existing theme to your form, either from MightyForms or one of your saved themes.
Note: When selecting a theme, your current design choices will be overwritten and cannot be undone. You'll be asked to confirm this.
Once you are satisfied, click 'Publish' to save your work and publish it.
Learn more about how to create your own personal webform design.