How to Change your Site’s Contact Form

Many of the BoldGrid site are already populated with a contact form. Each form can be customized to meet your needs, but keep your customer in mind, as 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.

Changing your Site’s Contact Form

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.

How to change the text and graphics in the Contact page

  1. Login to your Dashboard
  2. page list

    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. Edit Contact form

    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. Edit link option

    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. Edit Graphic options

    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 the edit options:

    graphic formatting options

    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.

    Replace image option

    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.

    WordPress image editing options

    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.

  7. When you have completed your changes to the text, labels, links or graphics on the form, scroll down and look for the blue Update button. Click on this button to update the form with your changes.

How to change the form email 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. page list

    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. Form location in the editor

    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. Select form to edit

    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. Change form fields

    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. email actions tab

    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

    Edit success message

    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.

    Edit email action

    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.

Leave a Reply