Inserting custom Forms and HTML code
Sometimes you want to extend your Wild Apricot website with 'web widgets' provided by other companies. For example you could add a survey, poll, or shopping cart from another provider:
- Surveys can be added from www.surveymonkey.com
- Custom Contact us forms can be added using forms from www.Wufoo.com
- Payment buttons for products can be added using checkout buttons from PayPal.com or Google checkout
|Information collected through third-party sites will be stored by the third party and not in your Wild Apricot database.|
The specific details that you will need to integrate a third-party service can vary from one service to another. But almost in all cases you just need to take a code snippet from the site whose form you are using and past it into your site.
Code snippet can be either:
- Custom Form - code starts and ends with <form> tag
- Custom HTML code- any code that starts and ends with other tags such tags as <div>, <object>, <iframe>, <script>.
Note, the process of inserting a code snippet is slightly different for Custom Forms and Custom HTML code - use Insert gadget > Custom form or Insert gadget > Custom HTML.
The following examples show this in more details.
Inserting Custom Form - PayPal buttons example
For example, lets look at adding a PayPal button. There are various buttons available from PayPal such as shopping cart, donation and buy now that you could add on your Wild Apricot web pages.
Note that the PayPal code starts with <form> tag, this means that we will need to add it as a custom form.
Once you've obtained a code from PayPal, copy it and go to the page that you want to add it to on your Wild Apricot site.
Next, open the page in edit mode (click on Edit button), click on Insert gadget button which is located on the edit toolbar and select Custom Form option.
On the following window enter the code and click on Save button once finished.
Next, save the page and the button will be added to the page.
Inserting Custom HTML code - Wufoo example
For this example let's add a form that I have created in my wufoo account.
Copy the code from Wufoo, go to your page, click on Insert gadget button which is located on the edit toolbar and select Custom HTML option.
After you insert and save the code, your custom form will appear on the page.
Technical details for Custom Forms
Form gadget HTML has "height" attribute ("auto" by default). It is possible to change its value in HTML editor, for instance to 50px;
The height attribute can be adjusted directly from the page HTML code.
- By default content of form gadget loads all standard Wild Apricot stylesheets. This might be changed by manual editing in HTML code useStandardStyles attribute of form gadget: useStandardStyles="False"
In a similar way, you add your other styles to the form.
- It is possible to customize IFRAME of particular From gadget by its Id. The system assigns an Id for <body> tag of form's IFRAME window with format "PAGEID_XX_GADGETID_YY", where XX is internal page ID and YY - ID of this gadget within this page. Note that gadget ID might be changed after changing page content, for instance after inserting a gadget before current one.
- By default on rendering a form the system adds a target attribute (target="_top") to open new window inside main window after the form submit. To open new window inside the gadget you have to add target attribute into your form tag manually