23 Contact Forms - Bishop

#### Bishop Documentation

# Contact Forms

In this page you will learn how to set your contact forms.

### 1. Install and activate the YIT Contact Form plugin

Start to install the YIT Contact Form plugin. Click on the green button as shown in the images below:

And then click to "install" to install the plugin.

After the installation, click to "activate" to activate the plugin.

### 2. Create a Contact Form

Click on Contact Forms > Add New Contact Form:

#### 2.1 Contact form configuration tab

In the first tab, you can apply general settings of your contact form, as showed below:

To use "Google reCaptcha" set the "reCaptcha System" field to checked as shown below and click here to learn how to get the api keys.

#### 2.2 Add\Edit Form tab

In this section, we will show you how to create a contact form with name, email, website and message field, as showed below:

Click on "Add field" button:

a grey box will appear, then click on the arrow to open it.

Firstly, we insert the "name" field; it' s important you compile the Data Name field to use its value inside the email body.

So we compile the Message error field, check the Required field, choose the Icon that will appear inside the input field and assign six columns value to Width.

Now we can insert the "email" field: we have to compile the same fields as we did before, but we also have to check the "Email" field as showed below.

In this way, users will receive an error message if the email is not in the correct form.

Now we are going to add the "website" field: in this case, we don't want the field to be required, but we want that the input field will be wide as its container, so we set the "Width" field to twelve columns.

We add the last custom field for "message", in this case we will set the "Type Field" to "Textarea".

### 2.3 Field Order

In the WordPress admin panel, our field list will appear like the picture below:

You can change the field order dragging field box as showed below:

Remember to click on "publish" or "save draft" to apply changing.

### 3. Shortcodes

After a contact form is created, it will appear in contact forms list where you can see the shortcode column as showed below:

click here for more shortcode details.