Guides (SDK /API) | Technical Reference | BBDN | How-to Documentation
You are here: Custom Parts Example: Pledge Form > Create a Custom Pledge Form (Design)

Create a Custom Pledge Form (Design)

Code sample project: Custom Pledge Form

  1. Open your Parts project in Visual Studio. This example uses a project called PartsProjectExample.

  2. Add a new custom part (type) to the project called CustomPledgeForm. For information about how to add a custom part (type) to a project, see Add a Custom Part to a Parts Project.

  3. A VB file may appear in an editor. For example, CustomPledgeFormProperties.vb may appear. You will use this file later. But for now, close the VB files for properties and take a look at Solution Explorer.

  4. Open CustomPledgeFormDisplay.ascx for editing in Designer. Right-click CustomPledgeFormDisplay.vb and select View Designer.

    Right-clicking...

    The ASCX form appears in Design Mode.

  5. Click View > Toolbox. The Toolbox appears.

  6. Add a break after [lblError]. You can place the cursor after the text and press ENTER.

  7. Add a Panel to the form. Adjust the height and width so that there is space to work in.

  8. Change the panel ID to PanelPledgeForm. To adjust the panel properties, you can right-click the panel and select Properties.

    The Properties window appears. ID is probably at the bottom.

    Changing Panel1 to PanelPledgeForm...

  9. Add a label inside the Panel.

  10. Change the label ID to LabelPledgeForm. Change the text of the label to Make a pledge.

  11. Add a line break. Place the cursor next to the label and press ENTER.

  12. Add an HTML Table.

  13. Delete the right-most column so that there are three rows and two columns.

  14. Adjust the widths of the columns as necessary.

  15. Add a Label to each of the cells in the left column. Change the text to First, Middle, and Last respectively. Change the IDs to LabelFirst, LabelMiddle, and LabelLast.

  16. Add a TextBox to each of the cells in the right column. Change the IDs to TextBoxFirst, TextBoxMiddle, TextBoxLast respectively.

  17. Add a break after the table.

  18. Add a Label for Email address and a break after that. Change the ID for the Label to LabelEmail.

  19. Add a break.

  20. Add a TextBox for email address. Change the ID for the TextBox to TextBoxEmail.

  21. Add a break.

  22. Add a Label for Amount. Change the ID for the Label to LabelAmount.

  23. Add a break.

  24. Add a TextBox for amount. Change the ID for the TextBox to TextBoxAmount.

  25. Add a break.

  26. Add a Button with the text Pledge. Change the ID for the Button to ButtonPledge.