Ask Search:
manjushree Singhmanjushree Singh 

How integrate visualforce page to custom object

Hello All

I need small assistance, i have been given an assignment of creating demo app on Education management, i have created several custom objects, one of them is Application (Application__c), now i am trying to create a form through visualforce page just like (web to lead or web to case) where whenever a candidate fills the form and clicks submit, all the information shoulld sit in a Application custom object, i tried building an vf page, but information is not coming to the salesforce, due i need to create apex class for this (extension)??  below is my vf code

<apex:page showHeader="false" sidebar="false">
<html>
        <body>
            <form action="https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST" align="center">
                
                <input type="hidden" name="orgid" value="00B4P000005iNvBUAU"/>
                <input type="hidden" name="retURL" value="http://google.com"/>
                
                <style>

                               
                    input[type=text], select {
                    width: 50%;
                    padding: 12px 20px;
                    margin: 8px 0;
                    display: inline-block;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    box-sizing: border-box;        
                    
                    }
                    
                    input[type=submit] {
                    width: 50%;
                    background-color: DarkGray;
                    color: white;
                    padding: 14px 20px;
                    margin: 8px 0;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    
                    
                    }
                    
                    body {
                    background-image: url("{!$Resource.Fromimage}");
                    background-position: 50% 300%;
                    background-repeat:repeat;
                    color: white;
                    }
                    
                </style>
                
                <br> <img style="width:20%;height:10%" src="{!$Resource.Prosera_Logo}"/></br>
            
            <frameset marginheight = "10"  marginwidth = "10" scrolling = "no">
                              
                <br><br><h2><font size="6"><b>Candidate Application Form</b></font></h2></br></br>
        <br></br>       
<p style="padding-right: 5px;font-size:20px;" align="Center">
    First Name* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <input  id="00N1U00000TjzLa" maxlength="255" name="00N1U00000TjzLa" size="20" type="text" style="width:500px"/><br></br>

     Last Name* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <input  id="00N1U00000TjzLa" maxlength="255" name="00N1U00000TjzLa" size="20" type="text" style="width:500px"/><br></br>
   Email * &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
<input  id="00N1U00000TjzLp" maxlength="80" name="00N1U00000TjzLp" size="20" type="text"  style="margin-left: 47px;width:500px"/><br></br>

Phone * &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<input  id="00N1U00000TjzLk" name="00N1U00000TjzLk" size="20"  type="text"  style="margin-left: 47px;width:500px" /><br></br>

Years of experience* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
<select  id="00N1U00000TjzOy" name="00N1U00000TjzOy" title="Years of experience" style="width:500px"><option value="">--None--</option><option value="Fresher">Fresher</option>
<option value="0-3 Years">0-3 Years</option>
<option value="3-5 Years">3-5 Years</option>
<option value="5-10 Years">5-10 Years</option>
</select><br></br>


Current Location* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
<input  id="00N1U00000TjzP3" maxlength="255" name="00N1U00000TjzP3" size="50" type="text" style="margin-left: 40px;width:500px"/><br></br>

Course Interested In &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<select  id="00N1U00000TjzPr" multiple="multiple" name="00N1U00000TjzPr" title="Course Interested In" style="width:500px"><option value="VF">VF</option>
    <option value="Salesforce">Salesforce</option>
    <option value="Amazon Web Services">Amazon Web Services</option>
    <option value="Data Science">Data Science</option>
    <option value="Web Development">Web Development</option>
    <option value="Big Data">Big Data</option>  
</select><br></br>

<input type= "hidden" id="Origin" name="Origin" value="Web" />
<input type="submit" name="submit" style="width:500px"/>
</p>
</frameset>

</form>
</body>
</html>
</apex:page>



i have created a custom object for the fields
Best Answer chosen by manjushree Singh
Sakthivel MadeshSakthivel Madesh
Try this:

here you dont need the apex controller if you are using the below approach:
<apex:page standardController="Application__c" showHeader="false" sidebar="false">
<apex:form>
 <apex:pageBlockSection columns="1"> 

        <apex:pageBlock title="Candidate Application Form"/>
        <apex:inputField value="{!Application__c.First_Name__c}"/>
        <apex:inputField value="{!Application__c.Last_Name__c}"/>
        <apex:inputField value="{!Application__c.Email__c}"/>
        <apex:inputField value="{!Application__c.Phone__c}"/>
        <apex:inputField value="{!Application__c.Current_Location__c}"/>
        <apex:inputField value="{!Application__c.Years_of_Experience__c}"/>
        <apex:inputField value="{!Application__c.Course_Interested_In__c}"/>
        </apex:pageBlockSection>
        <apex:commandButton Value="Save" action="{!save}" />   
   </apex:form> 
</apex:page>


 

All Answers

Amnon KruviAmnon Kruvi
This page is built with plain HTML and not really Visualforce (other than <apex:page>).
You will need to build the page with Visualforce and a standard controller, then use correct Visualforce apex:inputField tags instead of generic HTML inputs that link to the correct fields.
Sakthivel MadeshSakthivel Madesh
Hi manjushree Singh,

This is a web-to-lead form and the information will capture under your Lead object (Standard Salesforce Object) and not in your custom object, if you require the custom object then you need to build as per the custom object and expose from force.com sites if the form to fill from public users.

Thanks & Regards,
Sakthivel Madesh
manjushree Singhmanjushree Singh
@Amnon

Thats because positioning and look & feel looks good when i click a preview button, so do i need to create entirely in
the vf code??

User-added image
Amnon KruviAmnon Kruvi
If you want the page to work like a normal Salesforce page, then yes - you'd need to convert it to Visualforce. As it stands, this page tries to submit a form to the web-to-lead service, which I guess theoretically should work, but only to create leads and not applications.
manjushree Singhmanjushree Singh
@sakthival

Yes that my plan, after building the visualforce web form for custom object i need to expose through force.com sites
Sakthivel MadeshSakthivel Madesh
Hi manjushree Singh,

Follow this Trailhead module - 
https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals/visualforce_forms

here the record is created in the Account object, so just replace with your Custom object with all your fields and then finally create a sites and enable this vf page into your sites.

Thanks & Regards,
Sakthivel Madesh
manjushree Singhmanjushree Singh
@ Amnon

i tried developing code in vf page and i get wierd error messages

vf code

<apex:page standardController="Application__c"  extensions="Applicationclass" showHeader="false" sidebar="false">
<apex:form>
 <apex:pageBlockSection columns="1"> 

        <apex:pageBlock title="Candidate Application Form"/>
        <apex:inputField value="{!a.First_Name__c}"/>
        <apex:inputField value="{!a.Last_Name__c}"/>
        <apex:inputField value="{!a.Email__c}"/>
        <apex:inputField value="{!a.Phone__c}"/>
        <apex:inputField value="{!a.Current_Location__c}"/>
        <apex:inputField value="{!a.Years_of_Experience__c}"/>
        <apex:inputField value="{!a.Course_Interested_In__c}"/>
        </apex:pageBlockSection>
        <apex:commandButton Value="Save" action="{!save}" />   
   </apex:form> 
</apex:page>

error message is - 
Error: Unknown property 'Application__cStandardController.a'
===============================================================

my controller

public class Applicationclass {
    Application__c a = new Application__c();
    
    public Application__c geta(){
        return a;
    }
    
    Public PageReference applicationform_page(){
    return Page.Application_page;
    }

    public Applicationclass(ApexPages.StandardController controller) {

    }
    public PageReference save_all(){
        insert a;
    }


}

error is

Page Application_page does not exist

any suggestions??
Amnon KruviAmnon Kruvi
You don't need an extension for what you're doing - the standard controller is enough.
Once you have it, use "Application__c" instead of "a" as the variable containing the application.

The error you have right now is because the variable a is not exposed with a getter in Applicationclass. If you need an extension at any point for this (as of right now it doesn't look like you do), you would need to get the record from the standard controller in the constructor method (controller.getRecord()) and save it locally, rather than creating your own new Application__c record.
Sakthivel MadeshSakthivel Madesh
Try this:

here you dont need the apex controller if you are using the below approach:
<apex:page standardController="Application__c" showHeader="false" sidebar="false">
<apex:form>
 <apex:pageBlockSection columns="1"> 

        <apex:pageBlock title="Candidate Application Form"/>
        <apex:inputField value="{!Application__c.First_Name__c}"/>
        <apex:inputField value="{!Application__c.Last_Name__c}"/>
        <apex:inputField value="{!Application__c.Email__c}"/>
        <apex:inputField value="{!Application__c.Phone__c}"/>
        <apex:inputField value="{!Application__c.Current_Location__c}"/>
        <apex:inputField value="{!Application__c.Years_of_Experience__c}"/>
        <apex:inputField value="{!Application__c.Course_Interested_In__c}"/>
        </apex:pageBlockSection>
        <apex:commandButton Value="Save" action="{!save}" />   
   </apex:form> 
</apex:page>


 
This was selected as the best answer
Sakthivel MadeshSakthivel Madesh
Hi manjushree Singh,

Any progress? let me know if you need any further information? happy to assist you!

Thanks,
Sakthivel Madesh
manjushree Singhmanjushree Singh
@Sakthivel

It worked fine, But how do i design the UI part, i tried to modify the above code which you provided, in the preview page, its all horrible (i have pasted the snapshot1 ),

<apex:page standardController="Application__c" showHeader="false" sidebar="false">
<apex:form>
   <style>

                               
                    input[type=text], select {
                    width: 50%;
                    padding: 12px 20px;
                    margin: 8px 0;
                    display: inline-block;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    box-sizing: border-box;        
                    
                    }
                    
                    input[type=submit] {
                    width: 50%;
                    background-color: DarkGray;
                    color: white;
                    padding: 14px 20px;
                    margin: 8px 0;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    
                    
                    }
                    
                    body {
                    background-image: url("{!$Resource.Fromimage}");
                    background-position: 50% 300%;
                    background-repeat:repeat;
                    color: white;
                    }
                    
                </style>
                 <br><br><h2><font size="8"><b>Candidate Application Form</b></font></h2></br></br>
        <br></br>  

        First Name* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <apex:inputField value="{!Application__c.First_Name__c}"/>
        
        Last Name* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <apex:inputField value="{!Application__c.Last_Name__c}"/>
        
         Email * &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
        <apex:inputField value="{!Application__c.Email__c}"/>
        
        Phone * &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <apex:inputField value="{!Application__c.Phone__c}"/>
        
        Current Location* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
        <apex:inputField value="{!Application__c.Current_Location__c}"/>
        
        Years of experience* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
        <apex:inputField value="{!Application__c.Years_of_Experience__c}"/>
        
        Course Interested In &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <apex:inputField value="{!Application__c.Course_Interested_In__c}"/>
        Save* &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;
        <apex:commandButton Value="Save" action="{!save}" />   
        
   </apex:form>
</apex:page>Horribly form
manjushree Singhmanjushree Singh
How can i design the code where the form must look like this?User-added image
Sakthivel MadeshSakthivel Madesh
Hi Manjushree,

Here is some example to apply css in vf page, just follow the instructions and similar way try with your vf page.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_custom.htm

Thanks & Regards,
Sakthivel Madesh
manjushree Singhmanjushree Singh
@Sakthivel

I somehow wrote a code, but when i click on the save page, the details are stored in the custom object, but it is not rendering another website, 

i modified it a little bit, this time the page is redered to another page, but the details are getting stored
Any suggestion??

my first code, details are getting saved, but the re renderring is not happening

<apex:page standardController="Application__c" showHeader="false" sidebar="false">
<apex:form >

   <style>

                               
                    input[type=text], select {
                    width: 50%;
                    padding: 12px 20px;
                    margin: 8px 0;
                    display: inline-block;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    box-sizing: border-box;        
                    
                    }
                    
                    input[type=submit] {
                    width: 50%;
                    background-color: DarkGray;
                    color: white;
                    padding: 14px 20px;
                    margin: 8px 0;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    
                    
                    }
                    
                    body {
                    background-image: url("{!$Resource.Fromimage}");
                    background-position: 50% 300%;
                    background-repeat:repeat;
                    color: white;
                    }
                    
                </style>
                 <br><br><h2><font size="8"><b>Candidate Application Form</b></font></h2></br></br>
        <br></br>  
        

        <br> First Name </br>
        <apex:inputField value="{!Application__c.First_Name__c}"/>
        
       
       <br> Last Name </br>
       <apex:inputField value="{!Application__c.Last_Name__c}"/>
        
        <br> Email </br>
        <apex:inputField value="{!Application__c.Email__c}"/>
        
        <br> Phone </br>
        <apex:inputField value="{!Application__c.Phone__c}"/>
        
        <br> Current Location </br>
        <apex:inputField value="{!Application__c.Current_Location__c}"/>
         
        <br> Years of experience </br>
        <apex:inputField value="{!Application__c.Years_of_Experience__c}"/>
        
        <br> Course Interested In </br>
        <apex:inputField value="{!Application__c.Course_Interested_In__c}"/>
        
        <br> Save </br>
  <apex:commandButton value="Save" action="{!Save}"/>    

   </apex:form>    
</apex:page>

=====================================================================
in my second code, rerenderring is happening, details are not getting saved

<apex:page standardController="Application__c" showHeader="false" sidebar="false">
<apex:form>
<form action="https://www.google.com" method="POST" align="center">
 </form>

   <style>

                               
                    input[type=text], select {
                    width: 50%;
                    padding: 12px 20px;
                    margin: 8px 0;
                    display: inline-block;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    box-sizing: border-box;        
                    
                    }
                    
                    input[type=submit] {
                    width: 50%;
                    background-color: DarkGray;
                    color: white;
                    padding: 14px 20px;
                    margin: 8px 0;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    
                    
                    }
                    
                    body {
                    background-image: url("{!$Resource.Fromimage}");
                    background-position: 50% 300%;
                    background-repeat:repeat;
                    color: white;
                    }
                    
                </style>
                 <br><br><h2><font size="8"><b>Candidate Application Form</b></font></h2></br></br>
        <br></br>  
        

        <br> First Name </br>
        <apex:inputField value="{!Application__c.First_Name__c}"/>
        
       
       <br> Last Name </br>
       <apex:inputField value="{!Application__c.Last_Name__c}"/>
        
        <br> Email </br>
        <apex:inputField value="{!Application__c.Email__c}"/>
        
        <br> Phone </br>
        <apex:inputField value="{!Application__c.Phone__c}"/>
        
        <br> Current Location </br>
        <apex:inputField value="{!Application__c.Current_Location__c}"/>
         
        <br> Years of experience </br>
        <apex:inputField value="{!Application__c.Years_of_Experience__c}"/>
        
        <br> Course Interested In </br>
        <apex:inputField value="{!Application__c.Course_Interested_In__c}"/>
        
        <br> Save </br>
        
  <apex:commandButton value="Save" action="{!Save}" oncomplete="abc();"/>  
    <script>
    function abc() {
    window.location = 'https://www.google.com';
}
</script>
</apex:form>
</apex:page>

 
Veenitha GowdaVeenitha Gowda
@Sakthivel , @Amnon

Any suggestions or guidences??
Sakthivel MadeshSakthivel Madesh
Hi, This wont work in your case,

you need to call the extenstions and then to redirect the url after save the record.

Reference:
https://salesforce.stackexchange.com/questions/51607/using-pagereference-to-redirect-after-new-record-insert
https://salesforce.stackexchange.com/questions/87885/create-save-button-on-custom-visualforce-page-to-redirect-to-parent-record-detai/87891


Thanks & Regards,
Sakthivel Madesh
manjushree Singhmanjushree Singh
hi Sakthivel Madesh

Thank you so much for your abouve links, it really helped me a lot, i created through force.com websites, but the form is not displaying as it should when its opened in the other browser, i think this has something to do with the visualforce or view state thinggy

shows clearly in vf page

my force.com sites page
Veenitha GowdaVeenitha Gowda
@
manjushree Singh

I have not yet tried it, i will try and let you know