Designing the Contact page

pideja · 2020-04-17 02:56:43

Today, the topic is the Contact page as seen here: https://pideja.ca/marco/Fr/contact/

It's getting there but two issues need to be resolved and frankly, I'm at a loss as to how to solve these.

- First, I'd like the form on the left to be higher on the page, more or less aligned with the coordinates on the right.

-Then, I'd like to add a button that would link back to a pdf document.

This, I have done before, as seen here:http://marccharlebois.com/marc_fr/contact.php.
But, this was back in the days of CE3. Could the same method be applied here?

Here is a rough layout: contact
I have already implemented some CSS code for the contact page:

/* contact page */
.contact-form p {
	text-align: left;
  }
  .contact-form input {
	max-width: 50%;
	margin: 0 0;
  }
  element.style {
	top: 5px;
	left: 20px;
  }

But clearly it does nothing in the positioning of the form.

Last edited by pideja (2020-04-17 02:58:55)

Daniel Leu · 2020-04-17 03:18:29

First, put your contact information inside a div:

<div class="contact-text">...</div>

Now you can control the format.

I just tried this on my test site:

.contact-text {
  float:right;
  width: 50%;
}

.contact-form{
  float:left;
  width: 50%;
}

You might want to provide different css code for mobile and desktop browsers.

JimR · 2020-04-17 03:20:12

I don't use the Backlight contact form. Instead I use WordPress for all my non-photo pages.

The issue with the page you have is your using a single "stack" but trying to make it two different stacks. You have the top 5 elements (H3 lines for the contact info). Then below that you have the form. But it's all a sequence of HTML elements, and they appear in a stack.

What you seem to be asking for needs two stacks, or html columns. Then when it's responsive on a smaller screen the two columns need to collapse into a single one. When this happens, do you want the top remain as your contact info or the form? When the two collapse into one, you want the top column to be on the left when it's two. You've placed it on the right.

At least that's how it's done in html/css on typical web pages. I'm not exactly sure how to do this using the Backlight page template.

Daniel Leu · 2020-04-17 03:26:58

For download, maybe something like

<button class="btn"><a href="/link/to/pdf/file.pdf" download="file.pdf"><i class="fa fa-download"></i> Download</a></button>

rod barbee · 2020-04-17 04:06:19

the contact information is in a div that has an align attribute. Align in deprecated in html5 and shouldn't be used.

instead, do what Daniel said, and also write a media query so that the float is removed on mobile devices

Yet another option is to copy the form html and then place it and the contact info div in a responsive grid.
https://ttg-tips-and-tricks.barbeephoto … backlight/

pideja · 2020-04-21 22:42:44

This, I inserted into the page CONTACT>Page Settings>Page Copy>Main Copy:

#### <div style="text-align:right"><p>1330, rue Berthier Montreal (Quebec) H2L 1N3 <br> Tel: 514.527.8764<br>Mob: 514.402.5940 <br>e-mail: segami1@videotron.ca <br>web: www.marccharlebois.com</p>

<div class="div-backlight-form contact-form"></div>

The type is the correct font and weight and size and is aligned correctly to the right. Except I can't control the position.
Also, I can control the size of the reply box "Message" but not the other boxes. Still not able to align with the right side text.

The CSS is:

/* contact page */
.contact-text {
	float:left;
	width: 50%;
    }
.contact-form{
	float:left;
	width: 50%;
    }
.contact-form input {
	max-width: 100%;
	margin: 0 0;
  }
element.style {
	top: 5px;
	left: 20px;
  }

rod barbee · 2020-04-21 23:21:51

your html is kind of messed up. For the contact info text, you've got a div inside of an h4 heading.
See those hash marks in front of the div in your code above? Get rid of those. That's markdown for H4. So get rid of that first and see what happens from there.

And you haven't set a float for that contact-info text.

The simplest thing is to do what Daniel suggested. Put that contact info in its own div with a custom class and float it to the right with 50% width.

then be sure to look at the results at mobile size. You'll probably want to put the css that arranges the desktop view in a media query so it only shows on desktop and not mobile. On a phone or tablet, you'll probably want the contact info text either above or below the contact form, otherwise it will all be too small on the screen if you try to jam them side by side.

I'm not sure that the element.style selector is doing anything for you. As far as I know, that's for applying styles inline with the html.

pideja · 2020-04-21 23:46:52

Removing the ####resized the text smaller and aligned the form headings to center while resizing the form boxes.
No position change, of course.

The problem with

The simplest thing is to do what Daniel suggested. Put that contact info in its own div with a custom class and float it to the right with a 50% width.

is that I'm not sure how to do this.

Also, I changed the CSS to read float: left rather than align. Probably a mistake on my part.

rod barbee · 2020-04-22 00:04:16

to put the contact info into its own div:

<div class="contact-info"><p>1330, rue Berthier Montreal (Quebec) H2L 1N3 <br> Tel: 514.527.8764<br>Mob: 514.402.5940 <br>e-mail: segami1@videotron.ca <br>web: www.marccharlebois.com</p>
</div>

(you're currently not closing that contact info div)

then in your custom css:

.contact-info {
text-align:right;
float:right;
}

rod barbee · 2020-04-22 00:07:30

to change the contact form input fields, you need to use a more specific selector.

Instead of .contact-form input, try using .contact-form form input[type="text"]

pideja · 2020-04-22 00:45:11

Apart from placing the text to the left, no change. The CSS doesn't seem to kick in.
I know it's wrong, but adding that

<div style="text-align:right">

does place the text to the right.

Last edited by pideja (2020-04-22 00:45:38)

pideja · 2020-04-22 00:48:36

My mistake. I placed the CSS in the wrong file! Sorry. Text is now aligned right, as I wanted it.

rod barbee · 2020-04-22 00:52:52

yes, it places the text in the right hand side of the div. But it doesn't float the div. the div is being floated by the float:right;
That is working correctly.
But just below the contact-info div you've got another div that has no content:

<div class="div-backlight-form contact-form">

</div>

Then after that you have the div that contains the actual form. Get rid of that first, empty div.

rod barbee · 2020-04-22 00:55:53

in your css, you also have .contact-form floated right. if you remove that float:right; I think you'll see the contact form move up.

pideja · 2020-04-22 02:23:28

Thanks for the help. The form is now left and aligned with the contact info. It is a bit large, but for now, I'll leave it at that.
By the way, I was trying to implement the grid but couldn't get it to function. Something for me to explore, at some point.

rod barbee · 2020-04-22 02:50:02

the html and classes have to be just right for the grid. It's easy to make a typo (been there, done that )

Community @ The Turning Gate

#1 2020-04-17 02:56:43

Designing the Contact page

#2 2020-04-17 03:18:29

Re: Designing the Contact page

#3 2020-04-17 03:20:12

Re: Designing the Contact page

#4 2020-04-17 03:26:58

Re: Designing the Contact page

#5 2020-04-17 04:06:19

Re: Designing the Contact page

#6 2020-04-21 22:42:44

Re: Designing the Contact page

#7 2020-04-21 23:21:51

Re: Designing the Contact page

#8 2020-04-21 23:46:52

Re: Designing the Contact page

#9 2020-04-22 00:04:16

Re: Designing the Contact page

#10 2020-04-22 00:07:30

Re: Designing the Contact page

#11 2020-04-22 00:45:11

Re: Designing the Contact page

#12 2020-04-22 00:48:36

Re: Designing the Contact page

#13 2020-04-22 00:52:52

Re: Designing the Contact page

#14 2020-04-22 00:55:53

Re: Designing the Contact page

#15 2020-04-22 02:23:28

Re: Designing the Contact page

#16 2020-04-22 02:50:02

Re: Designing the Contact page

Board footer