The Spring 12 release of Site.com introduced a host of powerful features designed to help you build compelling, powerful sites. We covered using repeaters and data tables in a prior post. Now we’ll take the next logical step. Site.com helps you create and manage forms, allowing your visitors to submit new leads, cases, registration submissions, or any other object on the Force.com platform.

Developing a Palette for Site.com Forms

In my last Site.com-related post, I detailed how to create product listing page and a product details page using repeaters.

Product Details

This is a common pattern on many commercial sites. Visitors expect to browse your products and then drill down to a page listing that product’s details. Our laptop details page does a great job of giving a description and specifications of a laptop, but now it’s time to start generating leads for our Sales organization.

We’ll put a simple form on our product detail page that captures a lead. Open the Site.com Studio and you’ll probably notice  many more elements in the Page Elements palette, including forms and form elements. Add a form to the product detail page by opening the palette at a leaf node on the page:

Form Elements

When you add a form element to a page, Site.com shows the Form Builder dialog. Select the Object to bind the form to, select the fields to add to the form, and click Save:

NOTE: You may need to go to the guest user profile and set appropriate CRUD and field-level security for the Lead object.

Site.com Form Builder

 

This places a fully-functional form on the page. You can see this form and manipulate it in the studio:

Forms in the Site.com Studio

 

The form Builder added several required fields from the Lead object. We don’t want fields like Owner ID, Product Code, and Status to appear, so you can check the hidden checkbox in the Properties pane on the right of the studio. You can also configure a default value for these fields … a static value for Lead Status, and the product code from the querystring:

Configuring Default Values

 

These configurations will give you a form that submits not only the Lead’s contact information, but also the product interest … and any other field you choose to add to the Lead form.

Giving Thanks from Site.com Forms

It’s always polite to say thanks. When a visitor submits our form, Site.com provides two ways to say thanks: with a quick message on the form itself, or by redirecting the visitor to a new page. Select the form in the Page Structure pane. The Properties tab will show configuration options for when the user submits the form. Use the simple Display a Message option here:

Configuring the Submit Button

The finished product is a compelling product page, complete with a form where a visitor can get request more information on the product:

Product Details Page with Form

Submitting this form creates a new lead in the Sales Cloud … complete with lead details and product interest. Ambitious readers can easily augment this form with JavaScript to create a very rich and compelling visitor experience.

Site.com makes it easy to create a rich, interactive web experience with just a few clicks. And it’s pre-integrated with your existing Force.com data. Want to get started? Sign up for a free Developer Edition org today and give it a try!

tagged , , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Anonymous

    hello!

    i have follwed the same steps but i was not able to see the created record in my object.

    can you suggest the reasons or remedy to overcome the defect.

    • http://www.facebook.com/profile.php?id=589624223 Joe Morse

      Which object did you create? A standard object? A custom object?

      Keep in mind that if you’re using global search to find the new object it sometimes takes a bit of time for that new item to be indexed. I use list views with criteria to find the new records.