Jump to Section:
- Introduction
- Form Builder Overview
- Content Blocks Overview
- Editing Visible Items and Form Messages
- Editing the Form Options
- Editing the Block Options
- Editing the Item Options
- Content Blocks
- Sharing the Web Form
Introduction
The Create/Edit Web Forms module gives users the ability to create small web forms, without the need to write complex HTML, which can be used to capture information in 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 in the PDI system as flag data.
- The Create/Edit Web Forms page can be accessed by hovering over the Outreach section in the Navigation Menu, clicking Webforms, and clicking Create/Edit Web Forms.
Form Builder Overview
Web Forms allow users to build simple to complex HTML pages and web forms. The PDI Form Builder provides you with a near infinite amount of options when creating these pages. When you navigate to the Create/Edit Web Forms page, you will see a list of your previously created web forms, which you can manage from that page. To create a new web form, click the blue Create a New Form on the upper right-hand side of the page.
Every web form is built the same way: by selecting content blocks to place on the web form.
Content blocks are added to the form by dragging them from the Content Blocks menu on the right-hand side of the screen into the 'Drop a content block here' field on the left-hand side. The 'Drop a content block here' field will disappear once a content block has been added to the form, but new content can still be added to the form by dragging it from the Content Blocks menu and placing the new block either above or below a previously placed block.
Once a Content Block has been added to the form, two buttons will appear next to it.
The button with a crossed-arrows icon allows you to move the Content Block around the form. The button with a trash can icon allows you to remove the Content Block from the form.
In the upper left corner of the page, there is a Form Preview button, so you can see how your form will look before you submit it.
Content Blocks Overview
Content Blocks are the building blocks of your web forms. Each element listed below can be added individually; however, some blocks, such the Question Fields block, require 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 block that displays information for the selected event and allows individuals to RSVP for the event and purchase tickets.
- Note: To select an event for your form, the event must have already been created in your Calendar. You can select the event in the Content Info tab.
- 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 have already been created on the Survey Questions page. The answers in the survey will be captured in the PDI system as flags.
- Membership - The Membership block allows individuals to pay 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 line 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 the 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. The options at the top of the Content Info tab will vary depending on the Content Block currently selected; however, at the bottom of the Content Info tab, you will be able to view and customize the Visible Items and Form Messages sections.
-
Visible Items
- 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.
-
Form Messages
- 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.
Editing the Form Options
The Form Options tab affects the entire form, not just the currently selected Content Block.
- 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.
Editing the Block Options
- 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.
Editing the Item Options
The Item Info tab controls the settings of the currently selected item within the Content Block. When a new Content Block is added, the Item Info tab for that Content Block will automatically be opened.
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 field's label.
- Font Size - Controls the font size used on the selected field's 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's outer border and the button.
- Align – Sets 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 can be used to enable or disable portions of the contact form. The textboxes in the Labels section can be changed to better suit the contact form.
All of the data collected in this form will be added to the People Database.
Visible Sections Control
- Birthdate - Activating the checkbox displays a Date of Birth field.
- 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.
- Alternate Phone Block - Activating the checkbox adds the Alternate Phone Number text field to the contact form.
- Email Block - Activating the checkbox adds the Email Address text field to the contact form.
- Alternate Email Block - Activating the checkbox adds the Alternate 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.
- Note: The checkbox text will only be displayed if the 'Email Opt-In - Required for new opt-ins' checkbox is activated.
- 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. 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 is the name of the event and the header for the Events Field content block.
- 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 Block
The Volunteer Fields content block is modified using the Date From and Date To textboxes 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 Block
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 adds a section for comments.
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 Block
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. If the capture of funds is delayed, you will be able 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.
Question Fields 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 on the Survey Questions 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.
Visible Sections Control
- Comment Block - Activating this checkbox will insert a textbox into the Survey Question block where individuals can add comments.
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 Block
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, users can use the Item Info 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 image's size, orientation, sharpness, etc.
Paragraph Text Block
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 HTML code, along with many other basic word processing features regarding formatting.
Separator Block
The Separator content block is edited in the Item Info tab. The 'Border Type' drop down menu is used to change the type of horizontal rule. The 'Border Color' drop down menu is used to adjust the color of the horizontal rule. The 'Border Size' arrows and textbox are used to adjust the size of the of the horizontal rule. The 'Control Width' arrows and textbox are used to adjust the width of the horizontal rule. The 'Control Alignment' drop down menu is used to adjust the position of the horizontal rule.
Mixed Block
The Mixed Block content block gives users the ability to place an image and text side by side in the form The Content 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 Block
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 embedded on a campaign's or organization's website.
Sharing Web Form as a Link
- Click on the Get Links button in the row of the Web Form that will be shared. A pop-up will appear.
- (Optional) If you would like to shorten the URL, activate the Tiny URL checkbox.
- 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. A pop-up will appear.
- 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.