User Level: 
Click on an image to make it bigger.
D7 - Text Editor - WYSIWYG Form Controls - DocuSign - PowerForm

1. DocuSign PowerForm Sample

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Add Child Page

2. Add A Page in Drupal

Add a new page in Drupal.

In our example, we add a new book page into a group by clicking the Add Child Page link.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Add Title

3. Add a Title

To get started, add a title in the Title field.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Change Text Format to Full HTML

4. Display Form Control Tool Buttons

By default, you will not see the form control buttons. To access them, in the Text Format selection box, click, on Full HTML.

You will then see the button collection appear.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Click Form Button

5. Add Form Control

In the text editor toolbar, click the Form button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Form Properties Box

6. Form Properties Box Appears

The Form Properties dialog box will appear.

This dialog box contains all of the critical information needed to get to the form in question and integrate with it.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Copy PowerForm URL

7. Fetch PowerForm Base URL

Open another tab and go to your PowerForm.

Once on it, look up in the address bar.

Select the URL over to the question mark and the copy your selection.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Add Form Data

8. Add Form Data to Form Properties Dialog Box

Name field = add a name.

Action field = Paste URL.

Encoding select box = application/x-www-form.

Click the OK button.

 

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Form Boundaries in Text Editor

9. Form Boundaries Displayed

A red rectangle will appear in your text editor.

This is a form. Add all of your form control fields inside of this box. It will stretch open as you add fields into it.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Click Hidden Field Button

10. Add A Hidden Field

We need to add a hidden field that contains the ID of the form we want to connect with.

Click the Hidden Field button to add it.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - PowerForm ID Location in URL

11. Get PowerForm ID Number

Return to your PowerForm tab.

In the URL, look for the long ID number at the end of the URL.

Copy this number.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Add Powerform ID in Dialog Box

12. Configure Hidden Field

Return to your Drupal site.

In the Hidden Field Properties dialog box:

Name text field = enter a name for your field.

Value text field = paste in your PowerForm ID number. Ctrl/Cmd + V does not work here. You will need to right click and select Paste from the menu.

Click the OK button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Hidden Field Icon

13. Hidden Field Added

A hidden field icon will appear inside of the rich text editor.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Type Label Into Editor

14. Add a Text Field Label

Enter a new line beneath your hidden field.

On the new line, type the words you want to use as a label for the new text field you will add.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Click Text Field Button

15. Add Text Field

Click the Text Field button to add a text field on the new line.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Add Docusign Field Name

16. Configure Text Field for DocuSign Field

In the Text Field Properties dialog box, at a minimum, do the following:

Name text field = enter the actual machine name of the DocuSign field.

Type selection field = Text.

Click the OK button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Text Field Added

17. Text Field Added

An empty box will appear at the end of the label you created.

Add any other text fields you need.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Click Add Selection Field

18. Add a Selection Field

Enter down a new line and add a new label, similar to what was done for the Text Field previously.

Click on the Selection Field to add a new select list to your form.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Add Select Options

19. Configure Selection Field

In the Selection Field Properties dialog box, at a minimum, add the following:

Name field = enter a name of your choice.

Text field = enter the text that you want to provide to your user to select.

Value field = enter the value you want to store when the user selects the text above.

Click the Add button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Select Options Added

20. All Options Added

Continue adding your select options until they are all added.

Click the OK button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Select Box Added

21. Selection Field Added

Your Selection Field will now appear in your text editor.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Click Button Tool

22. Add a Submit Button

Once all of the data is added into the form, it needs to be submitted. To do this, we need a Submit Button.

Click on the Button tool.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Configure a Submit Button

23. Configure Submit Button

In the Button Properties dialog box, enter the following:

Name field = enter the text that you want to display on the button.

Text (Value) field = enter the word Submit.

Type select field = Submit.

Click the OK button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Submit Button Added

24. Submit Button Added

The Submit Button will display in the rich text editor.

Now it's time to put things into action.

Scroll down and click the Save button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Fill Out Form to Test

25. Test Form Out

Once your new form loads, enter your data into it.

Click the Submit button.

D7 - Text Editor - WYSIWYG Form Controls - DocuSign - Signed Document

26. DocuSign PowerForm Filled Out

You should then be taken outside of the Drupal site to the DocuSign PowerForm.

Your data should be automatically entered into the form.