documentation completed newsletter example

docs/sign-up-newsletter.md

@@ -47,14 +47,70 @@ And if I then click on **Execute** it should actually add or find the contact an
 
 ## Defining the form in Drupal 7
 
-
+I now need to design a form on my public website that communicates with my form processor. In this example I use Drupal 7.
 
 ### CiviMRF profile
 
+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](/images/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](/images/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.
+
+!!! Note "Site and API keys"
+    (for background information check [System Administrator Guide on Site Key][sitekey] and [StackExchange on API key][apikey]).
+
+![CiviMRF Profile](/images/newsletter-cmrf-profile.png)
+
+Once I have done this I have configured how this profile connects to my CiviCRM installation.
+
+!!! Note
+    Expect to have a profile for each CiviCRM installation you want to connect to. This is probably only one in most cases.
+
 ### CiviMRF for the form
 
+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](/images/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](/images/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](/images/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](/images/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](/images/newsletter-form.png)
+
 ## Result!
+
+If I now enter data in my form as you can see here:
+
+![Form for John Doe](/images/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](/images/newsletter-jd-civi1.png)
+
+![CiviCRM John Doe](/images/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