Webforms

Plugins allow you to extend your Zengine experience by adding new screens (full-screen plugins) or functionality to existing screens (inline and record overlay plugins) within Zengine. You can browse our public marketplace to find plugins relevant to your Zengine use case and learn more about installing plugins.

Overview

Webforms allow you to publish a form online that can be filled out by anyone, without logging in. The data submitted will flow into your Zengine workspace. They are useful for a variety of interactions with the public, such as surveys, contact us forms, and basic applications that don't require logging in or saving. 

In order to add a new Webform to your workspace, go to  Workspace Settings and choose the Webforms plugin.

Click "Add Webform". The configurations are split into three sections: General, Confirmation, and Style.

Settings

General Settings

Category Fields Description
URL URL The URL is the link that is published externally. See Publishing a Webform for more information. 
Form Settings Form  The Zengine form that serves as the basis for the form entry.

Note: linked fields and member fields will not be displayed externally. If these fields are part of the form and are required, the user will not be able to submit the webform. 
Folder The folder that new submissions will go into.  More Information.
Access Settings Active  The Active flag indicates whether or not the webform is open for new submissions. If someone goes to the URL while the webform is inactive, they will receive a message indicating that the webform is closed.
Start and End Dates Similarly, start and end dates can be used to set a particular time window during which the webform will be active. Note, these times are in Eastern Standard Time (EST). [Need help converting to other time zones?]   

Confirmation

Upon submitting successfully without errors, users can either be presented with a confirmation message or redirected to a different URL. 

Note: If using an iframe to publish the webform on your website, we do not recommend the redirect option because it will show the new URL within the same iframe window.

Style

Fields Description
Logo You may choose to upload a logo that will brand the application form. We recommend this if you will be sharing the URL directly with your applicants. Do not choose this option if you will be embedding the form in your website.
Custom CSS You may choose to add custom CSS to further style your application form to match your website's branding.  Learn more here.

Authorizing a Webform

If you haven't already, authorize the webform plugin prior to publishing. Please review the  guidelines here prior to authorizing.

Publishing and Testing a Webform

Webforms can be published by either sharing a link to the webform directly or by using an iframe to publish the webform on your website.

Sharing a URL

Sharing the link to a webform is the simplest way to share the webform with external users. Click on the "Copy Webform URL" button, the second next to the URL. Then share that link via email, by posting it on your website, or via social media. 

Embedding the Webform on your Website

Often, it makes sense to embed the webform on your website. Click on the "Copy iframe code" button, the third next to the URL. Then place that code in the HTML of your website. 

Testing Webforms

To test your webform, click on the "Go to Webform" button next to the URL. This will open the webform in a new window. Submit a new entry via the webform, then go to the respective form on the Data tab to view the newly created record. 

Note: After saving changes to a form, it can take up to 5 minutes for these changes to be reflected on the user end, i.e. via the URL presented to users to access.

Pre-populating a Webform with Data

For advanced users, webforms can be pre-populated with data via the URL via query parameters. For example, let's say you are sending the URL to a survey, and you want it to automatically be linked to a stored contact. 

On your survey, add a linked field to your contacts form. Get the field id by inspecting the element. For example, this linked field to contacts is field123. 

If sending an individual email to the contact, you can obtain the URL for their contact record via the URL. In this example, we want to send the survey to contact record 456. 

The following URL is properly configured with the query parameter to automatically link the survey response to contact 456:

https://webportalapp.com/webform/zen-foundation-survey?field123=456

A similar process can be used for emailing the survey via  Bulk email. Use a mail merge field for the contact id. 

Passing Data to Your Webform From Other Linked Forms

In some scenarios, you may want a user to submit data that is directly linked to your webform. It may be a form of follow-up data submitted by the original user, or it may be information submitted by that user or in regards to that user by another external person (i.e. a recommender).  You can share a URL with these users, where your original form is a linked field.  By accessing this unique URL, the user(s) you share it with can actually populate the form with their own data.  Or, if the data already exists in another form in the workspace, you can prepopulate a form before even sharing it with the original user. For example, a user may have bio data (First Name, Last Name, Age, etc.) in a Demographics form of the workspace, and when they access the webform, the First Name and Last Name could be prepopulated from that form.  

In other words, you have the ability to pass data from the URL into these form fields; e.g. if your URL is URL.com/yourslug?field123={{id}} where field123 is a linked field. 

To use an example, we have a form for volunteers and their activity. All volunteers have provided email addresses already, and their email addresses exist on an Applicant form. When a volunteer manager wishes to submit a form about the volunteers, it is linked to the Applicant form and pulls in their email address from there.  If someone wishes to add more email addresses, that applicant form can be accessed directly and can pass more data into those form fields.

To pass emails, first, you would need to get the field ID of the linked form, using Inspect Element. Then you would access it through setting up a URL like the example above: webportalapp.com/webform/ YOURSLUG?field={{FIELDID}} where FIELDID is the number you captured through Inspect Element.

Still need help? Contact Us Contact Us