Web Design in Oklahoma City

The new, integrated form payment features went live this morning as a part of HEATWAVE 2008. You just can't stop the hot new features all summer long! For a quick overview of how they work, see our original pre-release announcement. In this post, we're going to take a more detailed look at one specific application of the form payment features — collecting payment through a registration form.

Step one: create your form

Add a form element to your page, then click on the "edit form" button. This will launch the form editor.

Step two: edit the form settings

Go ahead and click the "form settings" tab at the top. Notice that the form settings are now broken into three sections including basic settings, advanced settings, and payment settings.

• Basic settings. I usually like to edit the form name and description right off the bat. Of course, you can always edit these later if you wish. Also on basic settings, you can add email addresses for entry notification if you wish and/or password protect your form (see image below).

  

• Advanced settings. This pane (pictured below) contains the controls for the way the user gets confirmation of their form. I'm going to choose "send an email" which will add a required email field to my form. I can click "edit" to set up the contents of the email I want to send to everyone who fills out my registration form. I'll also edit the display message which will show up on the page after the form and the payment have been completed.



• Payment settings. Here's where the new magic comes in. If you want to accept payments on your form, check the "enable payments" box. This will open up a few more fields that you'll need to complete (see image below). We'll discuss configuring these settings in the next step.

  

Step three: configure payment settings

Now that you've enabled payments, you need to configure the payment settings (see above image).

• Base price. Since we're setting up a registration form, we want everyone filling out the form to pay a set price for registration. Let's say the cost is $50. We'll put $50 in the base price field and everyone who completes the form will be charged at least $50.
• Payment processor. You can choose from PayPal, Google Checkout, or Authorize.net. When you select the correct processor, the fields below will request the information needed for the form to work with your merchant account. You won't be able to save your form until you enter valid merchant account information. Therefore, you will have to have an account already setup with one of these processors before you can use form payments.

Step four: build your form

Next, you'll want to build out your form to collect the information you need. Just click the "add fields" button at the top and choose the fields you want and edit the text on and around the fields. For our simple registration form, I'm going to add a name field, an address field, and a phone number field. I already have an email field in there since I opted to send a confirmation email, but I'll drag the email field below the name field to put it in better order.

Step five: create some "add-on" options

Perhaps at my event, I'm offering a few items that the registrants can choose to purchase if they want, like a workbook or a meal. The costs for these items needs to be added to the base cost of the registration if the user selects them. To do this, I can add a set of check boxes and assign pricing to each check box item (see image).

Maybe I'm also offering a T-shirt, but for that, I might need to use a separate drop down list in order to allow the user to select the correct size. Since XL shirts and above generally cost more, I can adjust the price for those sizes as well (see image).

Finally, I'd like to give my registrants the chance to donate an amount to a scholarship fund to help others who can't afford to attend my event to be able to come. I'll add a "price" field which will allow them to enter any amount they choose to be added to their total.

That's it!

Your registration form is now complete. Once it's saved to a live page on your website, your visitors can begin registering. When they submit the form, they will be taken to a checkout process through the payment processor you specified to complete the transaction.

I hope this tutorial helps to give you an idea of one possible application of the new payments functionality. There are limitless other applications that you can devise as well. Please let us know what you think in the comments and if you have any questions, feel free to post them to our LightCMS user forum or email them to our support team.