Skip to content

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:

Form Processor General

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

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:

Form Processor Actions

The action to find or create the contact has been specified so:

Action to Find or Create Contact

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

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:

Test with API Explorer

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.

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 section):

CiviMRF modules

Once I have installed the CiviMRF modules I can specify a so called CMRF Profile from the Drupal Configuration menu:

CiviMRF Profile 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

(for background information check System Administrator Guide on Site Key and StackExchange on API key).

CiviMRF Profile

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

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

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

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

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

Result!

If I now enter data in my form as you can see here:

Form for John Doe

The result in CiviCRM will be that a contact is created and he is added to the newsletter group:

CiviCRM John Doe

CiviCRM John Doe