In this article:
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. The gear button will allow you apply a custom order of form fields and create a custom show, enabling hidden fields and view only fields. Note: If adding a linked form field type to display to portal users, when added, these fields will be hidden by default. You will have to use this tab to show them if that is the desired result. Also, 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. | |
| 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?] | |
| Consent | Submission Consent | Add a short summary or full, multi-paragraph statement describing user consent of this information before submitting the form. Include URLs of your existing privacy policy and terms of service. [Learn More] |
Confirmation
Upon submitting successfully without errors, users can either be presented with a confirmation message or redirected to a different URL.
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. |
Authorizing a Webform
If you haven't already, authorize the webform plugin prior to publishing. Please review the guidelines 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.
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 pre-populate a form before even sharing it with the original user. For example, a user may have biographical 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 pre-populated 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 on the webform.
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.
If you want to pre-populate multiple fields, you can add these other fields to the end of the URL separated by an "&". For example:
webportalapp.com/webform/YOURSLUG?FIELD={{FIELDID}}&field123={{field456}}
where "123" is the Field number of the webform you wish to pre-populate (that you captured through Inspect Element) and "456" is the field number you wish to copy data from on the Applicant form.
--- IMPORTANT ---
NOTE that this function will NOT work properly if the webform fields are set to "Hide" or "View Only." The webform fields must be set to "Input+View" in the Webform Plugin Settings. If the field Show/Hide value is not configured this way, the information will appear in the designated fields when the webform is opened, but that information will not be saved in Zengine when it is submitted.
Comments
0 comments
Please sign in to leave a comment.