Below we show you the steps to follow to build your donation form, wether it is one-off donations, recurring donations or subscriptions
The forms will allow you to have a permanent means of financing on your website. Stockcrowd offers you a large number of possibilities to define your form, being able to create forms for specific donations, registrations, partners ... as well as great flexibility when collecting donor data, being able to add the extra data you need.
Here we show you several examples of forms:
Below we will show you the steps to follow to create your donation form.
1. First step to create a form
2. How can I view the added changes
3. Footer
4. Personalisation of images and colors.
5. Type of form and data to request from donors
6. Customisation of amounts
7. Thank you page
8. Embed form on my website
1. First step to create a form
To create a donation form you must access the "New Form" option that you will find on your home screen once you have accessed the software.
Once you have chosen the type of campaign, you will have to fill in the basic data of your campaign:
- Title: This field refers to the title of your campaign. Remember that you can edit it at any time in the General Data tab.
- Currency: You must choose the campaign base currency.
- Country: This country refers to the country of issuance of the donation certificate. In the event that you are not issuing donation certificates, you will need to choose a country anyway.
- Base language: Campaigns can be multi-language but we must choose a base language of the campaign and make the translations into the rest of the languages afterwards.
Once you have filled in the basic campaign data, the options corresponding to your campaign will be automatically displayed. By default you will access the General Information area, where you can see and edit the fields already defined by you (Title, Country for issuing the certificate and Base language of the campaign). From here you can also add a short description to your campaign, which will appear on the left of the form.
If your form is going to be multi-language, you can add more languages by clicking on the flag symbol that will appear within certain fields, as you build your form.To do this, click on the flag, select the language and add the translation.
2. How can I view the added changes?
As you create your form, you can see the changes made in html. From your campaign you can do it in two different ways:
- Pressing the icon of an eye that will appear in the upper left part of the BackOffice.
- In the drop-down menu on the left: Content-> Campaign Templates.
For forms there is a single template (Standard Form). Click on "My campaign" and you can view the form in your browser. We recommend that you keep this page open until you finish creating your campaign.
Remember that any change you make in the BackOffice can be automatically reflected. To do this you just have to refresh the page.
3. Footer
To define the footer data we must go to the CONTENT section (screen Icon)-> Organisaion info-> Insert data
Furthermore, if we move to the "Customisation" tab within SETTINGS>Donation Box>Customise, we can decide whether or not we want to show this footer, and if we want, we can define the background and font colour.
4. Personalisation of images and colours.
In the same Customization tab, where we define the colour of the Footer (Configuration-> Donation Box-> Customise), we can customise our form a little more, adding a campaign or organisation logo, a background image and our campaign and description colour.
Also at the bottom of this tab, you will find how to customise your "Donate" button, being able to edit this text, and also add a small text below it.
5. Type of form and data to request from donors
In this same section of the Form, you will find the Data tab. Here we can define the type of form we want (registrations or signatures, one-off donations, periodic, mixed...)
Furthermore, in this same tab we can define the type of data we want to collect from our donors.
In general there are two types of records:
- Simple data record: where the name, surname and email of the donor are collected. This is the default record in every form. To this simple record we can add the identification number and / or the telephone number, with the options that we will find at the bottom.
- Extended data record: in this record all the data of the simple record will be collected (name, surname and email) and the address will also be added
postal address, identity number and telephone number. The latter will be optional unless we select it as mandatory within the options.
If you need to add one more field, you can add custom extra fields in this data tab, by clicking on Create Field, which you will find at the bottom.
6. Customisation of amounts
The amounts of your form are fully customisable. Click on Configuration-> Donation box-> Payments and you will see all the amounts available to customise, both for one-off and periodic donations (depending on the type of form chosen in the Data tab)
You can also establish a minimum and / or a maximum for free contributions, and you will be able to select the amount that is selected by default in the form once you access it.
In addition, each amount can also be personalised with a small photo and description
If what we want, however, is for our form to offer a single amount (whether it is one-off or periodic) we will find this option at the top: "The user will not be allowed to choose the amount and periodicity of the payment"
7. Thank you page
In the thank you tab we can define a small message that will appear once the payment process is finished.
This message should not be confused with the thank you email that the donor will receive in their inbox.
8. Embed form on my website
If what you want is not to take the html of the complete form, with an image, title and description, and all you need is to take the donation box to embed it on your website, go to Settings-> Donation box-> Integration.
To integrate the payment flow that you have defined in your website we give you 3 different forms of integration:
- Html page
- Modal style
- Embedded style