Web Form Builder

The Form Builder module gives users the ability to create small web forms, without the need to write complex HTML, which can be used to capture information back into the PDI system. This module can be used to create web forms that allow people to RSVP to events, volunteer, donate to the campaign, or answer questions which will be captured back into the PDI system as flag data.

The Form Builder page can be accessed by hovering over the Web Forms section in the Navigation Menu, and clicking the Create / Edit Forms button.

Web Form Overview

The Web Forms allows users to build simple to complex HTML pages, and web forms. The Form Builder provides you with a near infinite amount of options when creating these pages. Below, features a comprehensive overview of the Web Form builder.

Basics

Blocks are added to the 'Form Builder' by dragging them from the 'Blocks' menu into the 'Drop a content block here' field. The 'Drop a content block here' field will disappear once a content block has been added to the 'Form Builder,' but new content can continue to be added to the 'Form Builder' by dragging them from the 'Blocks' menu, and placing the new block either above or below a previously placed block.

- Allows the user to move content blocks around in the 'Form Builder.'

- Allows the user to remove the content block from the 'Form Builder.'

- Allows the user to view a preview of the page.

Content Blocks for Building your Web Form

The Content Blocks are the building blocks of your web forms. Each element list below can be added individually, however, some blocks such the Question Fields block requires a secondary block, the Contact Fields block.

Contact Fields - The Contact Fields block creates a contact form that allows individuals to enter in contact information, which will then be added into the People Database of your Organization Account. This content block allows for all basic contact information such as Name, Address, Phone Number, Email Address, Employer, and Occupation. Each of these options, besides Name, can either be added or removed from the block. Note: This content block is required if you are using your web form to capture any information.
Event Fields - The Events Fields block creates a form that displays information for the selected event, which was created in the Events Calendar and Events List widget on the homepage, allows individuals to RSVP for the event, and purchase tickets.
Volunteer Fields - The Volunteer Fields block creates a form that allows individuals to volunteer for an upcoming event activity.
Donations Fields - The Donations Field block creates a form that allows individuals to donate to your campaign / organization. You will need to complete the Payment Setup page before this feature becomes accessible.
Credit Card Fields - The Credit Card Fields block creates a form that allows individuals to enter in their credit card information, so they can make donations or purchase. You will need to complete the Payment Setup page before this feature becomes accessible.
Survey Question - The Survey Question block creates a form that allows individuals to answer survey questions, which were created in the Survey Question section of the Surveys & Data Configuration page. The answers in the survey will be captured back into the PDI system as flags.
Membership - The Membership block allows individuals to pay for their membership dues.
Image - The Image block allows the user to add an image to the page.
Paragraph Text - The Paragraph Text block allows the user to add plain text to the page.
Separator - The Separator block allows the user to add a horizontal rule to the page.
Button - The Button block creates a button icon with custom text and a custom URL.
Mixed Block - The Mixed Block blocks allows the user to add text and an image on the same horizontal line. The first mixed block displays images on the left and text on right, while the second block displays text on the left, and images on the right.
Image Group - The Image Group block allows the user to add multiple images to the same block.

Editing Visible Items and Form Messages

The Content Info tab features various options that allows you to customize your entire web form. These elements control the look and entire functionality of your web form.

Captcha - Activating this button adds a Captcha form to your web form, which will need to be filled out before they can submit their information.
Icons - Activating this button displays icons throughout various textboxes in the web form.
Submit Button - Activating this button adds a submit button to your web form allowing you to capture information entered in your web form.
Success Submit Message - The text in this field is displayed upon a successful web form submission.
Redirect URL - Redirect the individual towards the URL in the textbox upon a successful web form submission. Note: This will always supersede any message entered in the Success Submit Message textbox.

Form Info

Body Background Color - Controls the color of the background outside of the web form.
Form Background Color - Controls the color of the body of the web form.
Form Width - Controls the width of the web form.
Line Height - Controls the space between lines of text.
Form Border Style Controls the style of the border around the web form.
Form Border Color - Controls the color of the border around the web form.
Form Border Thickness - Controls the thickness of the border around the web form.
Form Font Style - Controls the font type used in the web form.
Form Font Size - Controls the size of the font used in the web form.
Form Font Color - Controls the color of the font used in the web form.
Main Align - Controls the alignment of the text in the web form.

Block Info

Container Background Color - Controls the color of the content block.
Line Height - Controls the space between lines of text in the content block.
Container Border Style - Controls the style of the border around the content block.
Container Border Color - Controls the color of the border around the content block.
Container Border Thickness - Controls the thickness of the border around the content block.
Container Padding Top - Controls the padding at the top of the content block.
Container Padding Bottom - Controls t the padding at the bottom of the content block.
Container Padding Left - Controls the padding on the left of the content block.
Container Padding Right - Controls the padding on the right of the content block.
Container Font Style - Controls the font style used in the content block.
Container Font Size - Controls the font size used in the content block.
Container Font Color - Controls the color of the font used in the content block.
Container Align - Controls the alignment of the text in the content block.

Item Info

The Item Info tab is controls the settings of the currently selected item within the Content Block. The options displayed in this tab will vary depending on the item selected and range from style options to functionality options. Below is a list of all possible options featured in the Item Info tab.

Basic Item Controls

Control Width - Controls the width of the selected item.
Control Height - Controls the height of the selected item.
Control Padding Top - Controls the top padding of the selected item.
Control Padding Bottom - Controls the bottom padding of the selected item.
Control Padding Left - Controls the left padding of the selected item.
Control Padding Right - Controls the right padding of the selected item.
Control Line Height - Controls the line height of the selected item.
Field Label Color - Controls the color of the text of the selected field.
Padding - Controls the padding on all side of the selected item.
Control Margin - Controls the margin spacing of the selected item.
Font Family - Controls the font used on the selected fields label.
Font Size - Controls the font size used on the selected fields label
Make Field Required - Activating this checkbox requires the selected field to be completed in order to successfully submit the web form.
Input Field Width - Controls what percentage the field width will take up of the selected item.
Input Field Height - Controls the percentage the field height will take up of the selected item.

Special Item Controls

URL – The URL provides the web address for directing recipients who click on the selected image or button.
Background – Controls the color of a button.
Width – Controls the width of a button.
Height – Controls the height of a button.
Border Radius – Controls the curvature of the button corners.
Padding – Controls the spacing between the section outer border and the button.
Align – Controls the alignment of the text of your button label to Left, Center, or Right.
Alt Text – Controls the text that will be displayed if the image is unable to load.
Edge to Edge – Activating this checkbox will stretch or shrink the image to fit the width of the web form, while leaving the checkbox deactivated will display the image in its actual resolution.
Change Image – Allows you to replace the existing image with a new image..
Edit Image – Allows you to edit the selected image. Your image will be shown in a robust image editor for making any desired modification to the image.

Contacts Fields Block

The Contact Fields content block allows you to collect information about the people completing your web forms. This content block is required if you are using the web form to collect any data. The checkboxes in the Visible Sections Control portion of the Content Info section to enable or disable portions of the contact form. The textboxes in the Labels section can be changed to better suit the contact form. Note: The checkbox text will only be displayed if the 'Email Opt-In - Required for new opt-ins' checkbox is activated. All of the data collected in this form will be added to the People Database.

Visible Sections Control

Company Block - Activating the checkbox displays a Company text field.
Address Number & Street Block - Activating the checkbox adds the Address Line text field
City Block - Activating the checkbox adds the City text field
State Block - Activating the checkbox adds the State drop-down menu.
Zip Block - Activating the checkbox adds the Zip Code text field
Phone Block - Activating the checkbox adds the Phone Number text field to the contact form.
Email Block - Activating the checkbox adds the Email Address text field to the contact form.
Email Opt-In - Required for new opt-ins - Activating the checkbox, adds a checkbox to the contact form, which allows the individual to sign up for your mailing list.
Gender Block - Activating the checkbox adds the Preferred Gender Pronoun text field to the contact form.
Employer Block - Activating the checkbox adds the Occupation and Employer text field to the contact form.
Employer Address Block - Activating the checkbox adds the Employer Contact Info section to the contact form.

Labels

Header Text - Controls the text displayed at the top of the contact form.
Checkbox Text - Controls the text displayed next to your Email Opt-In checkbox.
Header Text - Control the text displayed in the header of the Employer Contact Info section.

Events Fields Block

The Events Field content block is modified using the Select an event drop-down menu in the Select Events section of the Content Info tab. Once an event has been selected, the textboxes in the Labels section can be edited to update the details of the selected event, however, by default the system will display the information entered in the Event from the Calendar on the homepage.

The Events Fields block is modified by using the items in the Visible Sections Control and Select Events section of the Content Info tab. The Event drop-down menu allows users to select an event that has been previously created in the Calendar on the homepage. The RSVP Options drop-down menu allows you to select the RSVP options you would like to make available in the Events Field content block.

Visible Sections Control

RSVP Block - Activating this checkbox displays the RSVP block inside the event block. This block gives individuals the ability to RSVP for the event selected in the event block.
Ticket Block - Activating this checkbox displays the Ticket block inside the event block. This block gives individuals the ability to purchase tickets for the event selected in the event block.

Select Events

Event - The drop-down menu allows you to select the event that will be displayed in the Events Block.
RSVP Options - The drop-down menu allows you to set the available RSVP options.
Ticket Options - The drop-down menu allows you to set the available ticket options.

Labels

Name - The text entered in this field, displays the header
Description - The text entered in this field is the label for the description of the event.
Date and Time - The text entered in this field is the label for the date and time of the event.
Location - The text entered in this field is the label for the location of the event.
Header Text - The text entered in this field is the header for the RSVP Block.
Header Text - The text entered in this field is the header for the Ticket Block.

Volunteer Fields

The Volunteer Fields content block is modified by using the Date From and Date To textboxes drop-down menu in the Configure Shifts section of the Content Info tab. Once the event has been selected, the Header Text textbox can be edited to change the header of the content block.

Configure Shifts

Date From - The start date range of the list of shifts you would like the block to display.
Date To - The end date range of the list of shifts you would like to the block to display.

Labels

Header -The text in this field displays as the header of the block.

Donation Fields

The Donation Fields content block is edited by changing the numerical values in the textbox located in the Configure Amounts section of the Content Info. Once the amount textboxes have been adjusted, the Header Text textbox can be used to change the header of the content block.

Visible Sections Control

Donation Months - Activating the checkbox displays the Donate Monthly checkbox and the End Donations In: drop-down menu allowing you to capture monthly donations..
Comments - Activating the checkbox displays the comment section, which allows you to capture comments in the donations block.

Configure Amounts

1st Amount - The text entered in this field displays a selectable value in the web form.
2nd Amount - The text entered in this field displays a selectable value in the web form.
3rd Amount - The text entered in this field displays a selectable value in the web form.
4th Amount - The text entered in this field displays a selectable value in the web form.
5th Amount - The text entered in this field displays a selectable value in the web form.

Default Values

Donate Monthly - Controls the default setting of the Donate Monthly checkbox.
Donation Months - Controls the End Donations In drop-down menu default value.

Labels

Header Text - Controls the header text of the Donations Fields block.
Donate Monthly - Controls the text displayed by the Donate Monthly checkbox.
Comment - Controls the header of the comment section of the block.

Credit Card Fields

The Credit Card Fields content block only features a single element that can be changed inside of content block. The Header Text textbox can be used to change the header of the content block

Visible Sections Control

Delay Capture Block - Activating this checkbox displays a Delay Capture checkbox allowing the individuals to delay the capture of funds, allowing you to transfer the funds into a bank account other than the one associated with the web form.

Labels

Header Text - Controls the text displayed in the header of the block.
Delay Capture - Controls the text displayed as the description for the delay capture checkbox.

Survey Question Block

The Survey Question content block is edited in the Select Question category of the Configuration section. The Question drop-down menu is used to select a survey question that was created in the Survey Question section of the Survey & Data Configuration page. The Flag drop-down menu allows users to display or hide particular responses from the Survey Question. Once the question has been set, the Header Text textbox can be used to change the header of the content block. The Question Text textbox can be used to edit the question displayed in the content block.

Select Question

Question - The drop-down menu allows you to select the question you would like to display in the Survey Question block.
Flag - The drop-down menu allows you to select which responses you would like to display in the Survey Question block.

Labels

Header Text - Controls the text displayed as the header of the block.
Question Text - Controls the text displayed as the Survey Question.

Image

The Image block displays an image in your web form. To add an image to the Image content block, the user needs to click the browse button on the Image content block. This will bring up the Image Manager pop-up menu. If the required image is not currently in the Image Manager, click the Upload button to search for the file on your local hard drive.

Once the image has been added to the Form Builder, users can use the Item sub-tab to edit the properties of the image. The URL textbox is used to turn the image into a link. The Alt Text textbox is used to add alternate text to the image. This text will be displayed if the image is unable to load. The Width textbox controls the size of the image.. The Open button in the Change Image section will open the Image Manager, giving the user the ability to change the image. The Edit button of the Edit Image section will create a pop-up image editor window, which allows the user to edit an images size, orientation, sharpness, etc.

Paragraph Text

The Paragraph Text content block is entirely managed within the actual content block. Once you click on the textbox of the content block, you are free to type just like in any other word processing software. When the content block is active a toolbar will appear above, this toolbar gives users the ability to add in HTML code, along with many other basic word processing features regarding formatting.

Separator

The Separator content block is edited in the Item tab. The 'Border Type' drop down menu is used to change the type of vertical rule. The 'Border Color' drop down menu is used to adjust the color of the horizontal rule. The 'Border Size' arrows and text box is used to adjust the size of the of the vertical rule. The 'Control Width' arrows and text box is used to adjust the width of the vertical rule. The 'Control Alignment' drop down menu is used to adjust the position of the vertical rule.

Mixed Block

The 'Mixed Block' content block gives users the ability to place an image and text side by side in the 'Form Builder.' The 'Blocks' menu contains two types of 'Mixed Block' content blocks. The first 'Mixed Block' content block places the image on the left side, and the text box on the right side, the second 'Mixed Block' content block places the text box on the left side, and the image on the right side. For more information about editing either the image or text box portion of the content block, view the 'Image' and 'Paragraph Text' sections above.

Image Group

The Image Group content block gives users the ability to place two images side by side in their Web Form. For more information about editing the images in this content block, view the Image section above.

Sharing the Web Form

Once the Web Form has been created, users have the option to use the web form either as its own web page, or as an iFrame, which can be imbedded on a campaign/organizations website.

Sharing Web Form as a Link

Click on the Get Links button in the row of the Web Form that will be shared.
(Optional) If you would like to shorten the URL, activate the Tiny URL check box.
Click the Copy button in the URL section to copy the URL into your clipboard.
Share the web form on the social media platform of your choice, send it out in an email, or paste it as a link on your website.

Embedding the Web Form

Click on the Get Links button in the row of the Web Form that will be shared.
Click the Copy button in the Embed Code section to copy the HTML code into your clipboard.
Paste the HTML code into the HTML editor for your website.