Helpful Hints for Web Forms
When creating your contact, donation, event registration, or membership forms using Eleo’s Web Forms Module, the following helpful suggestions will guide you in utilizing this feature in our software:
Headers and Footers
1) We recommend using Canva as a platform to incorporate graphics, designs, logos, and more into your headers and footers.
2) We suggest using 3,000 x 1,000 pixels for both the header and the footer.
- You may download your image in PNG format in Canva and upload it into either the Header or the Footer tabs of your Web Form in Eleo.
- You may use other graphic design platforms if you wish, or you may proceed with a predesigned graphic.
3) To upload, navigate to Web Forms > Search Web Forms
- Click on your corresponding Web Form.
- Click on the Advanced button.
- Then click on either the Header or the Footer tab.
If you have a header to upload, click on the Header tab. If you have a footer to upload, click on the Footer tab. If you have both images to upload, you can proceed with uploading the header first and then the footer.
- For our example, we will show you how to upload a header. Click on Edit.
- Then click on ‘Browse’. Select your image and upload it.
- Click on Save.
- Click on the Preview button to preview your Web Form as you make edits along the way. You must ensure that you provide the updated coding to your Web Master each time that you make an edit, otherwise the changes will not be reflected on your form. This will guarantee that it is up to date on your website, or for when your Web Form is sent out to your supporters.
User Tip: If needed, you may remove your image and then adjust the sizing of your pixels in your graphic design platform to review the quality of your images. You can then re-upload them into your header and/or footer. We recommend touching base with your Graphic Designer or Web Master for questions regarding this.
Processing Fees
1) You may choose to have an option selected so the donor, event registry, or new member may cover processing fees through your Web Form.
- Here is an example:
- You may set this up under Settings.
- Then navigate to System Settings.
- Click on Edit.
- Scroll down to Web Form Options.
1. If you wish, you can click on ‘Allow web form to cover processing fees’, change the fee type to either a percentage or a flat rate, and edit the corresponding field for the percentage or flat rate amount. You also have the ability to check-off if you want to warn the user if the system detects a duplicate transaction.
- Once you have edited your Web Form Options, click on Save in the upper right-hand corner.
2. Here is an example of how you can set it up, though it is completely up to you and your organization:
**The two payment processors we integrate with are Stripe and EleoPay. We recommend reviewing each of their websites, or contacting their sales team when setting up merchant accounts with either of them, and staying up-to-date regarding their pricing. Each platform will have specific information about the nonprofit transaction rates for the payment methods that they accept (Ex. Visa, Mastercard, Discover, American Express, etc.). Eleo currently does not take anything in addition to either Stripe or EleoPay's rates.
- Next, you can choose to add text to your form as depicted in the example shown in Step 1. To do this, navigate to your corresponding Web Form by going to Web Forms > Search Web Forms.
i. Click on your corresponding Web Form.
ii. Click on Edit in the Web Form Dashboard.
iii. For the ‘Allow Processing Fees’ area, change it from listing ‘No’ to ‘Yes’ in the drop-down.
iv. The Processing Fee Text box will then appear. You may add the language that best suits you and your organization’s needs, and that corresponds with the Web Form Options that you added in your System Settings. This will be the wording that appears next to the optional checkbox on your form if the constituent decides that they would like to cover the fees.
v. Then click on Save and preview your form. You will have the availability to make further edits in the Advanced section of your Web Form.
reCAPTCHA
This is a service provided by Google that Eleo’s Web Forms currently support. It helps to prevent the spam and abuse of your Web Form by differentiating between humans and bots. reCAPTCHA provides a test so that you can have your constituents be provided with an additional level of security when they are filling out your form.
1) Eleo automatically has this set-up in your form. To preview an example of reCAPTCHA on your Web Form navigate to Web Forms > Search Web Forms.
2) Click on your corresponding Web Form.
3) Then click on the Preview button.
4) The reCAPTCHA area will be automatically displayed on your Web Form.
USER TIP: You may click on either of the links for Privacy or Terms for more information regarding this feature as it will lead you to Google’s Privacy Policy or their Terms of Service page.
Once your constituent has completed the test images by either visual or audio confirmation, it will checkoff to indicate with a green checkbox by ‘I’m not a robot’ showing that it has finished this so that they may proceed with your form. It takes a moment to load during the verification process which is shown in the following images:
- A green checkbox indicates that the constituent filling out the form was successfully verified by reCAPTCHA.
- If your Web Form times out due to inactivity, the reCAPTCHA box will reset (as seen below). This represents that it has expired so that you may re-submit the test for verification by clicking on the checkbox again:
USER TIP: A constituent may always click on the refresh button in reCAPTCHA if the test provided is too difficult.
Form Status:
Form Status
Your Web Form status represents if your form is live or not. If your form is not set to Active, or has an end date that has passed, it will no longer be live and working. You must select one of these four status types:
• Pending: this indicates that you are still working on your form and are not ready to go live with it yet.
• Active: this indicates the form is active/live and can be completed.
• Not Active: this indicates the form is not able to be accessed.
• Closed: this indicates the time frame of the form has passed and cannot be accessed.
1) To view or change the status of your Web Form, navigate to your Web Form by going to Web Forms > Search Web Forms:
2) Click on your corresponding Web Form.
3) Your form’s status will be indicated in the ‘Status’ area. If you would like to edit it, click on the ‘Edit’ button.
4) When in edit mode, click on the drop-down that corresponds with Status, and select from the four options.
You may choose to edit the Start Date and End Date to ensure it coincides with the status of your form (Ex. if today’s date is 5/4/2024, and the end date is 5/3/2024, you can either change your form status to Closed since that date has passed, or you can choose to keep your form Active, but you would need to update your end date to a future date).
5) Then click on Save to save your form.
Confirmation Page
We suggest that each of the Footer Text or Footer Image areas of your Web Forms include language that donors, registrants, contacts, and/or members, close out their browser after they have been brought to your Confirmation Page if you have that tab set-up in your form. This is so that multiple Confirmation Emails are not triggered to be sent out by Eleo if the constituent leaves their browser open for a period of time after completing the Web Form.
1) To do this, Navigate to Web Forms > Search Web Forms.
2) Click on your corresponding Web Form.
3) Click on the Advanced button.
4) If your Confirmation Page is set-up, click on the Footer tab.
It is up to you and your organization if you want to include this on the Confirmation Page directly instead. In this case, proceed to the Confirmation Page tab to make edits.
5) If you are proceeding in the Footer tab, you may either choose to incorporate language into your footer image (see page 1 of this document), or you can use the Footer Textbox area. In this example, we’ll use the Footer Textbox. To do this, click on ‘Edit’ in the upper right-hand corner.
6) Here is example language that was added to the Footer Textbox area in one of our demo forms:
7) Next click on ‘Save’ in the upper right-hand corner of the screen.
8) Then click on ‘Preview’, which is also in the upper right-hand corner of your screen, to display a preliminary view of your form.
This is an example of how the Footer Text can look on the form:
9) Your Confirmation Page and Confirmation Email should already be set-up in those corresponding tabs.
10) If your form is already live, once you have made changes, we suggest either you or your Web Designer use the updated coding in your Web Form link that is located in your Web Form Dashboard to ensure all changes are reflected.
Troubleshooting
If your Web Form is not working, please check the following:
1) Do you have a Web Form Start Date that is in the future? The form will only be active from the Start Date you added. You can adjust this under Web Forms > Search > Click on the name of your form and edit or remove the Start Date if needed.
2) Do you have a Web Form End Date that is in the past? The form will only be active until the End Date you added. You can adjust this under Web Forms > Search > Click on the name of your form and edit or remove the End Date if needed.
3) Do you have a Payment Processor connected to Eleo? You can check this by going to ‘Settings’ > ‘System Settings’ and Scrolling down to the Credit Card Settings section. Make sure you have the credentials for your payment processor account filled in here.
USER TIP: Stripe Public & Secret keys should start with pk_live… or sk_live… - If they have the word test in them instead of live, you will need to get the live keys from Stripe instead of the test ones .Please refer to this link if needed related to Stripe keys. https://stripe.com/docs/keys
Special Characters
Our forms do not currently support some special characters in fields, Confirmation Pages, and Confirmation Emails. This can cause problems populating data due to programming language in the background. If you have any issues, see if you have any special characters that could be the cause or reach out to our Support Team for help.
Support
If you have questions about using or formatting your forms in the Web Forms Module, please do not hesitate to contact our Eleo Support Team at 1-844-676-ELEO (3536) or email us at Support@EleoOnline.com.