How can I moved to the right as per the screenshots linked to this plugin? (do I need some separate CSS code?)
there are 2 ways to achieve this,
– use custom address fields (see FAQ #5 along with the Smart grid-layout plugin to place your fields in a grid layout using the UI editor provided in that plugin. This is the most flexible solution.
– alternatively, display inline and float the google map element left and display inline the address field container using CSS styling.
Thank you for the reply.
– alternatively, display inline and float the google map element left and display inline the address field container using CSS styling
In order to display inline and float with CSS, I assume the map and address need to be assigned to ids/classes. Using the inbuilt contact form 7 generated code:
[map map-911 id:my_id_tag show_address "zoom:3;clat:0;clng:79.810600;lat:12.007089;lng:79.810600"]
With the above code, the address bar does not display. The code seems to crash when it gets to id:my_id_tag. I’ve also tried assigning ‘map-911’ and/or ‘show address’ to ids/classes using normal html (id=”map-911″), but does not work either.
We changed the above piece of code to the below, which then displays the show_address properly, but we cannot seem to get the ‘id:my_id_tag’ to work with our CSS code.
[map map-911 show_address id:my_id_tag "zoom:3;clat:0;clng:79.810600;lat:12.007089;lng:79.810600"]
Our final code looked as follow, but did not change anything on the display:
Code in the contact form
[map map-911 show_address id:my_id_tag "zoom:3;clat:0;clng:79.810600;lat:12.007089;lng:79.810600"]
Code in the CSS editor
#my_id_tag {
display: inline;
float: left;
}
I assume the map and address need to be assigned to ids/classes
cf7 plugin assigns unique classes to field wrappers,
.wpcf7-form-control-wrap.<your-field-name>
so you don’t need an IDs as each field has a unique name and that is used to construct the class.
Great plugin.
thanks, do leave a review when you have 2 minutes of spare.
cf7 plugin assigns unique classes to field wrappers,
.wpcf7-form-control-wrap.<your-field-name>
so you don’t need an IDs as each field has a unique name and that is used to construct the class.
Okay, so what is the field name for just the address section?
With the following CSS code, I can make the map and address smaller and float left, but it applies changes to both the map and the address section. How do I call just the address section and just the map section within the field ‘my_map’?
CSS
.wpcf7-form-control-wrap.my_map{
display: inline;
width: 45%;
float: left;
}
HTML/ CF7
[map* my_map show_address “zoom:4;clat:-38.366664084361826;clng:35.73023504724712;lat:-35.786595063131884;lng:38.280644136047357”]
