form-builder

How to: Create Sweepstakes Before you start creating your first form, please create a name for your campaign using the following format:

YearMonthDay_NameOfCapaign_CountryVertical For example, Germany Beauty just ran a competition for Clinique beginning on May 15th. So they named it 20120515_Clinique_GermanyBeauty.

You will use this several times during the campaign creation process and it will help us to keep things clear if you respect the naming format outlined above.

I.

Download the light version of the CoffeeCup form builder

PC: http://www.coffeecup.com/web-form-builder/ Download and run the .exe file to install Mac: http://itunes.apple.com/us/app/web-form-builder-lite/id480985143 It’s free but you have to download it from the app store. For that you will need to use your user name and id.

II.

Building Your First Form :)

1. Start CoffeeCup Web Form Builder Lite from your programs menu 2. Click on New to create a new form.

3. Select the first element you want to add to your form. We use Text Field for short text entries like names.

Click on the field and then modify the Properties tab for that field.

LABEL : What you type in the Label area will actually show up in the form. This would be in your country language. I typed What is your first name? but you could have entered just Prenom which is Name in French or whatever suits you.

NAME : What you type in the name field will be used by the program to control the upload and data management process. Make sure the Name field is filled out English.

Max Length: For Text Fields that you will use for first name and last name you want to set the Max Length to 25 characters. For Email you likewise need to set the Max Length to 25 characters. If you forget to do this you will receive an error message when you try to fill out the form from MailChimp.

REQUIRED : For fields that you want to upload to MailChimp you need to select the required option.

You don’t have to always create a first and last name field, you could create just a first name field or no name field at all, but if you want those fields to upload to MailChimp you need to select required. For email fields, if you want them to upload to MailChimp you must select required. For other fields like file uploads or Text Areas you probably don’t want to upload those fields to MailChimp and therefore it does not matter if you make them required or not.

4. Ok now I have my form created with a few fields: I’ve added a Text Field for the first name, Radio Buttons to ask people what their favorite color is and an Email field. Sweet.

5. Now click on the Themes button from the main menu (top left of your screen). Most of the time what you will want to do is select the transparent theme because we will overlay your form on top of an image or a background color that we define using html (we will cover this later).

6. Now click on the Form Options tab on the right of your screen.

BACKGROUND : We just selected the transparent theme in step 5, so our background color should now be set to transparent / none.

BORDER : None FORM WIDTH : The default is 600px, but we usually use 400px because a tab in Facebook is 810px, so 400px looks pretty good as it is about half the width of the screen.

7. Now go ahead and double click on the submit button. We are going to modify the style because the default button and button position aren’t that great. Here is what I change: FOOTER PROPERTIES Height : Set to 1 Padding : Set to 0 SUBMIT BUTTON Font: A black button with white text pretty much matches everything, so set the font to white Label: Change the Submit text into your language

Padding: I like a fatter button so I always set the padding to 10 Button Color: Set to Black

Question: I don’t want a black button. Mkay. So then I would suggest setting the button color to one of the official colors.

I want to make a Saturated Yellow button so I double click on the button color and enter the Hex value of FFD500 in the field (see image).

GLOSSYBOX Official Colors: You can use the Saturated colors for your button.

Color HEX Value

Saturated Yellow FFD600

Saturated Pink

Saturated Aqua

Saturated Blue

E61868

00AA8D

0080C8

PETITEBOX Official Colors: Hex Value 1d4b81

8. Click on the Settings button (top left) Form Publishing: Enter our account information which for the time being is going to be Email Address : inboundmarketingcompetitions@gmail.com Password: burger12

een cast and d documen nt. Suffice itt to say that Email Notices: We will cover this in a separate scre e the option n to send up p to two em mails with ev very form. You Y can cho oose to sen nd one emaiil you have to yoursself if you lik ke but you could c also send s a sepa arate email to t up to 2 emails e that are entered d in the form.

Saving Data: D You don’t need to o worry abo out this tab Confirm m Options: We want to o select the e Redirect to t Another URL option n. We wantt to redirectt the persson to our website orr blog afterr filling out the form because this allows us to drop a Google Analytics A trracking coo okie on theirr browser. We W want to o know how w many sale es our socia al media effforts are generating each e month, and with a tracking cookie c we will w be able to t see if any y of the pe eople who signed up for f our com mpetition alsso bought a glossybox x within 60 days (when n the track king cookie will expire)).

A typical Google Tracking link should look k like this http://w www.glossy ybox.de/?uttm_source= =facebook& &utm_mediu um=social& &utm_camp paign=Roya a lShaving g/ Base URL ? ?utm_source e= http://w www.glossy ybox.de/ facebook

&utm_mediium= & s social

&utm_cam mpaign= RoyalShav ving

Mailing Lists: Normally you would not need to fill out anything in this tab, unless you needed to send sweepstakes related emails to contestants during or immediately after the competition. One theoretical scenario would be if you were doing a virtual scavenger hunt and emailing people each day with new clues. Another reason might be if you wanted to email people announcing the winners or thanking them etc.

Go to https://us5.admin.mailchimp.com/lists/ and enter User : glossyboxsocial Password: burger12 Go to lists and Create a List. The List Name must match the campaign name you created at the beginning of this document. Fill in the other fields however you want…it really doesn’t matter since we can deal with this later if need be.

Now go back to your Form Builder and click on the Settings button and then the Mailing Lists tab in the new window. Enter the following API key and click ok

698c350203b1cef84b65f59f64c49198-us5 A new page will load. Select the list name that corresponds to your campaign. If you don’t see your campaign it means that you did something wrong when you attempted to create and save (did you remember to save) your new list in Mail Chimp.

Select your campaign and click on Match Fields.

In the new Field Matching window I clicked on Email and selected the email field from my Form Fields.

Then I clicked on FNAME and selected FirstName from my form fields. For LNAME I didn’t select any fields from my form because in my form I only asked for people’s email and first name.

Now be sure that : Subscriptions are added to this list when: Always The option Subscribe upon submit (single opt-in) is selected and Subscriptions are removed from this list when Never is selected Click OK

9.

You are now ready to save your file. Click on the Save button in the main menu. You want to name the file using the campaign name we defined at the beginning of this document. I suggest that you create a new folder on your desktop called Form-Builder. Save the file in this folder.

10.

Now publish your form. The form will automatically be published to the CoffeeCup S drive. Here is what you will see: We will be using the URL in blue on our Facebook Tab or Blog page to publish the form. You can click on the URL to see your form live on the internet. Test it to make sure everything is working properly.

11.

To view the results of your campaign you can log into the CoffeeCup S drive

https://www.coffeecup.com/sdrive/dashboard/73672/forms/ User Name: inboundmarketingcompetitions@gmail.com Password: burger12

Select the form you are interested in. You can click on the chart to see statistics for your campaign (it’s the button with the bar chart and 175 in the screen shot below)

12.

So you created your form. Now what? You need to get it online in your facebook tab or on your blog right? Go to the Inbound Marketing Team’s ticketing system and submit a request for us to embed your form and upload your images to the Facebook tab or blog page. We will also check to make sure that everything is working properly.

Be sure to include the following in your ticket

1. Name of campaign (which you defined at the beginning of this document) 2. Image you need uploaded 3. Description of the campaign and how it should work, especially if people need to receive emails this is important. You can also include the email text that you want included in your campaign and we will structure it in HTML and send it back to you so you can upload it to your form.

4. DEADLINE (Date and Time that his campaign needs to go live at) We suggest that you put your request in for a sweepstakes as soon as you know about it. We can configure the sweepstakes WITHOUT the image from creative and then just add the image in at the last minute if you are having trouble getting your images on time from creative.

But the we are not running a drive through here in Inbound Marketing so please don’t come to us 24 hours before your sweepstakes needs to go live with a request. Submit your request at least 2 working days (working days are Monday to Friday in Berlin) before you need your sweepstakes to go live.

As always we are here to help you and to walk you though this process if you are getting stuck. So contact your Inbound Marketing Coach with any questions you have, or set up an appointment to do a call through the ticketing system by selecting your coach’s name from the ticketing system dropdown.

In the next installment in this series we will cover   

How to mark-up your own HTML emails How to upload images to the server How to code a facebook tab or blog post using HTML, CSS and IFRAMES (Hurrah!)