Site Contact Form Changes: BoldGrid and Ninja Forms

Many BoldGrid sites are already populated with a contact form. Each form can be customized to meet your needs, but keep your customer in mind. For example, longer forms may discourage a user from providing any information. The following article shows you how to change your contact form when one is provided with your BoldGrid site.

Topics Include

• Changing Contact Forms
• Changing Text and Graphics in the Contact Page
• Changing Email and Labels
• Creating a Thank You Page for BoldGrid Ninja Forms

Changing Contact Forms

There are 2 parts to editing a form with a BoldGrid Inspiration. The first part involves changing the visible contact information on the included form. This information includes the text fields such as email address, mailing address, and phone numbers. You can also change the labels for these sections, and if the form includes a graphic, then you can change the graphic.

The second part involves editing the actual form used for collecting information from your viewers. BoldGrid uses a third-party solution for forms functionality from Ninja Forms. There is quite a bit of functionality, but the purpose of this tutorial is to simply personalize the form for your usage as quickly and as easily as possible. With this goal in mind, the steps will take you through a minimal set of steps to change the email information for the form as well as it’s labeling.

Changing Text and Graphics in the Contact Page

1. Login to your Dashboard
2. Click on Pages in the menu at left in order to see pages created for your site.  
3. Click on the Page that is labeled Contact Us.
4. You will see the BoldGrid editor appear showing the existing contact form. Here you can edit the contact form text such as phone, address, or email. Hover over the first text field in the form and you will see several editing options appear. If the field is a text option, you can simply click on it and you will be able to edit it. You can use this method to edit the existing text on the contact page. NOTE: This is not for editing the text on the form.
5. You can also edit links. Hover over the link, then click on the link. You will see a pencil representing the edit option. If you click on the pencil you will see the link edit screen. To see a more comprehensive screen, click on the gear wheel in the right corner.
6. If your form has a graphic, you have several options provided by the edit interface. Take you mouse pointer and hover over the graphic. Next, left click and you will see some edit options.
7. Hover over each option in the menu and you can see the labels for each. The first option in the menu bar that you see are the four options that affect how the graphic affects text and placement of the graphic. The first option (align left) places the graphic to the left and forces text to flow around it. The second option (align center) places the graphic in the middle with the text forced around it. The third option is the same as align left, but it simply aligns the graphic to the right. The final option performs no alignment.
8. The next option is labeled Change. Selecting this option will bring up the media library and allow you to select a graphic or upload a graphic to one of your choice. Click Replace to replace the graphic.
9. The final option bring ups the graphic-editing options available in WordPress. You get the options to change the caption, alternative text, alignment, size and link. Click on Update when you have completed your edits.
10. When you have completed your changes to the text, labels, links, or graphics on the form, scroll down and click on the blue Update button.

Changing Emails and Labels

The next part of editing your form requires that you use the Ninja Forms plugin that has been added as part of your BoldGrid installation. The use of the form editor includes many functions that we are not going to be covering in this tutorial. We are primarily focusing on changing the form so that you can immediately use it with your BoldGrid site.

1. Login to your Dashboard
2. Click on Pages in the menu at left in order to see pages created for your site.
3. Click on the Page that is labeled Contact Us in order to edit.
4. Hover over the form, then click on the form in order to see the pencil icon. Click on the pencil icon to EDIT the form.
5. This will bring up the available forms page. You will see the variant forms available for that BoldGrid site. The existing form is already selected at right. Click on the link labeled Edit Form in order to edit it.
6. Next, you will see the Email Form page. Here, you can change the field names in the existing form on the right side. Click on the drop-down arrows in order to make these changes. You can also remove fields in this section. You will see the REMOVE option at the bottom of each section revealed by the drop-down arrow. If you’re satisfied with these settings, click on SAVE either above or below the form in order to save changes.
7. Once you have finished any necessary form field changes, click on the tab labeled Email and Actions. This will allow us to change the email address and other options used for the form.  
8. In this section you can edit options like the success message or actions that include important configuration settings such as where the forms need to be emailed. By default, you will see 2 options: Success Message, and Email
    
   Success Message – allows you customize the message that customers see when the contact form successfully transmits to you. You can add your own message by simply hovering over the name of the option and selecting EDIT.
   Email – the email action includes the FROM name, FROM address, TO address (recipient of the email), Subject of the email, and also the email content which is by default all of the fields that your website visitor fills in. Make sure to change the ‘To’ field to an email address that applies to you. Change the FROM name and address so that you easily identify this email or sort it as necessary. When you have finished making the changes to this section, click on SAVE at the bottom.

When you have finished editing the form, you can click on Preview to see the form. This completes the tutorial on how to quickly edit your form to personalize it for your use.

Creating a Thank You Page for BoldGrid Ninja Forms

1. Login to your BoldGrid dashboard.
2. If you have not already done so, create your Thank You page.
3. Make sure you are on the Pages List page by selecting Pages from the left-hand sidebar menu.
4. Open your page by clicking on the Edit link.
5. On the Edit Page screen, locate the URL at the top of the page. Remember or write this down as you will need it later.
6. Click on the Forms option from the left-hand sidebar menu.
7. Locate the form you want to work with and click on the form name. Alternatively, hover over the form name and click on the Edit option from the menu beneath.
8. Once on the form edit page, click on the Email & Actions tab.
9. Click on the Add New button to begin creating your action.
10. From the New Action page, give it a name for identification and then select Redirect from the Type dropdown.
11. Now, enter the URL that you wish to redirect to.
12. Click the Save button to save the configuration.

Now that you have completed creating the redirect action, when someone fills out and submits your form, they will be redirected to the Thank You page.

Now that you know how to update your contact forms, check out some of these popular BoldGrid plugins!