Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# 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.
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:
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 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](requirements.md) 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.
!!! Note "Site and API keys"
(for background information check [System Administrator Guide on Site Key][sitekey] and [StackExchange on API key][apikey]).
### 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.
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.
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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:
[sitekey]:https://docs.civicrm.org/sysadmin/en/latest/setup/site-key/
[apikey]:https://civicrm.stackexchange.com/questions/31092/where-is-the-api-key