Register

How can I change the settings of my Timer element inside the Form Designer ?

Let's see how you can adjust the Settings of your Timer element: 

A. Setting up the Timer

1. Click on the Settings icon on the toolbar that appears above your Timer when you hover over it.
Your Timer's Settings instantly appear on the left of your Designer page.
SF-Timer_Element-A_1.png

2. Choose a Background Color for the area behind your Timer, out of a color palette.
SF-Time_Element-_A_2.png
Please note that the background of the countdown timer is an image and therefore it will never have the exact same colour as the html colour.

B. Selecting a Timer theme

1. Use the Select theme drop-down menu to choose your Timer's theme.
Sf-Timer_Element-B_1.png

You have the two choices:

  • Normal
    Generates a Timer wherein the countdown is displayed using numbers, as in the example below.
    SF-Time_Element-Normal_Timer.png

  • Text
    Generates a Timer wherein the countdown is displayed using text, as in the example below.
    SF-Timer_Element-Text_Timer.png
    When opting to use a Text Timer, you have the flexibility of changing the text to whatever you want it to be-just make sure to keep the brackets that contain the text, so that the timer actually works!

    To take a peek at what your Text Timer is going to look like, click on Preview mode:
    SF-Timer-Preview.png

    Once you are in Preview mode, select the device type(s) to check out how your subscription form and Text Timer look on each. 
    SF-Timer-Preview-Device_Type.png
    This way, you can ensure that to make sure that your Text Timer looks great no matter what device it is being viewed on!


C. Setting up the expiration date

This is the heart of the Timer, so it bears looking into in more detail.

1. Click on the Expiration Date area, located on the Timer settings list.
SF-Timer-C_1.png

A calendar appears.

2. Click on the blue buttons to navigate between months.
SF-Timer-_C_2.png
A warning will appear if you try to navigate to a date before the current one.

3. Click on a date to select when your Timer will expire.
SF-Timer-C_3.png

4. Select the
 Time page, to set the exact time on that date when the Timer will expire.
SF-Timer-C_4.png

5. Drag the Hours and Minutes sliders to set the exact time of day.
SF-Timer-C_5.pngRemember that the format is hh:mm set in 24-hour time.


6. Click on the Save button when you're done.
SF-Timer-C_6.png

D. Setting up a Normal Timer
Use the editing options to set up your normal Timer.
SF-Timer-_D_1.png
Click on each the + sign of each of Settings menus to expand said menus. 

i) Your Font Settings options are:

  • Label Color
    Allows you to pick a color out of a color palette, for the labels under each counter.  

  • Font family
    Select your desired font from the drop-down menu.

  • Label Font Family
    Choose a font for your Timer/s labels using the drop-down menu.

  • Font Size
    Use the up -down arrows to choose your Timer's font size.  Alternatively, type the desired number directly into the area next to the arrows.

  • Label Font Size
    Use the up/down arrows to select your Timer labels' font size.  Alternatively, type the desired number directly into the area next to the arrows.

  • Label Color
    Allows you to pick a color out of a color palette, for your Timer's labels.

  • Time Color
    Allows you to pick a color out of a color palette, for the numbers on the counters.

   ii) Your Box Settings options are:

  • Border Color
    Allows you to choose a color out of a color palette, for the border of the boxes.

  • Box Color
    Allows you to choose a color out of a color palette, for the boxes inside your Timer.

  • Box radius
    Changes the radius of each box. Values go from 0 (square) to 60 (circle).

  • Border width
    Sets the width for the border of the boxes inside your timer. Value range is 0 to 29.

iii) Your Edit Labels Settings options are:

  • Days Label
    Edit the label on the Days field.

  • Hours Label
    Edit the label on the Hours field.

  • Minutes Label
    Edit the label on the Minutes field.

  • Seconds Label
    Edit the label on the Seconds field.
       

E. Setting up a Text Timer

The Text Timer is less complex in its design than the Normal timer.  If you have already selected a Background Color and Expiration Date for your Text Timer, then you can play around with its Padding!

1. Use the up/down arrows  in the Padding option (or type directly into the appropriate field) to set the desired amount of overall padding for your Timer.
SF-Timer-_E_1.png

2. Clicking on the lock icon next to the Padding reveals further Padding options: Padding Top, Padding Bottom, Padding Left and Padding Right.
SF-Timer-_E_2.png
As before, use the up/down arrows (or type into each field directly), to set the amount of Padding for the Top, Bottom, Left and Right of your Text TImer.

Moosend's Form Designer is a powerful tool which enables you to design beautiful and effective subscription forms with ease, so make sure you use it to its fullest!