Change Newsletter section in Landing page

[pedropcamellon]

Is your feature request related to a problem? Please describe.
In section "Subscribe To Our Newsletter" appears a little vertical overflow showing scroll bars.

Describe the solution you'd like
Remove the overflow.

Additional context

[devarshishimpi]

@Pcamellon Thanks For Pointing Out!! Do you want me to assign it to you as well?

[pedropcamellon]

Yes! Thanks

[pedropcamellon]

In NewsLetter component I converted the Function to a Class and tried accessing the elements inside of iframe like this but I'm getting null:

class NewsLetter extends React.Component {
  constructor(props) {
    super(props);
    this.iframe = React.createRef();
  }

  componentDidMount() {
    // This returns null
    console.log(
      this.iframe.current.contentWindow.document.querySelector(
        ".sharedForm"
      )
    );
  }

  render() {
    return (
      <section className="news-section">
        <iframe
          title="newsletter"
          src="https://airtable.com/embed/shrUwGnyLnDvLvBoJ?backgroundColor=purple"
          width="100%"
          height="100%"
          frameBorder="0"
          allowFullScreen=""
          style={{
            position: "absolute",
            top: "0",
            left: "0",
          }}
          ref={this.iframe}
        ></iframe>
      </section>
    );
  }
}

export default NewsLetter;

This is the element I'm traying to acces for removing the overflow:

They say "You can't access the contents of an iFrame if it's cross-domain. See Same-Origin policy." here.

Do we need to use the embedded option or could we try making our own form and posting and fetching trough airtable api ?

[devarshishimpi]

In NewsLetter component I converted the Function to a Class and tried accessing the elements inside of iframe like this but I'm getting null:

class NewsLetter extends React.Component {
  constructor(props) {
    super(props);
    this.iframe = React.createRef();
  }

  componentDidMount() {
    // This returns null
    console.log(
      this.iframe.current.contentWindow.document.querySelector(
        ".sharedForm"
      )
    );
  }

  render() {
    return (
      <section className="news-section">
        <iframe
          title="newsletter"
          src="https://airtable.com/embed/shrUwGnyLnDvLvBoJ?backgroundColor=purple"
          width="100%"
          height="100%"
          frameBorder="0"
          allowFullScreen=""
          style={{
            position: "absolute",
            top: "0",
            left: "0",
          }}
          ref={this.iframe}
        ></iframe>
      </section>
    );
  }
}

export default NewsLetter;

This is the element I'm traying to acces for removing the overflow:

They say "You can't access the contents of an iFrame if it's cross-domain. See Same-Origin policy." here.

Do we need to use the embedded option or could we try making our own form and posting and fetching trough airtable api ?

We'll probably shift to our own form with Airtable API. I think we'll go with formspree

[devarshishimpi]

You can work on a custom form and add it to that section. We'll use formspree for submitting the forms and then Zapier to integrate with Airtable, or maybe Formspree's direct integration with Airtable

[pedropcamellon]

Here is a prototype I made in Figma.

Here is also an screenshot:

What do you think?

[khushi818]

It looks amazing. What if we centralize the heading for desktop version?

[devarshishimpi]

Yep, Works

[devarshishimpi]

It looks amazing. What if we centralize the heading for desktop version?

Hmm, and then later responsive in the center for mobile devices as well

[pedropcamellon]

Desktop (three variations, now with the right proportions)
1.

Mobile (two variations)
1.

[devarshishimpi]

@Pcamellon Looks Great! Could you build the first one for both layouts?

[pedropcamellon]

I'm on it! I'll start with the mobile version. Which design you like the most? I think 1.

[pedropcamellon]

Sharing my progress.... I'm trying not to modify much from the current global styles:

I'm having trouble with getting that checkmark done :(

[pedropcamellon]

Done!

What do I do now?

[devarshishimpi]

Is the background matching and looking good with the rest website content? Like the footer and the about section above it?

[pedropcamellon]

I think it is. I have to remove a margin at the top of the footer section.

Mobile

Desktop

[pedropcamellon]

Form will do nothing:
<form action="" class="newsletter__form text-center">

[devarshishimpi]

Looks great @pedropcamellon Could you update with the latest branch, since the footer has been changed, and it would need a white background?

[devarshishimpi]

Form will do nothing: <form action="" class="newsletter__form text-center">

That's fine, I'll add that later on.

[devarshishimpi]

Looks great @pedropcamellon Could you update with the latest branch, since the footer has been changed, and it would need a white background?

Nvm don't change the color. but do sync with the main branch since there's a new footer added. Ofc even that has to be improved but better than the previous one

[pedropcamellon]

Can you guide me with that? I forked the project and worked on my copy in pedropcamellon/noteslify. What do I do after?

I tried this:

1. Create a new branch
   
2. Make a new commit but I'm getting this:
   
3. In my settings I have no protection rules:
   

[devarshishimpi]

I can't find the branch for the same. Probably, write the code with the new footer at the bottom.
I have to change few settings in the footer as well, but I'll keep it as it is for now until your PR has been made.

[pedropcamellon]

That's the thing. I dont know how to send my changes.

[devarshishimpi]

That's the thing. I dont know how to send my changes.

I can't find your branch. Could you make a new branch in your fork and then commit all of them there? Or even works from your main branch of the fork.

[pedropcamellon]

I couldn't commit because the branch appeared as protected. That was what I mentioned before. It get fixed, i dont know how. I made the commits, push changes and pull request.

[devarshishimpi]

Good that's fixed.

[pedropcamellon]

Can you please check what I did above? I dont have much xp with Github.

• I forked the project and worked on my copy in pedropcamellon/noteslify. I'm seeing this:
  

• I made some commits:
  

[devarshishimpi]

Yes, all of those commits are perfect. Simply go back to your Github Code which you wrote. And then add your code back there. It seems like pulling from the main branch removed your code. Simply copy paste the code from your commits back into the repository code and check if everything is working fine. If yes, commit it to your fork. It will get updated here automatically.

[devarshishimpi]

Wasn't yet completed

[MrKrishnaAgarwal]

Okay!