How to add a contact form

Phew Forms

To tell if you use Phew Forms, the side navigation of your website will have an option labelled "Phew Forms".

 

Create a new form

Click "Contact" in the admin menu and then click "Add New".

Enter the title of the form.

Click "Default settings" and more settings will appear:

  • Recipient - who will be notified when the form is filled out.
  • Subject - the subject of the email that will be sent.
  • Submit Button Text - What the form submit button will say e.g. "Send message".
  • Use as opt in form? - You may want to use the contact form as a way of users giving consent/opting in to something. Tick this box if this is the case.
  • Introduction Message - The message that appears before the form.
  • Thank you message - The message the user sees when they successfully sent the form.
  • Form ID, Form Class - This adds an ID or Class that's used in the code.

Once you have filled in the above, click form fields. This is the section where you can add input fields for the user to fill out e.g. Name, Email, etc.

When adding a field, you will get the following options:

  • Type - This is what sort of content should be entered in the field, e.g. an email  .
    • Text - Name, Company, anything that contains regular characters.
    • Textarea - Same as the above, but the user can stretch the text box if it is too small.
    • Checkbox - A true or false option the user ticks.
     
    • Hidden - This can be used for tracking purposes.
    • Email  - This will check what the user has inputted is a valid email address.
    • Select - A dropdown menu where the user can select one value.
    • Radio - Buttons on the page where a user can only select one option e.g Yes, No.
    • Password - What the user typed in will not appear on the front-end. of the form.
    • Fieldset_open, fieldset_close - This is used to style the form, speak to support@phew.org.uk for more information.
    • Custom_Text - Used to display a message.

 

You can add as many fields as you would like by pressing "Add Field".

Once you have added all of your fields, click "Publish".

 

Adding a field to a page

Click "Phew Forms" in the admin navigation menu.

Copy the text in the "Form Shortcode" section and paste it into a page.

This will automatically pull in the form for you.

Contact Form 7

To tell if you use Phew Forms, the side navigation of your website will have an option labelled "Contact".

Click "Contact" in the admin menu and "Add New".

You will then have the option to add in a fields for the form. By clicking on a field type, you will then be presented with a popup to add more details:

  • Field type - Tick this if the user must enter a value into this form to submit.
  • Name - this will be used when sending the email. Try to make it something you will remember.
  • Default value - If anything is entered here, this will be written in the field when the user loads the form.
  • ID attribute & Class attribute - This adds an ID or Class that's used in the code.

Once you have filled out the boxes, click "Insert tag".

For more information on what all the field types do see here: https://contactform7.com/docs/#creating-forms

 

Click the tab at the top of the form labelled "Mail".

This is section where you will set up an email to be sent with details of the contact form submission.

  • To - Where the email will be sent
  • From - Who is email appears as being from.
  • Subject - The email subject
  • Additional headers - Leave blank.

 

Message body

This is what you will see in the email you receive. The values inside square brackets [ ] will automatically be filled in with values from the form.

You can see at the top of the section the values that are on the form and can be filled out.

Click Save.

 

Adding a field to a page

Click "Contact" in the admin navigation menu.

Copy the text in the "Form Shortcode" section and paste it into a page.

This will automatically pull in the form for you.