Commit 6ff81900 authored by jaapjansma's avatar jaapjansma

Added word press documentation

parent 7db9fba2
# 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:
![Form Processor General](/images/newsletter-general-fp.png)
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](/images/newsletter-inputs-fp.png)
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](/images/newsletter-actions-fp.png)
The action to find or create the contact has been specified so:
![Action to Find or Create Contact](/images/newsletter-find-action.png)
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](/images/newsletter-group-action.png)
## 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](/images/newsletter-api-test.png)
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):
![CiviMRF modules](/images/newsletter-wp-plugins.png)
Once I have installed the Contact Form 7 plugins I can specify how to connect to CiviCRM under Settings and then CiviCRM settings:
![CiviMRF Profile Menu](/images/newsletter-wp-civicrm-settings.png).
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 horst part, which is your domain name (including http or https). The
second part is 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]).
Once I have done this I have configured how contact form 7 will connect to CiviCRM.
### 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 bug textarea.
The contact form 7 plugin works in this way that you define your form in text.
Once I have done this I will see my new form like this:
![New empty form](/images/newsletter-wp-contact-form-design.png)
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.
After the space you enter the name of the field and then you close the definition with another bracket `]`.
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:
![Additional settings](/images/newsletter-wp-contact-form-additional-settings.png)
Now click on the *CiviCRM* tab and you will see the following:
![CiviCRM Settings](/images/newsletter-wp-contact-form-civicrm.png)
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:
![shortcode](images/newsletter-wp-contact-form-shortcode.png)
Copy this short code.
It is time to create a page and paste our short code:
![page](images/newsletter-wp-new-page.png)
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:
![Resulting form](/images/newsletter-wp-form.png)
## Result!
If I now enter data in my form as you can see here:
![Form for John Doe](/images/newsletter-wp-jd-form.png)
The result in CiviCRM will be that a contact is created and he is added to the newsletter group:
![CiviCRM John Doe](/images/newsletter-wp-jd-civi1.png)
![CiviCRM John Doe](/images/newsletter-wp-jd-civi2.png)
[sitekey]:https://docs.civicrm.org/sysadmin/en/latest/setup/site-key/
[apikey]:https://civicrm.stackexchange.com/questions/31092/where-is-the-api-key
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment