Editing GiveWP Forms

GiveWP includes two ways to edit donation forms: the Visual Donation Form Builder and the Option-Based Editor.

The Visual Donation Form Builder is the primary editing experience. It uses a visual, drag-and-drop block layout that gives users more control over the look and feel of their forms.

The Option-Based Editor is still supported for users who created forms before the Visual Builder was introduced. It offers a more traditional settings-based interface.

This article explains how both editors work and when to use each one.

Where to Edit Forms

When you want to edit a form, you must do it through the Campaign using these steps:

1. Go to GiveWP > Campaigns.
2. Select the Campaign your form belongs to.
3. Select the Form you want to edit.

The form will open in whichever editor it is using: Visual Donation Form Builder or Option-Based Editor.

Customizing Forms with the Visual Donation Form Builder

True to its name, the Visual Donation Form Builder offers a visual editing experience, so you can see what your form will look like while you’re customizing it. You’ll start by selecting a layout (which you can change later) and move on to design and building steps before publishing.

Choose a Form Layout

The Visual Donation Form Builder offers 3 layout options:

• Classic: This shows the full form in one page. It’s a good choice for short forms or donors who don’t like steps.
• Multi-step: This shows each section of the form on a separate step. It’s a good choice for longer forms.
• Two Panel: This is similar to the Multi-step layout, but it keeps the header on the left at all times in a two-column layout. It’s a good choice for forms that are used outside of a Campaign Page.
• You can see additional screenshots of these layout options here.

Select a layout and use the Proceed button to start editing your form.

Design Your Form

The Design tab of the Visual Donation Form Builder is for changing the appearance of your form and is where you will land when you click to edit a donation form. You can use these options to make your form match your branding.

The following settings can be managed in the Design tab:

• Form Layout: Choose a different layout for your form. You can switch layouts seamlessly, and all content will automatically be converted.
• Header: Show or hide the header and individual header parts (heading, description, image. Change the Heading and Description text, and add a background image if desired.
• Donation Goal: Enable or disable the donation goal.
  • Choose between the Campaign goal or the Custom goal. The Custom goal settings apply to the individual donation form vs all forms in the campaign.
    • Custom goal settings are: Goal Type, Goal Amount, Goal Progress
  • If you decide to hide the Header, know that your goal will be hidden on the form even if you have it enabled, as it’s part of the header section. You’ll still be able to track your goal in the campaign form’s admin pages.
• Donation Button: You can change the text on the button in the Button Caption field.
• Styles: Choose to Inherit campaign Colors, or set your own Primary Color and Secondary Color settings for the donation form. A Header Image section is available to select an Overlay color and opacity if you’ve uploaded a Header image. And finally, a Custom Styles section to add CSS changes to match your brand colors. Learn more about how to identify CSS elements to change here.

Add a Header Image

To add an image to a Visual Donation Form Builder form, navigate to the form at GiveWP > Campaigns, then select the form in the Forms list to edit. On the right-hand side, there’s a section called Header. Select that to view the settings.

You can place the image at the top of your header, in the center of the header information, or use it as a background for your header. If you use it as a background, use the Header Image – Color and Opacity Overlay setting in the Styles tab to ensure your text can be seen over the background image.

Understanding Donation Goal Settings

When a new donation form is created, the Donation Goal is enabled by default with Campaign selected in the Form Goal setting. This means all successful donations from forms assigned to that campaign are included in the donation goal total.

To track donation goals for each form separately, change the setting to Custom. Once Custom is selected, additional donation goal options become available for configuration.

Learn more about campaign goals vs donation form goals here.

Edit Form Settings

When you’re happy with the way your form looks, you can switch to the Settings tab to configure settings for your entire form. These settings affect how your form functions, controlling things like the form URL and visibility, user registration, donation confirmation, and email templates.

In Settings, you’ll find the following:

• General: Change basic form details like the title, URL, visibility, excerpt, user registration, and where the form links to in the Form Grid.
• Donation Confirmation: Customize the text on the “Success Page”, otherwise known as the Donation Confirmation page donors see after successfully completing a donation, including header, description, tags, and redirect.
• Email Settings: Customize various email notifications sent to donors or admins in relation to donation transactions.
• Add-ons: Some add-ons, like Currency Switcher, add settings to this area as well. This is typically where you’d decide whether the add-on should use the global settings or custom settings specific to the form.

These settings are pretty self-explanatory, using basic text input or toggle options.

Build Your Form

The Visual Donation Form Builder uses blocks. A block is a form field, group of related form fields, or other content that you can add to sections on your form. Block settings are the settings that belong to a specific block inside the form. Settings for a block may include title and description settings, field labels, field placeholders, etc. Each block has its own settings. 

The Donation Amount and Levels block, for example, contains block settings that include the field label, multi-level or fixed donation options, minimum and maximum custom donation limits, donation levels, and (if you use the Recurring Donations add-on) recurring donation settings.

Use Form Sections and Content

A section is a group of blocks (form fields and other content) on your form. Each section of your form has a title and description that you can edit. 

You can add as many sections to your form as you want by dragging them into the form from the Layout section of the blocks menu.

Delete a section

When you want to delete a section, you can do so by selecting the section and choosing the Delete option from the 3-dot menu in the section tools.

You can also delete a section from the list view on the left side of the editor.

Add more content

Additionally, you can add blocks to your sections to add more text content. You can add as many blocks as you want to any section of your form by either dragging them from the blocks menu on the left side of the editor or by using the plus (+) symbol at the bottom of a section. The following section explains form field blocks and how to use them.

Add Form Fields

One of the simplest ways to customize your donation form is by adding form field blocks. To add a new field, click on the plus sign on a section and add a new block. Or, you can drag a new field in from the blocks menu on the left side of the editor. Learn more about Visual Donation Form Builder blocks.

Restrictions for adding form fields

These fields correspond to important donor or donation information that can only have one instance on your form. If they are already on your form, they will appear inactive in your blocks menu, and you cannot add them again.

• Donor Name
• Email
• Payment Gateways
• Donation Summary
• Donation Amount and Levels

Remove Form Fields

Just as you can add new form fields, you can also remove them. You can remove any field from your form by selecting the field block inside your form and choosing the Delete option from the 3-dot menu that appears in the block tools.

Restrictions for removing form fields

While you can remove any form field, some are required for the form to function. If you remove these fields, you will get a warning when you try to publish telling you to re-add them. The form cannot be published until you do.

• Donor Name
• Email
• Payment Gateways
• Donation Summary
• Donation Amount and Levels

Publishing Forms with the Visual Donation Form Builder

When you’re finished editing your form, and you want to publish it to your website, you can use the Publish button in the upper right of the editor. Alternatively, you can Save as Draft and come back to finish it later.

Frequently Asked Questions

How Do I Edit the Permalink of a Form Made with the Visual Form Builder?

Customizing Forms with the Option-Based Editor