diff --git a/docs/sign-up-newsletter.md b/docs/sign-up-newsletter.md index 06e4c39eb5ace6b19bf876a2361a4817740e244b..d6cdfedf8ebba966a7ba27d71e53bc4f145c8029 100644 --- a/docs/sign-up-newsletter.md +++ b/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): + + + +Once I have installed the CiviMRF modules I can specify a so called CMRF Profile from the Drupal Configuration menu: + +. + +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]). + + + +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: + + + +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: + + + ### 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: + + + +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. + + + ### 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 :-): + + + ## Result! + +If I now enter data in my form as you can see here: + + + +The result in CiviCRM will be that a contact is created and he is added to the newsletter group: + + + + + +[sitekey]:https://docs.civicrm.org/sysadmin/en/latest/setup/site-key/ +[apikey]:https://civicrm.stackexchange.com/questions/31092/where-is-the-api-key diff --git a/images/newsletter-cmrf-menu.png b/images/newsletter-cmrf-menu.png new file mode 100644 index 0000000000000000000000000000000000000000..b211bee04f5e36fa36f6fa6c1d296d2fe69dab1e Binary files /dev/null and b/images/newsletter-cmrf-menu.png differ diff --git a/images/newsletter-cmrf-modules.png b/images/newsletter-cmrf-modules.png new file mode 100644 index 0000000000000000000000000000000000000000..01bccc9ce8a42618cbd4c0a48eec53f62620a349 Binary files /dev/null and b/images/newsletter-cmrf-modules.png differ diff --git a/images/newsletter-cmrf-profile.png b/images/newsletter-cmrf-profile.png new file mode 100644 index 0000000000000000000000000000000000000000..d755e25e34f08515e35629832c93fa5c119725c3 Binary files /dev/null and b/images/newsletter-cmrf-profile.png differ diff --git a/images/newsletter-empty-form.png b/images/newsletter-empty-form.png new file mode 100644 index 0000000000000000000000000000000000000000..1f6c2de4571e50443ae56dd6d4e56e495e470d27 Binary files /dev/null and b/images/newsletter-empty-form.png differ diff --git a/images/newsletter-form-cmrf-part.png b/images/newsletter-form-cmrf-part.png new file mode 100644 index 0000000000000000000000000000000000000000..e61e63f4632359f7163df8769fd5af47934dba9d Binary files /dev/null and b/images/newsletter-form-cmrf-part.png differ diff --git a/images/newsletter-form-components.png b/images/newsletter-form-components.png new file mode 100644 index 0000000000000000000000000000000000000000..61f4acc9846e98bce04e6baf7195c08e2a4cf5cf Binary files /dev/null and b/images/newsletter-form-components.png differ diff --git a/images/newsletter-form-fields-message.png b/images/newsletter-form-fields-message.png index b79ef19037b5f5007ec91e1c6f09cdc204043ebf..ceea49bc8e4e6be1a0cff315fc97afab859ce073 100644 Binary files a/images/newsletter-form-fields-message.png and b/images/newsletter-form-fields-message.png differ diff --git a/images/newsletter-form.png b/images/newsletter-form.png new file mode 100644 index 0000000000000000000000000000000000000000..00e0448041c4d3e697d1e5f049b4b155ec92b3b4 Binary files /dev/null and b/images/newsletter-form.png differ diff --git a/images/newsletter-jd-civi1.png b/images/newsletter-jd-civi1.png new file mode 100644 index 0000000000000000000000000000000000000000..e0ef6cd952060e2615b5496e70290bd0980cec42 Binary files /dev/null and b/images/newsletter-jd-civi1.png differ diff --git a/images/newsletter-jd-civi2.png b/images/newsletter-jd-civi2.png new file mode 100644 index 0000000000000000000000000000000000000000..3148619c325d3ac92e0c77256b1bc4aee93f327d Binary files /dev/null and b/images/newsletter-jd-civi2.png differ diff --git a/images/newsletter-jd-form.png b/images/newsletter-jd-form.png new file mode 100644 index 0000000000000000000000000000000000000000..ede2802cf833be3b88ae98e3b774f2c546399646 Binary files /dev/null and b/images/newsletter-jd-form.png differ