VF Page: 

Apex Class: 

Analyzing the code:

Practical Examples: 

<apex:page standardcontroller="Campaign" extensions="MassEmailFromCampaign" >
<!-- Javascript function to check all rows in the table -->
<script>
function checkAll(cb)
{
   var inputElem = document.getElementsByTagName("input");
   for(var i=0;i<inputElem.length;i++)
     {
             if(inputElem[i].id.indexOf("selectLine1")!=-1)
                   inputElem[i].checked = cb.checked;
      }
}
</script>
<!-- End of Javascript function -->
<apex:form >
<apex:sectionHeader title="Step 1" subtitle="Select Contacts to send Email"/>
<apex:pageblock >
<apex:pageBlockSection title="Search Contacts" columns="1"></apex:pageBlockSection>

<!-- Div to give a colored box effect -->

<div style="border-width:2px;border-style:solid;border-color:orange;">

    <!-- Panel grid to display boxes o accept user input values -->
    <apex:panelGrid columns="2">
        <apex:outputLabel style="font-weight:bold;" value="Contact E-mail" ></apex:outputLabel>
        <apex:inputText value="{!userinput}"/>
        <apex:outputLabel style="font-weight:bold;" value="Contact Name" ></apex:outputLabel>
        <apex:inputText value="{!userinp}"/>
    </apex:panelGrid>
    <!-- End of panelgrid -->
    <!-- Div to position the commandbutton appropriately -->
        <div style="position:relative;left:75px;">
             <apex:commandButton value="Search" action="{!contactsearch}" />
        </div>
    <!-- End of div -->
        <br/>
</div>

<!-- End of colored box div -->
    <br/>
<!-- Display error message -->
<apex:pagemessage strength="2" title="Error!!" severity="error" detail="Please select a contact or enter email address to proceed" rendered="{!errormsg}"/>
<!-- End of error message -->

<!-- Display search results -->
<apex:pageblocksection columns="1" title="Search results" rendered="{!NOT(ISNULL(results))}" >
  <apex:outputpanel id="Contactlist">

        <apex:pageBlockTable value="{!results}" var="contacts">
             <apex:column >
                <apex:facet name="header">
                    <apex:inputCheckbox onclick="checkAll(this)"/>
                </apex:facet>
                    <apex:inputCheckbox value="{!contacts.selected}" id="selectLine1"/>
            </apex:column>
            <apex:column headervalue="Contact Name">
                <apex:outputtext value="{!contacts.con.Name}"/>
            </apex:column>
            <apex:column headervalue="Account Name">
                <apex:outputtext value="{!contacts.con.Account.Name}"/>
            </apex:column>
            <apex:column headervalue="Title">
                <apex:outputtext value="{!contacts.con.Title}"/>
            </apex:column>
        </apex:pageBlockTable>  <br/><br/>

    </apex:outputpanel>
</apex:pageblocksection>
<!-- End of search results -->

<!-- Commandbutton to proceed to next screen -->
  <div style="position:relative;left:75px;">
      <apex:commandButton value="Next" action="{!processSelected}"/>
      <apex:commandbutton value="Cancel" action="{!Cancel}"/>
  </div>
<!-- End of Commandbutton -->
</apex:pageblock>
</apex:form>
</apex:page>

public class MassEmailFromCampaign {

/* Constructor Function. The campaign id is captured in this function */
public MassEmailFromCampaign(ApexPages.StandardController controller)
{
 cid=System.currentPageReference().getParameters().get('id');
}
/* Variable declarations */

Public String cid;                                                            // Stroes Campaign Id
public List<cContact> contactList {get; set;}                                 // Wrapper class which stores contact data and a boolean flag.
public Boolean selectAllCheckbox {get; set;}                                  // Stores checkbox data.
public boolean errormsg=false;                                                // Error msg. When no contact has been selected.
String userinput;                                                             // Contact Email
String userinp;                                                               // Contact Name

Public boolean displayboxes;

Public List<Contact> results = new List<Contact>();                                     // Contact search results.
Public List<Contact> selectedContactsstep2 = new List<Contact>();             // Selcted Contacts


/* End of Variable declarations */

/* Getter and setter methods for getting the user input ie. Contact name and email from the UI */

public String getuserinput(){return userinput;}
public void setuserinput(String userinp){this.userinput=userinp;}
public String getuserinp(){return userinp;}
public void setuserinp(String userinp){this.userinp=userinp;}


/*End of Getter and Setter methods */



/* Method to Search the contact database to fetch the query results */
public List<Contact> contactsearch()
{
     errormsg=false;
     contactList = new List<cContact>();
     for(Contact c : [select Account.Name,Name,FirstName,LastName,Email,title,Id from Contact where Email like :userinput+'%' and Name like :userinp+'%'])
     {
         contactList.add(new cContact(c));
     }

 return null;
}
/* End of method */


/* Method for returning the contact search results to the UI */
public List<cContact> getresults()
{

 return contactList;

}
/* End of Method */


/* Wrapper class to contain contact record and a boolean flag */
public class cContact
{
 public Contact con {get; set;}
 public Boolean selected {get; set;}

 /*This is the contructor method. When we create a new cContact object we pass a
 Contact that is set to the con property. We also set the selected value to false*/
 public cContact(Contact c)
 {
     con = c;
     selected = false;
 }
}
/* end of Wrapper class */


/* Method to fetch the selected records and send email to them */
public PageReference processSelected()
{

  List<Contact> selectedContacts = new List<Contact>();
  if (contactList!= null)
  {
     for(cContact cCon : getresults()){
        if(cCon.selected == true){
             selectedContacts.add(cCon.con);
         }
     }

     selectedContactsstep2=selectedContacts;
  }
 /* return error message if no contact is selected */
 if (selectedcontacts.size()==0)
 {
     errormsg=true;
     return null;
 }
 else
 {
     errormsg=false;
     String id=System.currentpagereference().getparameters().get('id');
     Pagereference p=new Pagereference ('/apex/MassEmailFromCampaignStep2');
     return p;
 }

}
public List<SelectOption> getItems()
{
 List<SelectOption> options = new List<SelectOption>();
 options.add(new SelectOption('YES','YES'));
 options.add(new SelectOption('NO','NO'));
 return options;
}


/* return error message if no contact is selected */
public boolean geterrormsg()
{
 return errormsg;
}


/* Method to cancel the entire process */
public Pagereference Cancel()
{
        Pagereference p =new Pagereference('/'+cid);
        return p;
}
       

}