Example of a basic form to sign up for a newsletter from a Wordpress website

This example details how to create a form on my public wordpress 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 Wordpress 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.

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:

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.

Defining the form in Wordpress

I now need to design a form on my public website that communicates with my form processor. In this example I use Wordpress.

Contact Form 7 CiviCRM Integration

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

Once I have installed the Contact Form 7 plugins I can specify how to connect to CiviCRM under Settings and then CiviCRM settings:

.

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 second part is the link to the rest.php in your civicrm installation.

Site and API keys

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

Creating the form with Contact Form 7

I am now going to create my form in Wordpress by clicking Contact, then Add new. I then create my form in a big textarea. The contact form 7 plugin works in this way that you design your form describing it in text.

The text to design my form looks like this:

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. 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:

Now click on the CiviCRM tab and you will see the following:

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.

Add the form a page

In the top of the form you see the short code which you can use to display the form on a page:

Copy this short code.

It is time to create a page and paste our short code:

Save the page.

The end result of the form

After we have saved the page our form looks like this. I did not apply any styling or theming in my wordpress installation:

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: