To customize the Flow user interface, first of all, you have to embed the Flow into a Visualforce page. Create a Visualforce page and embed your Flow (Displaying feedback form based on age) into it, as shown in the following code:

<apex:page> 
<br/> 
<Center> 
<Font size ="6" color ="gold">Customer Service Feedback Form </font> 
</Center> 
<br/> 
<flow:interview name="Displaying_feedback_form_based_on_age"/>  
// Flow interview component is used to embed Flow in a Visualforce  Page. Displaying_feedback_form_based_on_age is Flow Unique Name. 
</apex:page>

It will display the embeded survey form into the Visualforce page and look like what is shown in the following screenshot:

Flow allows you to modify the user interface by applying a custom style using CSS. It allows you to customize specific parts of a Flow, such as the button style, button location, background, and look and feel of the screen and labels using a combination of Flow attributes and CSS classes.

Let's look at a business scenario. Sara Bareilles, who is working on the Flow Displaying feedback form based on age, received a new requirement to change the Date of birth field label color to blue and display the Next button in green at the top.

To modify the Flow user interface, we have to use Flow style classes with CSS styles. First of all, we will add a CSS style into Visualforce page to change the color of the Date of birth field label:

<style type="text/css"> 
.FlowDate { 
  color: Blue; 
} 
</style>

If you want to use the custom font (for example, Courier New) for the date label, then use the font-family attribute inside the FlowDate class:

<style type="text/css"> 
.FlowDate { 
  color: Blue; 
  font-family: Courier New;
} 
</style>

The next task is to modify the Next button's location and color. For that, we will add the flow:interview attributes, buttonLocation and buttonStyle, as shown in the following code:

<flow:interview name="Displaying_feedback_form_based_on_age" 
                buttonLocation="top" 
                buttonStyle=" color:Green; border:1px solid;"/>

So finally, the Visualforce page code will look like what is shown in the following code snippet:

<apex:page > 
  <br/> 
    <Center> 
      <Font size ="6" color ="gold">Customer Service Feedback Form </font> 
    </Center> 
  <br/> 
  <style type="text/css"> 
    .FlowDate { 
      color: Blue; 
      font-family: Courier New;
  } 
  </style> 
  <flow:interview name="Displaying_feedback_form_based_on_age" 
                  buttonLocation="top" 
                  buttonStyle=" color:Green; border:1px solid;"/> 
</apex:page>

The Visualforce page will look like what is shown in the following screenshot:

You can change the CSS style sheet as per your requirement.

Once you are done with the design, save the Visualforce page with the name Flow for Force.com Sites. The next step is to open Flow for unauthenticated access using Force.com sites.

Using Force.com site, open a Flow for unauthenticated access. Once you have embedded the Flow into a Visualforce page, then with the help of Force.com sites, you can open it for unauthenticated access. This means that users can access Flow without logging in to Salesforce. To open the access of Flow Displaying feedback form based on age, we have to add the Visualforce page Flow for Force.com Site to Force.com sites. For more details, perform the following steps:

1. Navigate to Setup | Build | Develop | Sites.
2. If you haven't registered the Force.com domain for your organization, then do that first. The sites page allows you to register the Force.com domain for your organization. Once you have successfully registered it, you can see a sites-related list on the Sites page. It will look like what is shown in the following screenshot:

3. To create a new site, click on the New button, as shown in the preceding screenshot. It will redirect you to the Site Edit page, where you have to enter the following details:

• • Site Label: Enter the site label. it will appear in the user interface. Enter Customer Service Feedback Form as Site Label.
  • Site Name: This will be autopopulated based on the site name.
  • Site Description: Write some meaningful text so that another developer/administrator can easily understand why this site was created.
  • Site Contact: Select the user who is responsible for receiving communication from site visitors and Salesforce.com.
  • Default Web Address: Create a unique URL for Force.com site by entering the Visualforce page unique name. Enter SurveyForm in the default web address textbox.
  • Active: Select this checkbox to activate the site after saving.
  • Active Site Home Page: From the lookup dialog, select the Visualforce page you have created to embed Flow. In this case, select Flow for Force.com Sites as the active site home page.

4. You can enter other details as well. Once you are done, click on the Save button. It will redirect you to the site detail page, which will allow you to configure your site.
5. Now we have to grant the Visualforce page access to the site user. To do this, navigate to site Visualforce pages-related list on the site detail page, click on the Edit button, and make sure that you have granted Visualforce pages to those you have used in Active Site Home Page and on your site.
6. The next step is to grant the custom object Survey__c permission to site guest users. For this, click on Public Access Setting, available on the site detail page, by clicking on the Survey object to grant, create, read, and edit permissions and also grant custom fields permission.
7. Once you are done, navigate to the site by following the path Setup | Build | Develop | Sites and click on the Site URL, which will appear as follows:

http://visualflowbook-developer-edition.gus.force.com/SurveyForm

The site will look like what is shown in the following screenshot:

You can check site usages history by clicking on the 24-Hour Usage History related list available on the site detail page.