Gravity Form Works

2016-08-07T01:25:00.000-07:00

Formatting Gravity Forms

Step 1: Create a new form. In your WordPress dashboard hover your mouse cursor over the ‘Forms’ tab on the left-hand side and click on ‘New Form’. Give your form a title and then click ‘Create Form’. In the Form Editor page create three ‘Single Line Text’ fields, one ‘Website’ field, one ‘Drop Down’ field, and one ‘Paragraph Text’ field. Watch this video if you need more information about creating a Gravity Form.

Give the three ‘Single Line Text’ fields a title (or Field Label) of First name, Last name, and Email respectively, and check the box specifying that they are required fields. Put a Field Label of ‘Your website (optional)’ for the website field, and ‘Extra details about help needed’ for the Paragraph Text field.

Edit the Drop Down field and remove the Field Label. For this particular field we do not want to show a Label in the form, and instead we will add several selection options for the user to choose from. The first selection option will be shown in the field placeholder area. This is different from the other fields which will use their Field Labels in their placeholder areas.

Edit the Drop Down field and under the Choices area fill out the different selection options. Make the first choice say ‘Select package or topic *’ because this is what will show by default in the form, and therefore acts as a prompt to the user to make a selection. Add ‘Genesis install package’, ‘Types & Views install package’, ‘ WordPress help’, ‘Genesis help’, ‘Gravity Forms help’, ‘Types & Views help’, and ‘Other’ into the other choices areas. To add more choices click on the ‘+’ icon to the right of the choice fields. See Figure 1.

Figure 1 Setting up Gravity FormsFigure 1 Editing a Drop Down field in Gravity Forms.

Step 2: Embed the Gravity Form into a page or post. Open up your Edit Page or Edit Post and click on the Add Form tab. Select the correct form and un-check the Display form title and Display form description boxes and click the Insert Form button. Save your updates and view your page/post. You will see your newly embedded Gravity Form (note that the exact formatting of this form may vary with the WordPress theme you are using). Figure 2 shows the un-formatted Gravity Form placed in the Parallax Pro theme by StudioPress.

unformatted gravity forms

Figure 2 Un-formatted Gravity Form embedded into a WordPress page.

Step 3: Configuring key Gravity Forms settings. Gravity Forms comes with some pre-defined styling, and you need to alter the default settings to allow you to override these settings. In the Forms tab in the WordPress dashboard select Settings from the list. Set the CSS Output settings to ‘No’ and the HTML Output to ‘Yes’. Save settings.

Step 4: Configure the placeholder text. By default the Field Labels are above the respective fields, however we need the Field Labels to be within the field areas. To do this we use a plugin called ‘Gravity Forms – Placeholder add-on’. Search in your dashboards Plugins area for this plugin and install/activate it. Once activated you need to navigate to your form and click on Form Settings (not the general settings but the individual form settings). In the field ‘CSS Class Name’ input the word ‘gplaceholder’. Remember to update your form settings. Now when you refresh your page with the form on the Field Labels will be within the field areas.

***Note that more recent versions of Gravity Forms may not be compatible with this plugin. You can search the WordPress plugins via your dashboard for a new plugin.

You can control how this placeholder text is formatted by adding some CSS styling code. In the WordPress dashboard go to the Appearance tab and click on Editor. This opens the style.css Stylesheet for your theme. Scroll to the bottom you this style.css Stylesheet and input the following code. After you enter this code and save the updates, refresh your form page to see how the form has changed.

Gravity Form Placeholder font edit

—————————————————————————————————- */

::-webkit-input-placeholder {

font-family: @font-primary;

color: #686868;

font-size: 18px;

}

:-moz-placeholder { /* Firefox 18- */

font-family: @font-primary;

color: #686868;

font-size: 18px;

}

::-moz-placeholder { /* Firefox 19+ */

font-family: @font-primary;

color: #686868;

font-size: 18px;

}

:-ms-input-placeholder {

font-family: @font-primary;

color: #686868;

font-size: 18px;

}

The first part is a label/comment so you know what this code does when you refer back to it at a later date. The code is repeated to make sure it is compatible with different versions of web browsers.

Here we are styling the font colour and size.

Step 5: Formatting the Gravity Form Fields. You can target each individual field to control the formatting of your Gravity Form. To do this you need to take note of your form ID, the ID’s of each field, and the type of field (e.g. single line text field, website field etc.). You can get all this information from the Form Editor page of your form. See Figure 3.

Figure 3 Form and Field ID and Field type in Gravity FormsFigure 3 Form editor highlighting the (1) form ID, (2) field type, and (3) field ID.

You have the option to apply formatting to all forms at once, individual forms, field types, and individual form fields. Here we will target the individual form fields. The CSS code to target individual Gravity Form fields is show below:

body .gform_wrapper .gform_body .gform_fields #field_’FORM_ID’_’FIELD_ID’.gfield ‘FIELD TYPE’

{

Styling goes here;

}

Using the example of the form shown in Figure 3, to style the Last name field we target Form ID 8, Field ID 2, and Field Type Single Line Text. The CSS code is therefore:

body .gform_wrapper .gform_body .gform_fields #field_8_1.gfield input[type=text]

{

Styling code here;

}

input[type=text] specifies that you are targeting a single line text field. Other field types targeted in this tutorial are:

select – use for drop down field types.

textarea – use for paragraph text field types.

input[type=url] – use for website field types.

The formatting below is for the form on Neilcurtis.me. Your ID’s will probably be different.

Step 5.1 – Styling the First name field.

Our goal is to set a position, width, height, margin-bottom, margin-right, and a border colour. This field has an ID of 1 and is a Single Line Text field. See the CSS styling below.

body .gform_wrapper .gform_body .gform_fields #field_8_1.gfield input[type=text]

{

float: left;

margin-bottom: 10px;

margin-right: 2%;

height: 60px;

width: 270px !important;

border: 2px solid #119dc9;

}

*Note the use of the !important in the width line. This is because Gravity Forms default styling was still taking effect, and the use of !important here overrides this default code and uses the formatting defined here. The use of the !important is not always viewed as the best way to code in CSS, but for situations such as this where we are targeting only single styling elements it is acceptable.

Step 5.2 – Styling the Last name field.

Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 2 and is a Single Line Text field. See the CSS styling below.

body .gform_wrapper .gform_body .gform_fields #field_8_2.gfield input[type=text]

{

float: left;

margin-bottom: 10px;

height: 60px;

width: 270px !important;

border: 2px solid #119dc9;

}

Step 5.3 – Styling the Email field.

Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 7 and is a Single Line Text field. See the CSS styling below.

body .gform_wrapper .gform_body .gform_fields #field_8_7.gfield input[type=text]

{

float: left;

margin-bottom: 10px;

height: 60px;

width: 270px !important;

border: 2px solid #119dc9;

}

*Note that I have kept the float: left styling, but to ensure the email field is always on it’s own line I have included a clear:both element. This stops any other elements being positioned to the left or to the right of this email field.

Step 5.4 – Styling the Website field.

Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 3 and is a URL field. See the CSS styling below.

body .gform_wrapper .gform_body .gform_fields #field_8_3.gfield input[type=url]

{

float: left;

margin-bottom: 10px;

height: 60px;

width: 270px !important;

border: 2px solid #119dc9;

}

Step 5.5 – Styling the Drop Down field.

Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 6 and is a Select field. See the CSS styling below.

body .gform_wrapper .gform_body .gform_fields #field_8_6.gfield select

{

float: left;

margin-bottom: 10px;

height: 60px;

width: 270px;

color: #686868;

font-size: 18px;

clear: both;

border: 2px solid #119dc9;

}

*Note that here we need to assign a font-size and a color to style the text in this field. This is because we do not use the Field Label as the placeholder text like we do for all other fields (remember we did not assign a Field Label for this field – see Step 1).

Step 5.6 – Styling the Paragraph field.

Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 4 and is a Text Area field. See the CSS styling below.

body .gform_wrapper .gform_body .gform_fields #field_8_4.gfield textarea

{

float: left;

margin-bottom: 10px;

height: 100px;

width: 93% !important;

min-width: 270px;

clear: both;

border: 2px solid #119dc9;

}

*Note that this field has a greater height because the user will likely write more when completing this field. Also the width is set as a % because this field will be wide but it will shrink as the screen size shrinks (e.g. when viewed on a tablet or smartphone). Because the % width is less than 100%, there is the potential for this field to become too small, and therefore a min-width: 270px has also been included so that the field width is never less than 270px.

Step 5.7 – Formatting the Submit button.

In addition to the input fields we need to target the submit button. The following CSS code does this:

body #gform_wrapper_14 .gform_footer input[type=submit]

{

float: left;

height: 60px;

width: 93% !important;

min-width: 270px;

clear: both;

border: 2px solid #119dc9;

}

Step 5.8 – Creating a DIV around the form.

Because the fields are a set width they do not stretch across the full screen. To allow us to align the form centrally we can create a DIV around the Gravity Form to control the forms position on the page. Here a DIV called ‘consultantholder’ is created and the form is placed in this DIV.

CSS styling:

#consultantholder

{

width: 80%;

margin: 0 auto;

margin-top: 25px;

clear: both;

border-top: 2px solid #000000;

padding-top: 20px;

}

*Note that margin: 0 auto; aligns a DIV that is less than 100% centrally. A margin-top and padding-top is also included to space the form out correctly and a border-top is included to show a line above the form.

You can see this form on my ‘Hire me’ page.

Step 5.8 – Changing the submit button text.

In the theme used in this tutorial the default word on the form submit button is ‘GO’. This can easily be changed to whatever you want in the Form Setting area of your Form Editor page. There is a Form Button area and a field for Button text. Here we use ‘Get in touch >>’.

Figure 8 below shows the fully formatted Gravity Form.

formatted gravity forms

Figure 8 Fully formatted Gravity Form.

Summary

It is very easy to set-up and embed a Gravity Form on to your website, but sometimes you want to style these forms to fit in with your website design better. This step-by-step tutorial and video show you how to fully customise a Gravity Form from start to finish.

Google Map Intregation Wordpress Site

2016-08-04T09:50:00.003-07:00

Google Maps CP

Google Maps CP allows to associate geolocation information to your posts and to integrate your blog with Google Maps in an easy and natural way.

Google Map features:

Insert a Google map in the best position within your blog
Deal with large volumes of dots or markers on the Google Maps
Uses Google Maps to discover additional entries related to the post
The location can be defined by physical address and point coordinates
Map markers customization
Allows to embed Google Maps in multiple languages
Allows several Google Maps controls and configuration options

Developer Features of Google Maps CP

Allows design a Contact Form, and associate it with the points in the map.
Send notification emails with the information collected by the form.
Associate an email address to the points, to contact a different person by each point, or a global email address to be notified from all points.
Allows to use the image associated with the point as the point's icon on map.
Demo of the Developer Version of Google Maps CP Plugin

http://demos.net-factor.com/cp-google-maps/wp-login.php

http://demos.net-factor.com/cp-google-maps/

Maps in action:

Map with user's location:

Global maps settings:

Point insertion's form:

Inserting map on sidebars:

Generates points, from the geolocation information stored on image's metadata:

Contact Form Builder (only available in the Developer version of the plugin):

To install Google Maps CP Plugin, follow these steps:

Download and unzip the plugin
Upload the entire codepeople-post-map/ directory to the /wp-content/plugins/ directory
Activate the plugin through the Plugins menu in WordPress

Setting up WooCommerce – PayPal Integration

2016-08-04T08:00:00.003-07:00

WooCommerce – PayPal Integration

To Intregrate paypal 1st of all you need to -

1.Enable PayPal Standard.

2.Enter a title & description.

3.Enter your email address in the PayPal Email field, which is the most important information you need to configure before taking payments.

If you don’t have an account with PayPal, be sure to sign up for a business account. It’s free.

Enable PayPal Sandbox to test your checkout process during your store’s development. With sandbox enabled, no payments/money is taken.

Logs may also be turned on, which can be useful during development. PayPal’s log files URL looks like this: wc-logs/paypal-dcbf81b53e25f70bfc2a2aa29bf.log

You may need to first create a wc-logs folder and set permissions to make it writable.

Shipping Options
There are two shipping options:

Send shipping details to PayPal. You can opt to have WooCommerce send shipping details to PayPal to create shipping labels instead of billing.

Address override option. While we recommend you keep it disabled, it can be used to prevent address information from being changed.

Advanced Options

Invoice Prefix : Add prefix if you’re using the same PayPal account for more than one website/store.

Payment Action:capture funds immediately or only authorize.

Page Style : the name of a custom page from your PayPal account.

API Credentials:

Three fields to paste your PayPal API credentials into: API Username, API Password and API Signature.

PayPal notification URL:

It is a good practice to set up your PayPal notification URL, as it prevents IPN issues.

Auto-Return :

You can set up auto-return in your PayPal account, which will take customers to a receipt page. For example, use the following URL and replace example.com with your own URL:

Avizit

Gravity Form Works

Google Map Intregation Wordpress Site

Setting up WooCommerce – PayPal Integration

WooCommerce – PayPal Integration

If you don’t have an account with PayPal, be sure to sign up for a business account. It’s free.