Example of a basic form to sign up for a newsletter¶
This example details how to create a form on my public website where a visitor can enter first name, last name and email and click to sign up for our monhtly newsletter. The Form Processor extension will make sure this is processed in the CiviCRM backend.
The public website is on another server than CiviCRM and I am using Drupal 7 on my public website example.
Defining the form processor¶
The general information for my form processor looks like this:
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?).
Once the form is sent from the public website I would like the following to happen:
- check if we already have a contact with the email entered and if so, use that contact
- if there is no contact with the email yet, create a new contact with the email, first and last name from the form
- add the found or created contact to our newsletter group
So here is what the actions look like:
The action to find or create the contact has been specified so:
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.
Testing the form processor with the api explorer¶
Once I have specified my form processor I can test if it works as I would expect. The form processor generates an API action for the API entity FormProcessor so I can use the API Explorer (Support>Developer>Api Explorer v3) to test if it works.
In this case this is what I will enter:
And if I then click on Execute it should actually add or find the contact and add him/her to the newsletter group.
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.
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 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.
Site and API keys
Once I have done this I have configured how this profile connects to my CiviCRM installation.
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 :-):
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: