Commit 5353c17a authored by mattwire's avatar mattwire

Fix image paths in docs

parent 01d978b8
......@@ -16,12 +16,12 @@ In this chapter we will briefly discuss the forms and screens you need to go thr
Once you installed the **Form Processor** extension you will have an additional option in the **Administer>Automation>Form processors** option which will lead you the the first view of all the form processors in your installation.
This will be empty if you just installed the extension.
![Form Processors Page](./img/init-form.png)
![Form Processors Page](img/init-form.png)
## New Form Processor - define form processor
On this page you can click on the **New Form Processor** button to create a new form processor. If you do this you will see a form like the one below:
![New Form Processor](./img/new-processor.png)
![New Form Processor](img/new-processor.png)
On the top of the form you can see that there are **two** tabs:
......@@ -47,7 +47,7 @@ In the top part of the form you can enter the general form processor information
It will look something like this:
![Top part of the form](./img/new_first.png)
![Top part of the form](img/new_first.png)
### Input fields on your form processor
......@@ -57,11 +57,11 @@ For each field you can select the type of field (short text, numeric no decimal,
Adding the input field for the *email* will probably have to look like this:
![Input field for email](./img/new-input-email.png)
![Input field for email](img/new-input-email.png)
Once I have added all the fields (and as you can see I have added the validation that first and last name should at least have 3 characters) the list will look like this:
![List of input fields](./img/new-list-input-fields.png)
![List of input fields](img/new-list-input-fields.png)
What I have done now is specify that I expect my form to show 3 fields for the website visitor to enter: First Name, Last Name and Email.
......@@ -73,7 +73,7 @@ We do that by adding *actions* to the form processor.
So in our example, we should find a contact by the email. Next the contact found should be added to the newsletter group.
Initially the part of the form where we can specify actions will look like this:
![Action part of the form](./img/new-action-part.png)
![Action part of the form](img/new-action-part.png)
If you click on the action select box you will get a list of actions that are already available because some of the funding organizations needed that action.
As time goes by and more people start using and enhancing the [**Action Provider** extension][actionproviderrepo], the list will grow.
......@@ -83,12 +83,12 @@ As time goes by and more people start using and enhancing the [**Action Provider
In this example we have a first step: find the contact with the data from the form.
![Find contact action](./img/action-find-contact.png)
![Find contact action](img/action-find-contact.png)
Once I have found the contact it should be added to the newsletter group.
If I select the *add to group* action I can select the group and specify that I want to use the contact ID found in the previous action:
![Add to newsletter group action](./img/action-add-to-group.png)
![Add to newsletter group action](img/action-add-to-group.png)
## New Form Processor - retrieval of defaults
......@@ -97,7 +97,7 @@ We could pass a parameter (a checksum for example) in the URL of the form and ba
This can be specified in the *Retrieval of defaults* tab. Once I have ticked the *Enable default data retrieval?* option I will see a form like this:
![New retrieval of defaults](./img/new-retrieval.png)
![New retrieval of defaults](img/new-retrieval.png)
As you can see the input fields from my form processor have already been loaded.
I can specify here what criteria I want to use, in this example I have specified a short text named *checksum*.
......@@ -115,7 +115,7 @@ For each of my input fields I can finally specify what data should be loaded her
At the bottom of the form where you edit or create your form processor there is also a bit about an *output handler*:
![Output Handler](./img/output-handler.png)
![Output Handler](img/output-handler.png)
This gives you the option to manipulate the output that is sent back to the public website once all the actions have been executed.
If you do not specify anything, the default value of *send everything* then all the data involved is sent back (inputs, output from actions etc.).
......@@ -127,7 +127,7 @@ If you click on the *Retrieval of defaults* tab in the **New Form Processor** fo
And that is all! A form to be used without coding. Once I saved the form processor I can see at the top of the form what API action I can use:
![API to be used](./img/api-to-be-used.png)
![API to be used](img/api-to-be-used.png)
So far the basic concept. Obviously the public website part needs to be done too, check the [Example Sign Up Newsletter](./sign-up-newsletter.md) section for that part, this section just covers the basis principles.
......
......@@ -22,7 +22,7 @@ I would like to have a form on my website where a contact can specify his or her
The idea is that we include a link in each mailing or mail we send out with a checksum (see the wonderful [AGH Strategies Email Link Guide][aghchecksum]).
This link should lead to the form (prefilled if we know the person) which should look like this:
![Mockup Form](./img/emailprefs-mockup.png)
![Mockup Form](img/emailprefs-mockup.png)
Once the person has ticked all their boxes the result should be processed into CiviCRM.
......@@ -32,7 +32,7 @@ In CiviCRM I will have a few groups:
* a group called Monthy Actions
* a group called Yearly Summary
![Groups in CiviCRM](./img/emailprefs-groups.png)
![Groups in CiviCRM](img/emailprefs-groups.png)
The email preferences should reflect this group membership:
......@@ -65,7 +65,7 @@ This is not required, but it reflects the structure of CiviCRM and the structure
In the *Action* folder I can add my actions if I only expect to have a couple, or add a folder for each entity and then add my actions in there.
Because this extension for now will only hold 2 actions I will put them in the *Action* folder.
![Extension folders](./img/emailprefs-folders.png)
![Extension folders](img/emailprefs-folders.png)
Next I have updated my info.xml, most of the information is not too important for this example but the <**classloader**> tag is!
This is required for an extension that creates *actions* for the **Action Provider**.
......
......@@ -9,12 +9,12 @@ The public website is on another server than CiviCRM and I am using Wordpress on
The general information for my form processor looks like this:
![Form Processor General](./img/newsletter-general-fp.png)
![Form Processor General](img/newsletter-general-fp.png)
On my form processor I will accept 3 inputs: first name, last name and email.
The email will be validated (is it a valid email?).
![Form Processor Inputs](./img/newsletter-inputs-fp.png)
![Form Processor Inputs](img/newsletter-inputs-fp.png)
Once the form is sent from the public website I would like the following to happen:
......@@ -24,15 +24,15 @@ Once the form is sent from the public website I would like the following to happ
So here is what the actions look like:
![Form Processor Actions](./img/newsletter-actions-fp.png)
![Form Processor Actions](img/newsletter-actions-fp.png)
The action to find or create the contact has been specified so:
![Action to Find or Create Contact](./img/newsletter-find-action.png)
![Action to Find or Create Contact](img/newsletter-find-action.png)
Finally in the action to add the contact to the group I have selected the group the contact should be added to and specified that the contact ID found in the find action should be used.
![Action to Add to Group](./img/newsletter-group-action.png)
![Action to Add to Group](img/newsletter-group-action.png)
## Testing the form processor with the api explorer
......@@ -41,7 +41,7 @@ The form processor generates an API action for the API entity FormProcessor so I
In this case this is what I will enter:
![Test with API Explorer](./img/newsletter-api-test.png)
![Test with API Explorer](img/newsletter-api-test.png)
And if I then click on **Execute** it should actually add or find the contact and add him/her to the newsletter group.
......@@ -53,11 +53,11 @@ I now need to design a form on my public website that communicates with my form
To be able to communicate with a CiviCRM installation on another server the **Contact Form 7 CiviCRM integration** plugin is installed, and I have also installed the **Contact Form 7** plugin. (see the [Requirements](./requirements.md) section):
![CiviMRF modules](./img/newsletter-wp-plugins.png)
![CiviMRF modules](img/newsletter-wp-plugins.png)
Once I have installed the Contact Form 7 plugins I can specify how to connect to CiviCRM under Settings and then CiviCRM settings:
![CiviMRF Profile Menu](./img/newsletter-wp-civicrm-settings.png).
![CiviMRF Profile Menu](img/newsletter-wp-civicrm-settings.png).
In this settings screen I specify the URL to the REST interface of CiviCRM and added the site and API keys.
The URL is broken down in two parts: first is the hostname including http or https, the
......@@ -73,7 +73,7 @@ The contact form 7 plugin works in this way that you design your form describing
The text to design my form looks like this:
![New empty form](./img/newsletter-wp-contact-form-design.png)
![New empty form](img/newsletter-wp-contact-form-design.png)
Make sure that your fields have the same name as the name defined in the form processor. The field is defined between
brackets `[]` after that the type of the field is specified. And an asterix `*` indicates that this field is required.
......@@ -82,11 +82,11 @@ Then a space and the name of the field.
Press save and if there are any errors on the *Mail* tab correct those by clicking on the *Mail* tab. You can also
disable the e-mail by setting the following under additional settings:
![Additional settings](./img/newsletter-wp-contact-form-additional-settings.png)
![Additional settings](img/newsletter-wp-contact-form-additional-settings.png)
Now click on the *CiviCRM* tab and you will see the following:
![CiviCRM Settings](./img/newsletter-wp-contact-form-civicrm.png)
![CiviCRM Settings](img/newsletter-wp-contact-form-civicrm.png)
In this screen you specify to which API you want to send your form to. With the form processor the Entity is always _FormProcessor_
and the action is the *name* of your form processor.
......@@ -95,13 +95,13 @@ and the action is the *name* of your form processor.
In the top of the form you see the short code which you can use to display the form on a page:
![shortcode](./img/newsletter-wp-contact-form-shortcode.png)
![shortcode](img/newsletter-wp-contact-form-shortcode.png)
Copy this short code.
It is time to create a page and paste our short code:
![page](./img/newsletter-wp-new-page.png)
![page](img/newsletter-wp-new-page.png)
Save the page.
......@@ -109,19 +109,19 @@ Save the page.
After we have saved the page our form looks like this. I did not apply any styling or theming in my wordpress installation:
![Resulting form](./img/newsletter-wp-form.png)
![Resulting form](img/newsletter-wp-form.png)
## Result!
If I now enter data in my form as you can see here:
![Form for John Doe](./img/newsletter-wp-jd-form.png)
![Form for John Doe](img/newsletter-wp-jd-form.png)
The result in CiviCRM will be that a contact is created and he is added to the newsletter group:
![CiviCRM John Doe](./img/newsletter-wp-jd-civi1.png)
![CiviCRM John Doe](img/newsletter-wp-jd-civi1.png)
![CiviCRM John Doe](./img/newsletter-wp-jd-civi2.png)
![CiviCRM John Doe](img/newsletter-wp-jd-civi2.png)
[sitekey]:https://docs.civicrm.org/sysadmin/en/latest/setup/site-key/
[apikey]:https://civicrm.stackexchange.com/questions/31092/where-is-the-api-key
......@@ -9,12 +9,12 @@ The public website is on another server than CiviCRM and I am using Drupal 7 on
The general information for my form processor looks like this:
![Form Processor General](./img/newsletter-general-fp.png)
![Form Processor General](img/newsletter-general-fp.png)
On my form processor I will accept 3 inputs: first name, last name and email.
The email will be validated (is it a valid email?).
![Form Processor Inputs](./img/newsletter-inputs-fp.png)
![Form Processor Inputs](img/newsletter-inputs-fp.png)
Once the form is sent from the public website I would like the following to happen:
......@@ -24,17 +24,17 @@ Once the form is sent from the public website I would like the following to happ
So here is what the actions look like:
![Form Processor Actions](./img/newsletter-actions-fp.png)
![Form Processor Actions](img/newsletter-actions-fp.png)
The action to find or create the contact has been specified so:
![Action to Find or Create Contact](./img/newsletter-find-action.png)
![Action to Find or Create Contact](img/newsletter-find-action.png)
So this action tries to find a contact with the email provided. If no contact with the email can be found, it uses the email and the first/last name to create a contact.
Finally in the action to add the contact to the group I have selected the group the contact should be added to and specified that the contact ID found in the find action should be used.
![Action to Add to Group](./img/newsletter-group-action.png)
![Action to Add to Group](img/newsletter-group-action.png)
## Testing the form processor with the api explorer
......@@ -43,7 +43,7 @@ The form processor generates an API action for the API entity FormProcessor so I
In this case this is what I will enter:
![Test with API Explorer](./img/newsletter-api-test.png)
![Test with API Explorer](img/newsletter-api-test.png)
And if I then click on **Execute** it should actually add or find the contact and add him/her to the newsletter group.
......@@ -55,11 +55,11 @@ I now need to design a form on my public website that communicates with my form
To be able to communicate with a CiviCRM installation on another server the **CMRF core** module is installed, and I have also enabled the **CRMF Webform** module and the **CMRF Form Processor** module (see the [Requirements](./requirements.md) section):
![CiviMRF modules](./img/newsletter-cmrf-modules.png)
![CiviMRF modules](img/newsletter-cmrf-modules.png)
Once I have installed the CiviMRF modules I can specify a so called CMRF Profile from the Drupal Configuration menu:
![CiviMRF Profile Menu](./img/newsletter-cmrf-menu.png).
![CiviMRF Profile Menu](img/newsletter-cmrf-menu.png).
From this menu I can edit or add a CiviMRF profile. In this profile I specify if my connection with CiviCRM is remote (on another server) or local (the same server).
In this example it is remote, I have specified the URL to the REST interface of CiviCRM and added the site and API keys.
......@@ -67,7 +67,7 @@ In this example it is remote, I have specified the URL to the REST interface of
!!! Note "Site and API keys"
(for background information check [System Administrator Guide on Site Key][sitekey] and [StackExchange on API key][apikey]).
![CiviMRF Profile](./img/newsletter-cmrf-profile.png)
![CiviMRF Profile](img/newsletter-cmrf-profile.png)
Once I have done this I have configured how this profile connects to my CiviCRM installation.
......@@ -79,40 +79,40 @@ Once I have done this I have configured how this profile connects to my CiviCRM
I am now going to create my form in Drupal by clicking *Add content*, then select *Webform* and finally add a name for my webform and hit the *Save* button.
Once I have done this I will see my new form like this:
![New empty form](./img/newsletter-empty-form.png)
![New empty form](img/newsletter-empty-form.png)
To specify that I am going to use the CiviMRF profile with this form so it can communicate with the **Form Processor** I will now click on the **CiviMRF** tab and select *Submit to CiviCRM Form Processor*.
In the form I can select what *CiviMRF profile* I want to use and what *Form Processor* I want to use:
![CiviMRF part of the form](./img/newsletter-form-cmrf-part.png)
![CiviMRF part of the form](img/newsletter-form-cmrf-part.png)
### Adding the fields on the form
Once I have hit *Save* I will go back to the *Form components* tab but I will now see a message warning me that I have not yet included fields from the Form Processor:
![Form components message](./img/newsletter-form-fields-message.png)
![Form components message](img/newsletter-form-fields-message.png)
Next step is to add all the fields I want to be on my form. In my example I have only included the ones from my form processor but you could add whatever you want additionally, just remember this will not be sent to CiviCRM.
![Form components](./img/newsletter-form-components.png)
![Form components](img/newsletter-form-components.png)
### The end result of the form
I have also updated the text for my submit button, and the resulting form will look like this (I am not a styling guru :-):
![Resulting form](./img/newsletter-form.png)
![Resulting form](img/newsletter-form.png)
## Result!
If I now enter data in my form as you can see here:
![Form for John Doe](./img/newsletter-jd-form.png)
![Form for John Doe](img/newsletter-jd-form.png)
The result in CiviCRM will be that a contact is created and he is added to the newsletter group:
![CiviCRM John Doe](./img/newsletter-jd-civi1.png)
![CiviCRM John Doe](img/newsletter-jd-civi1.png)
![CiviCRM John Doe](./img/newsletter-jd-civi2.png)
![CiviCRM John Doe](img/newsletter-jd-civi2.png)
[sitekey]:https://docs.civicrm.org/sysadmin/en/latest/setup/site-key/
[apikey]:https://civicrm.stackexchange.com/questions/31092/where-is-the-api-key
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment