How to Add a Store Registration Form?

The Agile Store Locator plugin has a pro feature which is called Store Registration Form which allows users to register their store through the front-end page. [ASL_FORM] is the shortcode that adds a store registration form on the WordPress page.

Steps to Setup the Store Registration Form #

1. Go to “pages” on WordPress and add a new page.
2. Add the title of the page. For example, “ Store Form Store Locator”
3. Paste the shortcode [ASL_FORM] on the page and press “Publish”
4. Open the published page to access the Store Registration Form

How can Users Register a New Store? #

1. On the Store Registration Form, fill in the new store information, address location, and any additional details.
2. Press register after agreeing to the terms and conditions.
3. If you have provided an email for notifications and checked the “Notifications”  box in ASL Setting, you get a notification about the addition of the new store
4. Go to the “Manage Stores” tab and approve the newly added store by clicking the ”approve” button next to it
5. The store will now appear in the store list in “Manage Stores” and on the map as well

 Pre-selecting a specific country on the Store Registration Form #

Users can also have a country pre-selected on the Store Registration Form, which can save you the trouble of continuously selecting the country from the dropdown menu when registering a new store.

To have a pre-selected country on the Store Registration Form, simply add the following shortcode on a new page:

[ASL_FORM default_country="223"]

In the above shortcode, the number 223 corresponds to the USA. To pre-select another country please use the corresponding country code provided below.

Redirecting to a specific page after registering a new store #

In case a user wants to be redirected to a different web page after registering a new store, they can do so by adding the below shortcode on the new page:

[ASL_FORM default_country="223" redirect="insert URL here"]

For example, the below shortcode will redirect the user to google.com and the pre-selected country will be the USA.

[ASL_FORM default_country="223" redirect="http://google.com"]

Remove the Google Maps #

Since version 4.8.12, the register form has a Google Map to pinpoint the location of the user by dragging the marker, in case you don’t need it, use this shortcode below.

[ASL_FORM default_country="223" map="0" redirect="insert URL here"]

List of Country codes #

Code	Country Name	Code	Country Name
1	Afghanistan	124	Luxembourg
2	Albania	125	Macau
3	Algeria	126	Macedonia
4	American Samoa	127	Madagascar
5	Andorra	128	Malawi
6	Angola	129	Malaysia
7	Anguilla	130	Maldives
8	Antarctica	131	Mali
9	Antigua and Barbuda	132	Malta
10	Argentina	133	Marshall Islands
11	Armenia	134	Martinique
12	Aruba	135	Mauritania
13	Australia	136	Mauritius
14	Austria	137	Mayotte
15	Azerbaijan	138	Mexico
16	Bahamas	139	Micronesia
17	Bahrain	140	Moldova
18	Bangladesh	141	Monaco
19	Barbados	142	Mongolia
20	Belarus	143	Montserrat
21	Belgium	144	Morocco
22	Belize	145	Mozambique
23	Benin	146	Myanmar
24	Bermuda	147	Namibia
25	Bhutan	148	Nauru
26	Bolivia	149	Nepal
27	Bosnia and Herzegovina	150	Netherlands
28	Botswana	151	Netherlands Antilles
29	Bouvet Island	152	New Caledonia
30	Brazil	153	New Zealand
31	British Indian Ocean Territory	154	Nicaragua
32	Brunei Darussalam	155	Niger
33	Bulgaria	156	Nigeria
34	Burkina Faso	157	Niue
35	Burundi	158	Norfolk Island
36	Cambodia	159	Northern Mariana Islands
37	Cameroon	160	Norway
38	Canada	161	Oman
39	Cape Verde	162	Pakistan
40	Cayman Islands	163	Palau
41	Central African Republic	164	Panama
42	Chad	165	Papua New Guinea
43	Chile	166	Paraguay
44	China	167	Peru
45	Christmas Island	168	Philippines
46	Cocos (Keeling) Islands	169	Pitcairn
47	Colombia	170	Poland
48	Comoros	171	Portugal
49	Congo	172	Puerto Rico
50	Cook Islands	173	Qatar
51	Costa Rica	174	Reunion
52	Cote D’Ivoire	175	Romania
53	Croatia	176	Russia
54	Cuba	177	Rwanda
55	Cyprus	178	Saint Kitts and Nevis
56	Czech Republic	179	Saint Lucia
57	Denmark	180	Saint Vincent and the Grenadines
58	Djibouti	181	Samoa
59	Dominica	182	San Marino
60	Dominican Republic	183	Sao Tome and Principe
61	East Timor	184	Saudi Arabia
62	Ecuador	185	Senegal
63	Egypt	186	Seychelles
64	El Salvador	187	Sierra Leone
65	Equatorial Guinea	188	Singapore
66	Eritrea	189	Slovakia (Slovak Republic)
67	Estonia	190	Slovenia
68	Ethiopia	191	Solomon Islands
69	Falkland Islands (Malvinas)	192	Somalia
70	Faroe Islands	193	South Africa
71	Fiji	194	South Georgia and the South Sandwich Islands
72	Finland	195	Spain
73	France	196	Sri Lanka
74	France	197	St. Helena
75	French Guiana	198	St. Pierre and Miquelon
76	French Polynesia	199	Sudan
77	French Southern Territories	200	Suriname
78	Gabon	201	Svalbard and Jan Mayen Islands
79	Gambia	202	Eswatini
80	Georgia	203	Sweden
81	Germany	204	Switzerland
82	Ghana	205	Syrian Arab Republic
83	Gibraltar	206	Taiwan
84	Greece	207	Tajikistan
85	Greenland	208	Tanzania
86	Grenada	209	Thailand
87	Guadeloupe	210	Togo
88	Guam	211	Tokelau
89	Guatemala	212	Tonga
90	Guinea	213	Trinidad and Tobago
91	Guinea-bissau	214	Tunisia
92	Guyana	215	Turkey
93	Haiti	216	Turkmenistan
94	Heard and Mc Donald Islands	217	Turks and Caicos Islands
95	Honduras	218	Tuvalu
96	Hong Kong	219	Uganda
97	Hungary	220	Ukraine
98	Iceland	221	United Arab Emirates
99	India	222	United Kingdom
100	Indonesia	223	United States
101	Iran	224	United States Minor Outlying Islands
102	Iraq	225	Uruguay
103	Ireland	226	Uzbekistan
104	Israel	227	Vanuatu
105	Italy	228	Vatican City State (Holy See)
106	Jamaica	229	Venezuela
107	Japan	230	Viet Nam
108	Jordan	231	Virgin Islands (British)
109	Kazakhstan	232	Virgin Islands (U.S.)
110	Kenya	233	Wallis and Futuna Islands
111	Kiribati	234	Western Sahara
112	South Korea	235	Yemen
113	North Korea	236	Serbia
114	Kuwait	237	Zaire
115	Kyrgyzstan	238	Zambia
116	Laos	239	Zimbabwe
117	Latvia	240	Montenegro
118	Lebanon	241	Macedonia
119	Lesotho	242	Curaçao
120	Liberia	243	Palestine
121	Libyan Arab Jamahiriya
122	Liechtenstein
123	Lithuania

Customization of Store Registration Form #

The store registration form in Agile Store Locator is highly customizable, allowing you to tailor it to your specific requirements. To add new fields to the form, follow these steps:

Accessing the Custom Field Manager #

To customize the store registration form in Agile Store Locator, start by accessing the Custom Field Manager section within the ASL Settings, newly created fields will appear in the form automatically.

Modifying the Registration Template File #

If you need to modify existing fields or their properties, navigate to the form file located at agile-store-locator/public/partials/asl-store-form.php and make the necessary changes, once you have done the changes, you can make a backup of the template to avoid getting overridden with the updates.

Implementing Field Validation #

Enhance the user experience and ensure data accuracy by adding validation to form fields. Simply include the required attribute in the HTML input elements of the desired fields.

Remove Existing Fields #

While it’s possible to remove fields directly from the form, keep in mind that certain mandatory fields cannot be removed entirely. If you still need to proceed with removal, locate the respective HTML elements in the form file (asl-store-form.php) and delete the corresponding HTML code, for those fields you can use the d-none class to hide them.

Customizing the Store Registration Form #

Starting from version 4.10.11, Agile Store Locator allows users to customize the appearance of the store registration form using CSS variables. These variables let you easily change the typography, font size, colors, and other style elements, the following CSS rules can be add to the Appearance > Additional CSS.

Available CSS Variables #

Here are the CSS variables you can use to style the store registration form:

• --sl-title-color: Sets the color of the title.
• --sl-title-size: Sets the font size of the title.
• --sl-subtitle-color: Sets the color of the subtitle.
• --sl-subtitle-size: Sets the font size of the subtitle.
• --sl-font-color: Sets the color of the form text.
• --sl-font-size: Sets the font size of the form text.
• --sl-label-color: Sets the color of the labels.
• --sl-label-size: Sets the font size of the labels.
• --sl-action-btn-font-size: Sets the font size of the action button text.
• --sl-action-btn-color: Sets the color of the action button text.
• --sl-action-btn-bg: Sets the background color of the action button.
• --sl-action-btn-border: Sets the border color of the action button.
• --sl-font-family: Sets the font family for the form.
• --sl-map-height: Sets the height of the map.

Example Usage #

To apply these custom styles, add the following CSS rules to your stylesheet:

.asl-store-form {
  --sl-title-color: orange;
  --sl-title-size: 50px;

  --sl-subtitle-color: red;
  --sl-subtitle-size: 40px;

  --sl-font-color: pink;
  --sl-font-size: 15px;

  --sl-label-color: green;
  --sl-label-size: 10px;

  --sl-action-btn-font-size: 15px;
  --sl-action-btn-color: white;
  --sl-action-btn-bg: purple;
  --sl-action-btn-border: purple;

  --sl-font-family: "Poppins";

  --sl-map-height: 500px;
}

Customization Examples #

Example 1: Changing Title and Subtitle Colors and Sizes

.asl-store-form {
  --sl-title-color: blue;
  --sl-title-size: 60px;

  --sl-subtitle-color: gray;
  --sl-subtitle-size: 35px;
}

Example 2: Customizing Form Text and Label Styles

.asl-store-form {
  --sl-font-color: #333;
  --sl-font-size: 14px;

  --sl-label-color: #666;
  --sl-label-size: 12px;
}

Example 3: Styling the Action Button

.asl-store-form {
  --sl-action-btn-font-size: 16px;
  --sl-action-btn-color: #fff;
  --sl-action-btn-bg: #007bff;
  --sl-action-btn-border: #007bff;
}

Example 4: Setting the Font Family and Map Height

.asl-store-form {
  --sl-font-family: "Arial, sans-serif";
  --sl-map-height: 400px;
}

The above mentioned fonts need to be installed on your site. By utilizing these CSS variables, you can create a store registration form that matches your site’s design and branding.