Setting up the contact page

In NewsBook you can create custom contact forms. These forms are created using the free Contact Form 7 plugin.

 

Creating a new Form

To create a new form, go to Contact -> Add New. Choose a language and proceed. You will presented with a pre filled form with the title “Untitled”. Click on it to give the form an adequate name to easily identify it when selecting it later.

You will see two boxes – one on the left and one on the right. The box on the left contains the code for your contact form. You can use this code to have the exact same form as we do in our preview:

<h3>Drop us Note </h3>
<p> We get back to you within 12 hours on weekdays </p>
[select* subject “General inquiry” “About an author” “Contribute” “I found a bug” “Advertising” “The theme”]
[text* name placeholder “Your name”]
[text firstname placeholder “First name”]
[textarea* message placeholder “Write a message…”]
[submit “Submit”]

If you want to add the form to tour site, simply copy paste the shortcode that is generated for you. You can also use the Contact Form 7 widget from Visual Composer and chose the form you from the dropdown.

How to create a new field

This is actually really easy. Click on “Generate Tag” on the right and create the desired element. The description of each field makes it very easy to use. This is how create an input field with the text “Your First Name” written right in the input field box on the frontend. As you can see all you need to do is giving the field a name like “first_name” or anything else and enter a default value as well as letting the plugin know whether this is a required field or not.

In the end simply copy paste the codes as mentioned. One is for the box on the left called “Form”, the other is for the box called “Mail” below. If you can’t see the “Mail” box, click on “Screen Options” on the top right and activate it. Why do you have to copy these snippets? The text for the box on the left will show the adequate input field in the frontend. The text you copy in the mail box, will make sure that the email you receive when someone submits a form, also contains the input fields value. Basically, the mail form just needs the inputfield’s name in brackets ex [first_name]

 

Example of a required first name field with placeholder text (caption)

Example of a required first name field with placeholder text (caption)

The field will appear in the order where you out it. In the example below “first_name” will be the first input field for the user to fill out:

 form done

The finished form

If you scroll down on the page you will see the option to edit the option edit all kinds of messages that appear when the user signs up, but forgets to fill out a field etc. You can keep the defaults or make your own!