Edit the Look & Feel of an Opt-In Form (Text Tutorial)

Edit Form ColorsThe appearance of a form created with our opt-in form wizard can be altered to more closely match the design of your own website. Here’s how:

Jump to:

Changing the Title & Other Text
Editing Colors
Changing Fonts & Layout

Changing the Title & Other Text

Directly beneath the section where you can add & edit your individual form fields, you can change all the other text associated with the form. Though the titles of each section are fairly self-explanatory, here are more detailed descriptions:

  1. Title Text allows you to change the title as it appears on the form
  2. Required Field Label lets you change the “Required” label to whatever else you’d like it to say instead
  3. Submit Button Text lets you change the text of the form submit button itself

The section also allows you to turn on CAPTCHA verification by checking a box. Using CAPTCHA helps ensure that automated spam bots don’t clutter up your list with unusable addresses.

Editing Colors

The form’s border, background and text colors can all be changed either by entering the appropriate HTML color code of your choice or by:

  1. Clicking the appropriate color wheel
  2. This will open up a color dialog box. From here use the Hue picker (the thin strip to the right of the box) to choose your color’s hue
  3. Then use the Saturation + Value box to choose the actual color you want to use. As you click around this box, the form preview will immediately display the color you’ve clicked
  4. When you've chosen the color you want, click anywhere outside of the box to close it

Changing Fonts & Layout

Changing the fonts (face & size) and the layout of the form requires altering the HTML we provide at the end of the creation process. This particular line of code: div style="font-family: verdana; font-size: 11px; width: 160px; padding: 10px; border: 1px solid #245EB5; background: #30486B;" will allow you to change the font family, font size, and the width of the form, and it can be found right at the top of the code we generate for you.