1. Home
  2. Design
  3. Customization
  4. Basic HTML and Customization Tips

Basic HTML and Customization Tips

It’s now simpler than ever to add a link to any text element, on any page of your offer! In the Customize section, just highlight text that you have already typed into the text element, click the “chain” icon at the top of the screen, and enter the destination URL. The highlighted text will turn blue, and voila! You just added a link.

Highlight text to add link
chain icon
enter URL
Finished link

(Pro-tip: you can change the link color in the Styles tab)

Another option is using an image element as a link. If you hadn’t noticed before, when you upload a picture, there is also a “URL” field just under the file upload button. Adding a URL to this field will turn the entire image into a clickable link! This is an excellent way to present entrants with eye-catching creative that invites them to visit your website for more information, or maybe a link to an exclusive offer available only to those who have entered this one.

Image as a link

Making numbers required in a text field

Update 10/2018: CSS and HTML are now available on the Advanced and Power plans. If you are on the Basic or Standard plans, you will need to upgrade to use custom CSS or HTML.

To collect phone numbers, postal codes, or other numerical data, you would add a text field and label it appropriately and maybe add some placeholder text to display the type of information that should be entered. This will usually prompt users to enter the correct type of data, but someone could still enter text into the field.
If you’d like to make sure that only numbers are allowed in that text field, switch the form fields section to custom mode (we recommend waiting until all fields have been added) and simply change the input type from “text” to “number.”

requiring numbers in a text field

Making a drop-down required

Currently by default, you can enter a selection within the drop-down to make it required, but this would make only that one selection required (meaning, if the user chose any other options, they would not be able to proceed). To make the field itself required instead of just one selection, switch the form fields section to custom mode (we recommend waiting until all fields have been added) and locate the HTML for the drop-down.

1: In the “select” div, just above the first option, add the word “required” after the ID.

2: Then, copy the one of the option rows and paste it into the first (top) position.

3: Remove the “option value” leaving only the quotation marks with no space in between, then change the label (we recommend labeling with something like ‘Please choose one’ or ‘Select’).
When you’re done, the HTML should look like this:

And the drop-down on the live campaign will appear like this and be required:

Required dropdown front-end

This is now a default control in the Customize section. Click to select the navigation element, then adjust the font-size, style, and color using the toolbar at the top of the screen:

Edit page nav font

By default, a user has to hover over the thumbnails of gallery submissions to see the vote button or the first couple of lines of the caption. If you’d like to display either (or both) of these, just paste the corresponding code into the CSS section of your offer:

Caption always on:
#page-container .gallery-item .gallery-item-info .gallery-item-caption,

#page-container .gallery-item .gallery-item-info .gallery-item-status.vote,

#page-container .gallery-item .gallery-item-info .vote-button {

display: block !important;

}

Vote button always on:

#page-container .gallery-item.show-vote-count .gallery-item-info .gallery-item-caption, #page-container .gallery-item.allow-vote .gallery-item-info .gallery-item-caption {

display: block !important;

}

If you have other customization in mind, email us at support@woobox.com or give us a call at 1-360-450-5200!

Updated on October 26, 2018

Was this article helpful?

Related Articles